Типы CSS - добавление CSS с HTML - httpdoc.ru

Типы CSS - добавление CSS с HTML

CSS - это таблица стилей, тогда как HTML - это язык разметки. Оба они отличаются друг от друга структурой, функциями и применением. Однако они оба служат общей цели - создать привлекательный веб-сайт. HTML определяет структуру веб-сайта, а CSS украшает ее различными свойствами. Итак, как интегрировать CSS с HTML?

Прежде чем ответить на вопрос выше, вы должны быть знакомы с различными типами CSS. Различные типы CSS означают не какие-либо изменения свойств или функций, а разные способы встраивания CSS в HTML. Нет никаких «типов CSS», но есть разные методы для добавления CSS. Каждому методу дается собственное имя с определенной целью и преимуществом.

Итак, как интегрировать CSS с HTML? Есть три способа встроить CSS в HTML:

Тип CSS Описание
Встроенный CSS Встроенный CSS дает стиль CSS только определенному элементу HTML.
Внутренний CSS Внутренний CSS определяет CSS только для определенной веб-страницы. Никакая другая веб-страница не может наследовать стиль CSS от внутреннего CSS.
Внешний CSS Внешний CSS - это совершенно новый .css файл. Таким образом, его можно добавить на несколько страниц, определяя стиль для разных страниц из одного файла CSS.

Встроенный CSS

Встроенный CSS придает стиль одному элементу HTML. Мы добавляем встроенный CSS в открывающий тег элемента HTML, который хотим стилизовать. Мы добавляем style атрибут внутри открывающего тега, а затем записываем CSS в качестве его значения.

Помните, что встроенный CSS предназначен для одного элемента. Он используется, когда мы хотим придать определенный стиль определенному элементу. Предположим, все абзацы на веб-странице красные, но мы хотим сделать первый абзац синим цветом с полужирным форматированием текста. Один из способов - использовать идентификатор и класс (рассматривается позже) или мы можем использовать встроенный CSS в первом абзаце, чтобы сделать его синим. Например: <p style="color:blue; font-weight:bold;">...</p>

ПРИМЕЧАНИЕ. Следует отметить, что встроенный CSS имеет наивысший приоритет по сравнению с внутренним или внешним CSS, поскольку он более конкретен. Браузер переопределяет внутренний или внешний CSS, примененный к элементу, если он находит какой-либо встроенный CSS.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> Inline CSS </title> 
  <meta charset="UTF-8">  
</head> 
<body>
  <h1 style="color:red; font-size:30px;">This is a heading</h1>
  <p style="color:green; font-size:22px;">This is a paragraph.</p>
  <div style="color:blue; font-size:14px;">This is some text content.</div>
</body>
</html>

Выход

Inline CSS Examples

Это заголовок

Это абзац.

Это какой-то текстовый контент.

Внутренний CSS

Во внутреннем CSS мы определяем CSS для всей веб-страницы. Вместо того, чтобы писать встроенный CSS для каждого элемента, мы используем селекторы CSS и определяем стиль для элементов HTML.

Например, если мы дадим CSS селектору абзацев, тогда все абзацы на этой веб-странице будут иметь этот стиль CSS. Если этот стиль не отменен встроенным CSS. Подобным образом ID, классы, селекторы тегов, псевдоселекторы используются во внутреннем CSS для придания стиля элементам HTML. Все эти селекторы будут рассмотрены позже в руководстве.

Внутренний CSS написан внутри <style> тегов. Эти теги являются парными тегами, т. Е. Одним открывающим и одним закрывающим тегами. Весь CSS написан с этими тегами. Вы можете написать <style> тег в любом месте страницы, внутри <head> или внутри <body> тега. Однако рекомендуется добавить внутренний и внешний CSS в <head> тег, поскольку он будет загружать CSS перед телом веб-страницы.

В открывающем теге стиля вы должны указать тип кода, который вы собираетесь написать внутри <style> тега. В данном случае это CSS, поэтому тег будет иметь вид <style type="text/css"> . Посмотрите на пример ниже:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> Embedded CSS </title> 
  <meta charset="UTF-8">  

<style type="text/css">
 body { background-color: seagreen; }
 p { color: #fff; }
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

Выход

Embedded CSS

Это заголовок

Это абзац текста.


Внешний CSS

Внешний CSS написан так же, как внутренний CSS. Он также использует селекторы идентификаторов, классов, тегов и т. Д. Однако он записывается в отдельном .css файле, а не в <style> теге. Причина использования внешнего файла для CSS состоит в том, чтобы расширить диапазон стилей CSS и способствовать повторному использованию кода.

Возьмем, к примеру, наш веб-сайт coderepublics.com , у нас одинаковый стиль CSS для каждой страницы руководства. Стиль шрифта такой же, стиль заголовка, цвет ссылок, размер шрифта, цвет навигационной панели и т. Д. Идентичны. Как вы думаете, мы написали CSS для каждой страницы отдельно? Нет, у нас есть внешний файл CSS, который добавляется ко всем веб-страницам. Это повторное использование кода, написанного один раз, многократно использованного.

Внешний файл CSS встроен в HTML с помощью <link> тега. Вы можете использовать несколько тегов ссылок для добавления различных файлов CSS. Для <link> тега также необходимо указать тип файла связи. Здесь rel атрибут используется для определения отношения файла к документу HTML, а type атрибут определяет тип. href Атрибут определяет имя / расположение внешнего файла CSS. Например, <link rel="stylesheet" type="text/css"> . Посмотрите на синтаксис использования <link> тега ниже:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> External CSS </title> 
  <meta charset="UTF-8">  
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
<h1> This is a heading. </h1>
<p> This is a paragraph. </p>
</body>
</html>

Выход

External CSS

Это заголовок.

Это абзац.