Применение css к html
Существует три способа применения CSS к документу HTML: строковые, вложенные и внешние таблицы стилей. Если вы не имеете уважительной причины для использования одного из двух первых способов, всегда используйте третий вариант. Причина этого скоро станет очевидной, но сначала рассмотрим различные варианты.
Строковые стили
Можно применить таблицу стилей к элементу, используя атрибут style следующим образом:
<p style="background:blue; color:white; padding:5px;">Paragraph</p>
Внутри этого атрибута перечисляются все свойства CSS и их значения (каждая пара свойство/значение отделяется друг от друга точкой с запятой, и каждое свойство отделяется от своего значения в каждой паре двоеточием). Таким образом определяют стили в CSS. В качестве примера можно рассмотреть следующий код страницы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Inline Styles Example</title>
</head>
<body>
<h1>CSS Basics Example</h1>
<ul id="menu">
<li>Item</li>
<li class="warning">Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Paragraph</p>
<p style="background:blue;color:white;padding:5px;">Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p class="warning">Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li id="extra">Item</li>
<li>Item</li>
</ul>
</body>
</html>
Если открыть этот пример в браузере, то можно видеть, что параграф с атрибутом style будет синим с белым текстом и будет иметь другой размер по сравнению с другими, как показано на рисунке 27.1.
Рис. 27.1. Браузер Opera показывает параграф с применнной строковой таблицей стилей иначе, чем другие параграфы
Преимущество строковых стилей состоит в том, что браузер будет вынужден использовать эти настройки. Все другие стили, определенные в других таблицах стилей, или даже вложенные в заголовок документа, будут переопределены этими стилями.
Большая проблема строковых стилей состоит в том, что они делают обслуживание значительно труднее, чем это должно быть. Использование CSS предназначено для разделения представления документа и его структуры, но строковые стили делают именно обратное — рассеивают правила представления по документу.
Кроме проблем с обслуживанием, вы не получите никаких преимуществ самой мощной части CSS: каскадирования. Мы вернемся к более подробному рассмотрению каскадирования в следующей лекции, но пока достаточно знать, что использование каскадирования означает, что вы определяете внешний вид в одном месте, а браузер применяет его ко всем элементам, которые соответствуют определенному правилу.
Вложенные стили
Вложенные таблицы стилей помещаются в заголовке документа внутри элемента style, как в следующем примере страницы:
<style type="text/css" media="screen">
p {
color:white;
background:blue;
padding:5px;
}
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Embedded Styles Example</title>
<style type="text/css" media="screen">
p{
color:white;
background:blue;
padding:5px;
}
</style>
</head>
<body>
<h1>CSS Basics Example</h1>
<ul id="menu">
<li>Item</li>
<li class="warning">Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p class="warning">Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li id="extra">Item</li>
<li>Item</li>
</ul>
</body>
</html>
Листинг . (html, txt)
Если открыть эту страницу в браузере, то вы увидите, что определенные стили применяются ко всем параграфам в документе, как показано на рисунке 27.2. Просмотрите также исходный код примера страницы, чтобы увидеть код CSS в заголовке.
Рис. 27.2. Браузер Opera показывает все параграфы со стилями, определенными во вложенной таблице стилей
Преимущество вложенных таблиц стилей состоит в том, что не нужно добавлять атрибут style в каждый параграф — можно оформить их все с помощью одного единственного определения. Это означает также, что если потребуется изменить внешний вид всех параграфов, это можно будет сделать в одном единственном месте, однако все это, тем не менее, ограничено одним документом — как быть, если вы захотите определить внешний вид параграфов всего сайта? Воспользуйтесь внешними таблицами стилей.