Подключение CSS

Прочитав каскадную таблицу стилей, браузер форматирует HTML документ в соответствии с правилами, заданными в этой таблице стилей.

Три способа добавить CSS на веб-страницу

Существует три способа подключения CSS к документу HTML:

  • Внутриэлементный или строчный
  • Внутридокументный или встроенный
  • Внешний

Внутриэлементные стили

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

Это выглядит следующим образом:

<!DOCTYPE html>
<html>
<body>
<h2>Заголовок</h2>
<p>Текст. И еще текст.</p>
</body>
</html>

Однако, как вы, наверное, помните, лучший подход – это когда HTML документ полностью свободен от элементов и атрибутов визуального представления. Разделение содержимого и его визуального представления — это то, ради чего, собственно, и создавался CSS. Поэтому внутриэлементный способ определения стилей следует стараться избегать и использовать только при крайней необходимости.

Внутридокументные стили

Встроенные или внутридокументые стили используются для определения стилей элементов целой веб-страницы, если эта страница имеет свои уникальные стили. Для этого в теге <head> определяется тег <style>, в котором задаются все стили для данной веб-страницы.

Такое определение выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>Пример CSS</title>
<style>
  h2 {
    color: red;
  }
  p {
    color: blue;
  }
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Текст. И еще текст.</p>
</body>
</html>

Следующее определение сделает все параграфы страницы синими, а все ссылки заголовки первого уровня красными.

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

Внешние стили

Внешние стили используются для подключения одновременно ко многим страницам сайта. Благодаря этому, изменив всего один файл CSS можно изменить внешний вид всего сайта!

Для определения таблицы стилей в любом текстовом редакторе создается отдельный CSS файл с определениями стилей. Содержимое такого файла может быть, например, таким:

p {
   color: red;
}
a {
   color: blue;
}

Если сохранить такой файл под именем «web.css» (расширение должно быть «.css»), то его подключают к HTML документу при помощи тега <link>:

<!DOCTYPE html>
<html>
<head>
<title>Пример CSS</title>
<link rel="stylesheet" href="web.css">
</head>
<body>
<h2>Заголовок</h2>
<p>Текст.  Еще текст.</p>
</body>
</html>

Далее вы увидите, что есть еще и другие способы подключения внешних стилей, но в данный момент упомянутых способов будет вполне достаточно.

Несколько таблиц стилей на одной странице

Если какое-то свойство определяется для одного и того же селектора (элемента) в нескольких разных таблицах стилей, то использоваться будет значение того свойства, которое определяется в последней по подключению таблице стилей.

Допустим, что во внешней таблице стилей определен такой стиль для элемента <h2>:

h2 {
  color: navy;
}

Теперь допустим, что во внутридокументной таблице стилей также определен стиль для элемента <h2>:

h2 {
  color: orange;   
}

Если внутридокументная таблица подключается после внешней таблицы стилей, то цвет элемента <h2> будет «orange»:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h2 {
  color: orange;
}
</style>
</head>

Однако, если внутридокументная таблица подключается до внешней таблицы стилей, то цвет элемента <h2> будет «navy»:

<head>
<style>
h2 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle. css">
</head>

Каскадный порядок

А какой стиль будет использоваться, если для HTML элемента задано больше одного стиля?

Все стили на веб-странице будут «каскадно» транслированы в новую «виртуальную» таблицу стилей в следующем порядке (цифра 1 имеет наивысший приоритет):

  1. Внутриэлементный стиль (внутри HTML элемента)
  2. Внешние и внутридокументные таблицы стилей (в секции head)
  3. Стили браузера по умолчанию

Таким образом, у внутриэлементных стилей самый высокий приоритет, и они будут переопределять внешние и внутридокументные стили, а также стили, заданные браузером по умолчанию.

Подготовка проекта CSS и HTML с помощью Visual Studio Code