Существует четыре способа подключения стилей к вашему HTML-документу. Наиболее часто используемые методы – это встроенные CSS и внешние CSS.

Встроенный CSS в HTML – элемент <style>

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

<head>
  <style type = "text/css" media = "all">
    ...
  </style>
</head>

Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса:

<!DOCTYPE html>
<html>
  <head>
    <style type = "text/css" media = "all">
      body {
        background-color: LightGreen;
      }
      h1 {
        margin-left: 50px;
        color: DarkGreen;
      }
	</style>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Абзац.</p>
  </body>
</html>

Получим следующий результат:

Встроенный CSS, встроенные стили в HTML

Атрибуты

АтрибутЗначениеОписание
typetext/cssУказывает язык таблицы стилей как тип содержимого (тип MIME). Обязательный атрибут.
mediascreen
tty
tv
projection
handheld
print
braille
aural
all		Указывает устройство, на котором будет отображаться документ. Значение по умолчанию – all. Необязательный атрибут.

Встроенный CSS – атрибут стиля

Вы можете использовать атрибут для любого HTML-элемента для определения правил стиля. Эти правила будут применяться только к данному элементу. Вот общий синтаксис:

<элемент style = "...правила стиля...">

Атрибуты

АтрибутЗначениеОписание
styleПравила стиляЗначение атрибута style представляет собой комбинацию объявлений стиля, разделенных точкой с запятой (;).

Пример

Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1 style = "color: #FFA500;">Встроенный CSS</h1>
  </body>
</html>

Получим следующий результат:

Встроенный CSS, встроенные стили в HTML с помощью атрибута, атрибут

Внешний CSS стили – элемент <link>

Элемент <link> может использоваться для подключения внешних CSS файлов в ваш HTML-документ.

Внешняя таблица стилей CSS представляет собой отдельный текстовый файл с расширением .css. Вы определяете все правила стиля в этом текстовом файле, а затем можете подключить CSS файл в любой HTML-документ с помощью элемента <link>.

Вот общий синтаксис подключения внешнего файла CSS:

<head>
  <link type = "text/css" href = "..." media = "..." />
</head>

Атрибуты

Атрибуты ассоциируются с элементами <style>:

АтрибутЗначениеОписание
typetext/cssУказывает язык таблицы стилей как тип содержимого (тип MIME). Обязательный атрибут.
hrefURLУказывает файл таблицы стилей с правилами стиля. Обязательный атрибут.
mediascreen
tty
tv
projection
handheld
print
braille
aural
all		Указывает устройство, на котором будет отображаться документ. Значение по умолчанию – all. Необязательный атрибут.

Пример

Рассмотрим простой файл таблицы стилей с именем style.css, имеющий следующие правила:

h1, h2, h3 {
  color: #00CED1;
  letter-spacing: .2em;
  text-transform: lowercase;
  margin-bottom: 2em;
  font-weight: 700;
}

Теперь Вы можете подключить CSS-файл style.css в любой HTML-документ следующим образом:

<head>
  <link type = "text/css" href = "style.css" media = " all" />
</head>

Импорт CSS – правило @import

@import – используется для импорта внешней таблицы стилей способом, аналогичным элементу <link>. Ниже приведен общий синтаксис правила @import в CSS:

<head>
  @import "URL";
</head>

Где URL – это url-адрес файла таблицы стилей с правилами стиля. Вы также можете использовать другой синтаксис:

<head>
  @import url("URL");
</head>

Пример

Ниже приведен пример, показывающий Вам, как сделать импорт CSS-файла в HTML-документ:

<head>
  @import "style.css";
</head>

CSS правила приоритета стиля

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

  • Любая встроенная таблица стилей имеет наивысший приоритет. Таким образом, она переопределит любое правило, определенное в тегах <style>...</style> или правилах, определенных в любом внешнем файле таблицы стилей.
  • Любое правило, определенное в тегах <style>...</style>, переопределяет правила, определенные в любом внешнем CSS-файле.
  • Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет в CSS, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два предшествующих правила.

Обработка старыми браузерами

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

<style type="text/css">
  
</style>

Комментарии в CSS

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

Также Вы можете использовать /*...*/ как для однострочных комментариев в CSS, так и для комментирования многострочных блоков аналогично тому, как это делается на языках программирования C и C++.

Пример

<!DOCTYPE html>
<html>
  <head>
    <style type = "text/css" media = "all">
      p {
        color: DeepSkyBlue;
		/* Это однострочный комментарий в CSS */
		text-align: center;
      }
      /* Это
	  многострочный
	  комментарий */
	</style>
  </head>
  <body>
    <p>Привет ProgLang!</p>
  </body>
</html>

Получим следующий результат:

Комментарии в CSS, однострочный комментарий в CSS, многострочный комментарий в CSS
Источник: CSS - Inclusion.

Оглавление