Применение CSS
Три способа добавить стили в HTML-документ: встроенные, внутренние и внешние. Узнайте, когда и как применять каждый из них.
CSS управляет внешним видом HTML-документа, однако браузеру нужно знать, где искать правила стилей. Существуют три способа подключить CSS к HTML-странице, и каждый из них подходит для разных ситуаций:
- Встроенный стиль (inline) — правила прописываются непосредственно на отдельном элементе с помощью атрибута
style. - Внутренний (embedded) стиль — правила собираются внутри элемента
<style>в разделе<head>страницы. - Внешний стиль — правила хранятся в отдельном файле
.cssи подключаются к странице.
На этой странице рассмотрены все три метода, объяснено, когда использовать каждый из них, и показано, как они взаимодействуют, когда более одного метода нацелено на один и тот же элемент. Если вы только начинаете изучать структуру CSS-правила (селектор, свойство, значение), сначала прочитайте раздел Синтаксис CSS.
Встроенный стиль
Встроенный стиль записывается непосредственно на элементе с помощью его атрибута style. Правила применяются только к этому конкретному элементу. Атрибут содержит одно или несколько объявлений (свойство: значение), разделённых точкой с запятой — селектор и фигурные скобки не нужны, так как элемент, к которому применяется правило, — это тот самый элемент, на котором оно написано.
Когда использовать: для быстрых единичных правок или стилей, генерируемых динамически (например с помощью JavaScript). Избегайте встроенных стилей для общего оформления — поскольку правило привязано к элементу, его нельзя переиспользовать, и поддерживать его на большой странице сложно.
Пример создания встроенного стиля для HTML-документа:
Пример встроенного стиля CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>Результат
Разберём пример. На теге <h2> мы написали style="color:#1c87c9", поэтому текст этого заголовка отображается синим цветом #1c87c9.
То же самое мы сделали на теге <p> с style="color:#8ebf42; font-size:15px". Два объявления разделены точкой с запятой: текст между открывающим тегом <p> и закрывающим </p> окрашен в #8ebf42 (зелёный) и имеет размер 15px.
Внутренний стиль
При использовании внутреннего (или embedded) стиля CSS страницы размещается внутри элемента <style> в разделе <head> страницы. В отличие от встроенных стилей, здесь пишутся полные правила — селектор, за которым следует блок объявлений в фигурных скобках, — поэтому одно правило может одновременно охватывать множество элементов.
Когда использовать: для отдельной страницы, которой необходимо собственное оформление, не общее со всем сайтом, или для быстрого прототипирования. Недостаток в том, что правила действуют только на этой одной странице. Чтобы оформить несколько страниц одинаково, пришлось бы копировать блок <style> в каждую из них — именно эту проблему решают внешние таблицы стилей.
В примере ниже правило body красит фон страницы в #1c87c9 (синий), а правило p делает текст абзаца белым.
Пример создания внутреннего стиля для HTML-документа:
Пример внутреннего стиля CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>Внешний стиль
Внешняя таблица стилей хранит весь CSS в отдельном файле, независимо от HTML. Это стандартный подход для реальных сайтов, так как каждая страница может подключаться к одному файлу и использовать единое оформление. Файл можно создать в любом текстовом или HTML-редакторе, например в Notepad или Sublime Text.
Файл содержит только CSS — без HTML-тегов — и сохраняется с расширением .css. Чтобы подключить его к странице, добавьте тег <link> внутри раздела <head>. Каждая страница, которая должна использовать эти стили, нуждается в собственном теге <link>.
Когда использовать: практически всегда для многостраничного сайта. Поскольку правила находятся в одном месте, изменение цвета или шрифта в единственном файле .css мгновенно обновляет все страницы, а браузер может кешировать этот файл, загружая его лишь один раз.
Пример создания внешнего стиля для HTML-документа:
Пример внешнего стиля CSS
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Соответствующий файл style.css может выглядеть так:
body {
background-color: #1c87c9;
}
p {
color: white;
}Какой метод выбрать?
Если говорить об общем правиле:
- Используйте внешнюю таблицу стилей практически для всех реальных проектов — она переиспользуема, кешируется и легко поддерживается.
- Используйте внутренние стили для отдельной страницы или быстрого демо.
- Используйте встроенные стили только для единичной правки, которую невозможно выразить иначе (чаще всего — для динамически вычисляемых значений).
Как методы взаимодействуют
Когда один и тот же элемент одновременно охвачен несколькими методами, браузер должен решить, какое объявление имеет приоритет. При прочих равных условиях порядок силы следующий:
- Встроенные стили (наивысший приоритет).
- Внутренние и внешние правила, определяемые специфичностью селектора, а при равной специфичности — тем, какое правило стоит последним.
Таким образом, встроенный атрибут style="color:red" перекрывает правило p { color: blue; } из таблицы стилей. Эта система приоритетов называется каскадом — «C» в аббревиатуре CSS.