Глава 3. Встроенные
каскадные таблицы стилей CSS
(Cascade Style Sheets)
CSS (англ. Cascading Style Sheets — каскадные таблицы
стилей) — формальный язык описания внешнего
вида документа, написанного с использованием языка разметки.
Преимущественно
используется как средство описания, оформления
внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться
к любым XML-документам, например, к SVG или XUL.
3.1. Способы подключения
CSS к документу
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах
стилей, то есть таблицы стилей содержат
в себе правила CSS. Эти таблицы стилей могут
располагаться как в самом веб-документе, внешний вид которого они описывают,
так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычный текстовый файл. В файле .css не содержится ничего,
кроме перечня правил CSS и комментариев
к ним.) То есть, эти таблицы стилей могут
быть подключены, внедрены в описываемый
ими веб-документ четырьмя различными способами:
когда таблица стилей находится
в отдельном файле, она может быть подключена
к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
<head>
.....
<link rel="stylesheet"
type="text/css" href="style.css"/>
</head>
когда таблица стилей находится
в отдельном файле, она может быть подключена
к веб-документу посредством директивы
@import, располагающейся в этом документе
между тегами <style> и </style> (которые,
в свою очередь, располагаются в этом документе
между тегами <head> и </head>) сразу после
тега <style>, которая также указывает
(в своих скобках, после слова url) на адрес
этой таблицы стилей. Все правила этой
таблицы действуют на протяжении всего
документа;
<head>
.....
<style type="text/css"
media="all">
@import url(style.css);
</style>
</head>
когда таблица стилей описана
в самом документе, она может располагаться
в нём между тегами <style> и </style> (которые,
в свою очередь, располагаются в этом документе
между тегами <head> и </head>). Все правила
этой таблицы действуют на протяжении
всего документа;
<head>
.....
<style type="text/css">
body {
color: red;
}
</style>
</head>
- когда таблица стилей описана
в самом документе, она может располагаться
в нём в теле какого-то отдельного тега
(посредством его атрибута style) этого документа.
Все правила этой таблицы действуют только
на содержимое этого тега.
<p style="font-size:
21px; color: green;">Рассказ о том,
как вредно красить батареи</p>
В первых двух случаях говорят,
что к документу применены внешние таблицы
стилей, а во вторых двух случаях — внутренние таблицы
стилей.
Для добавления CSS к XML-документу, последний должен содержать
специальную ссылку на таблицу стилей.
Например:
<?xml-stylesheet type="text/css"
href="style.css"?>
3.2. Иерархия элементов
внутри документа
Как известно, HTML-документы строятся на основании иерархии
элементов, которая может быть наглядно
представлена в древовидной форме. Элементы
HTML друг для друга могут быть родительскими, дочерними,
элементами-предками, элементами-потомками,
сестринскими.
Элемент является родителем другого
элемента, если в иерархической структуре
документа он находится сразу, непосредственно
над этим элементом. Элемент является предком другого
элемента, если в иерархической структуре
документа он находится где-то выше этого
элемента.
Пускай, например, в документе присутствуют
два абзаца p, включающие
в себя шрифт с полужирным начертанием b. Тогда элементы b будут дочерними элементами своих родительских элементов p, и потомками своих предков body. В свою очередь,
для элементов p элемент body будет являться
только родителем. И
кроме того, эти два элемента p будут являться сестринскими элементами,
как имеющими одного и того же родителя — body.
В CSS могут задаваться при помощи селекторов не только одиночные элементы,
но и элементы, являющиеся потомками, дочерними
или сестринскими элементами других элементов
(см. подраздел «виды селекторов»).
3.3. Правила построения
CSS
В первых трёх случаях подключения
таблицы CSS к документу (см. выше) каждое
правило CSS из таблицы стилей имеет две
основные части — селектор и блок объявлений.Селектор, расположенный
в левой части правила, определяет, на
какие части документа распространяется
правило. Блок объявлений располагается
в правой части правила. Он помещается
в фигурные скобки, и, в свою очередь, состоит
из одного или более объявлений,
разделённых знаком «;». Каждое объявление представляет
собой сочетание свойства CSS и значения, разделённых
знаком ": ". Селекторы могут группироваться
в одной строке через запятую. В таком
случае свойство применяется к каждому
из них.
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
В четвёртом случае подключения
таблицы CSS к документу (см. список) правило
CSS (являющееся значением атрибута style
тега, на который оно действует) представляет
собой перечень объявлений («свойство CSS : значение»), разделённых
знаком «;».
Виды селекторов
Селекторы правила CSS могут
быть:
* {margin:0; padding:0;}
p {font-family: Garamond,
serif;}
.note {color: red; background: yellow; font-weight: bold;}
селекторами идентификаторов;
#paragraph1 {margin: 0;}
a[href="http://www.somesite.com"]{font-weight:bold;}
селекторами потомков (контекстными
селекторами);
div#paragraph1 p.note {color: red;}
селекторами дочерних элементов;
p.note > b {color: green;}
селекторами сестринских элементов;
h1 + p {font-size: 24pt;}
селекторами псевдоклассов;
a:active {color:yellow;}
селекторами псевдоэлементов.
p::first-letter {font-size: 32px;}
Также в CSS существует так называемый универсальный селектор, обозначающий любой элемент, встречающийся в документе. Например, * {color: red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например, .first {…} и *.first {…} имеют один и тот же смысл.
3.4. Классы элементов.
Идентификаторы элементов
Класс или идентификатор может
быть присвоен какому-нибудь элементу
(тегу) HTML посредством атрибутов class или
id этого элемента (тега):
<div id="first">
... </div>
<p class="big">
... </p>
Основное отличие между классами
элементов и идентификаторами элементов
в том, что в документе какой-нибудь класс
может быть присвоен сразу нескольким
элементам, а идентификатор — только одному.
Также отличие в том, что могут существовать
множественные классы (когда класс элемента
состоит из нескольких слов, разделённых
пробелами). Для идентификаторов такое
невозможно.
Важно отметить следующее отличие
идентификатора от класса: идентификаторы
широко используются в JavaScript для нахождения
уникального элемента в документе.
Имена классов и идентификаторов,
в отличие от названий тегов и их атрибутов,
чувствительны к регистру ввода букв.
Свойства классов и идентификаторов
задаются с помощью соответствующих селекторов.
Причём может быть задано как свойство
класса в целом (в таком случае селектор
начинается с «.»), или свойство идентификатора
самого по себе (в таком случае селектор
начинается с «#»), так и свойство какого-нибудь
элемента этого класса или с этим идентификатором.
В CSS помимо классов, задаваемых
автором страницы, существует также ограниченный
набор так называемых псевдоклассов,
описывающих вид гиперссылок с определённым
состоянием в документе, вид элемента,
на котором находится фокус ввода, а также
вид элементов, являющихся первыми дочерними
элементами других элементов. Также в
CSS существует четыре так называемых псевдоэлемента:
первая буква, первая строка, применение
специальных стилей до и после элемента.
3.5. Наследование.
Каскадирование. Приоритеты стилей CSS
Применение CSS к документам
HTML основано на принципах наследования и каскадирования.
Принцип наследования заключается
в том, что свойства CSS, объявленные для
элементов-предков, наследуются элементами
потомками. Но, естественно, не все свойства
CSS наследуются — например, если для тега
параграфа p средствами CSS задана рамка,
то она не будет наследоваться ни одним
тегом, содержащимся в данном теге p, а
вот если для параграфа p средствами CSS
задан цвет шрифта (например, color:green;),
то это свойство будет унаследовано каждым
элементом-тегом, находящимся в параграфе.
Принцип каскадирования применяется
в случае, когда какому-то элементу HTML
одновременно поставлено в соответствие
более одного правила CSS, то есть, когда
происходит конфликт значений этих правил.
Чтобы разрешить такие конфликты вводятся
правила приоритета.
Наиболее низким приоритетом
обладает стиль браузера;
Следующим по значимости является
стиль, заданный пользователем браузера
в его настройках;
И наиболее высоким приоритетом
обладает стиль, заданный непосредственно
автором страницы. И далее, уже в этом авторском
стиле приоритеты расставляются следующим
образом:
Самым низким приоритетом обладают
стили, наследуемые в документе элементом
от своих предков;
Более высоким приоритетом
обладают стили, заданные во внешних таблицах
стилей, подключённых к документу;
Ещё более высоким приоритетом
обладают стили, заданные непосредственно
селекторами всех десяти видов (см. подраздел
«виды селекторов»), содержащимися в контейнерах
style данного документа. Нередки случаи,
когда к какому-нибудь элементу имеют
отношение, задают его вид, несколько таких
селекторов. Такие конфликты между ними
разрешаются с помощью расчёта специфичности
каждого такого селектора и применения
этих селекторов к данному элементу в
порядке убывания их специфичностей. При
расчёте специфичности селектора принимается
во внимание:
количество идентификаторов
(#id) в селекторе — ((1,0,0) за каждый объявленный
идентификатор в селекторе правила CSS);
количество классов (.class), атрибутов ([attr],
[attr="value"]) и псевдоклассов (:pseudo-class) в селекторе — ((0,1,0) за каждый объявленный
класс, атрибут и псевдокласс в селекторе
правила CSS);
количество элементов (h1, input) и псевдоэлементов (::pseudo-element) в селекторе — ((0,0,1) за каждый объявленный
элемент и псевдоэлемент в селекторе правила
CSS).
Принцип расчёта
таков, что, например, (1,0,0) будет иметь
большую специфичность, соответственно —
бо́льший приоритет, чем даже (0,10,0), (0,1,0)
будет иметь большую специфичность, больший
приоритет, чем (0,0,10). Если же рассчитанные
таким образом специфичности окажутся
одинаковыми, то к элементу будет применено
правило, описанное селектором, расположенным
в документе ниже других.
Ещё более высоким приоритетом
обладают стили, объявленные непосредственно
в теге данного элемента посредством атрибута
style этого тега;
И наконец самым высоким приоритетом
обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить
их специфичности по принципам, описанным
выше, и применять эти свойства в порядке
убывания этих их специфичностей.
- Для добавления стилей
на веб-страницу существует
несколько способов, которые различаются
своими возможностями и назначением. Далее
рассмотрены способы подключенияCSS.
3.6. Примеры подключения
таблиц
Таблица связанных
стилей
При использовании
таблицы связанных стилей описание селекторов
и их свойств располагается в отдельном
файле, как правило, с расширением css, а для
связывания документа с этим файлом применяется
тег <LINK>. Данный тег помещается в контейнер
<HEAD>, как показано в примере 1.
Пример 1. Подключение таблицы
связанных стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Стили</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>
Значения параметров
тега <LINK> — rel и type остаются неизменными,
как приведено в данном примере. Параметр
href задает путь к CSS-файлу, он может быть
задан как относительно, так и абсолютно.
Заметьте, что таким образом можно подключать
таблицу стилей, которая находится на другом
сайте.
Содержимое файла mysite.css
подключаемого посредством тега <LINK>
приведено в примере 2.
Пример 2. Файл со стилем