Добро пожаловать!
Здесь вы можете найти ответ на интересующий вас вопрос в отрасли сайтостроения, познакомится ближе с web технологиями и web стандартами.

CSS2

Глава 1. Основные положения и принципы языка CSS2.

Сравните следующие два документа:

<html>
<head>
<title>
Документ, написанный с
использованием CSS
</title>
<style type="text/css">
h3 { color: green;
     font-style: italic}
</style>
</head>
<body>
<h3>Заголовок 3-го уровня</h3>
...текст документа...
...текст документа...
<h3>Заголовок 3-го уровня</h3>
...текст документа...
...текст документа...
</body>
</html>
<html>
<head>
<title>
Документ, написанный без
использования CSS
</title>
</head>
<body>
<font color=green>
<h3>
<i>Заголовок 3-го уровня</i>
</h3>
</font>
...текст документа...
...текст документа...
<font color=green>
<h3>
<i>Заголовок 3-го уровня</i>
</h3>
</font>
...текст документа...
...текст документа...
</body>
</html>

Заметьте, что в примере с помощью возможностей CSS оптимизирован только один HTML-элемент, а как упростился документ.

Умелое использование возможностей CSS2 (обособленно или в сочетании с DHTML) позволяет реализовать оригинальные визуальные эффекты, описание которых произведено ниже.

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

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

Таблицы стилей называются каскадными, потому что при подключении к одному HTML-документу нескольких стилевых таблиц, они, в соответствии со своим приоритетом, выстраиваются в каскад. По этому каскаду и прогоняется документ. При этом правила с более высоким приоритетом переопределяют идентичные правила с более низким приоритетом. Подробнее вопрос каскадирования и наследования будет рассмотрен в разделе "Каскады и наследование".

Способы подключения каскадных таблиц стилей к HTML-документам.

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

  • Внедрение — задание таблицы стилей непосредственно в заголовке самого HTML-документа в качестве содержимого элемента style.
  • Присоединение — таблица стилей находится во внешнем файле и присоединяется к HTML-документу через элемент link. При этом CSS-файл с внешней таблицей стиля всегда сопровождает HTML-файл документа.
  • Импортирование — текст таблицы стилей, находящейся во внешнем файле на сервере, импортируется с помошью CSS-свойства @import внутрь текста HTML-файла.
  • Поэлементное задание стиля — для всех HTML-элементов определен атрибут style и через него, используя синтаксис CSS2, можно задавать (или переопределять) стиль для каждого элемента индивидуально.

Внедрение, как уже упоминалось выше, осуществляется, HTML-элементом заголовка style. Именно в его содержимом и задаётся каскадная таблица стилей. При этом атрибут type элемента style должен быть установлен в значении "text/css". Например:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Примep внедренной таблицы стиля</title>
<style type="text/css">
...список CSS-правил...
...список CSS-правил...
...список CSS-правил...
</style>
</head>
<body>
...текст документа...
...текст документа...
...текст документа...
</body>
</html>

Присоединение внешних таблиц стилей к HTML-документу осуществляется элементом link и имеет следующий вид:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Примep подключения таблицы стиля </title>
<link rel="stylesheet" type="text/css" href="file_of_style.css">
</head>
<body>
...текст документа...
...текст документа...
...текст документа...
</body>
</html>

Здесь file_of_style.css — имя файла, в котором хранится подключаемая таблица стилей. Файл, по сути является текстовым и содержит перечень правил CSS2. Пример текста файла с внешней таблицей стиля:

body { font-family: sans-serif; font-size: 14 pt}
p { background-color: yellow }

В содержимое элемента style можно импортировать таблицу стилей, хранящуюся во внешнем файле на сервере. Это осуществимо благодаря особому свойству @import каскадных таблиц стилей. При этом задание элемента style будет иметь следующий вид:

<style type="text/css ">
@import URL("www.servername/file_of_style.css")
</style>

Значением свойства @import является URL-адрес файла, хранящего в себе импортируемую таблицу стилей. Элемент style вместе с описанием свойства @import может содержать в себе и другие правила. Надо только, чтобы они следовали после задания свойства @import. Например:

<style  type="text/css">
@import   URL("www.servername/file_of_style.css")
body { font-family: sans-serif; font-size: 14 pt }
p { background-color: yellow }
</style>

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

Типы данных и синтаксис CSS2.

Синтаксические правила, присутствующие в CSS2.

В основе всех версий CSS (CSS1, CSS2 и в будущем CSS3) лежит общий для всех набор синтаксических правил. Именно благодаря этому обстоятельству обеспечивается преемственность различных версий CSS. В том случае, если браузер поддерживает ранние версии CSS и не поддерживает новые возможности, то последние будут просто им проигнорированы. Однако правила, которые браузер в состоянии применить, он применит.

Каскадная таблица стилей, написанная на языке CSS любой версии, представляет собой список правил, которые в свою очередь подразделяются на обычные правила и @правила (читается как эй-ти-правило). В тексте таблицы стилей с обоих сторон правила в строке может находиться пустое пространство любых размеров. Начинаются @правила с ключевого символа @, непосредственно за которым следует указание имени правила. Затем @правило включает в себя все, что находится до первого символа точки с запятой или другого правила. Следует помнить, что все правила @import, которые находятся внутри блока определений другого @правила, будут проигнорированы браузером.

Пример недопустимого задания:
@dictionary { @import  URL("dict_style.css") }

К тому же, если таблица стилей содержит еще другие правила, кроме правил @import, то эти правила должны располагаться ниже по тексту правил @import.

Пример неправильного задания:
p { background-color: green }
@import  URL ("file_of_style.css")
Пример правильного задания:
@import URL ("file_of_style. css")
p { background-color: green }

Все обычные правила каскадных таблиц стилей состоят из двух частей: селектора и блока определений и имеют следующий вид:

селектор { блок определений }

Селектором служит название HTML-элемента, или комбинация названий HTML-элементов, для которых и задается правило форматирования. Блок определений начинается с левой фигурной скобки "{" и заканчивается правой фигурной скобкой "}". Все, что находится перед левой фигурной скобкой, считается селектором. Например:

h1, h2 { color: blue; font family: Times New Roman }

Между фигурными скобками блока определений располагаются объявления. Они имеют следующий общий вид:

название свойства: значение свойства

Причем между "названием", двоеточием и "значением" может находиться любое количество пробелов.

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

p { font-size: 14 pt }
p { font-family: Arial }
p { font-color: yellow }
p { background-color: blue }
эквивалентен одному такому правилу
p { font-size: 14 pt;
    font-family: Arial;
    font-color: yellow;
    background-color: blue }

Объявление может не определять никакого свойства. При этом оно называется пустым. Например,

img { }

Каскадные таблицы стилей CSS2 не учитывают регистр. Это значит, что названия правил, селекторов и их значения можно указывать как прописными, так и строчными буквами. Чувствительными к регистру могут оказаться объекты, присутствующие в таблице стилей, но не являющиеся объектами языка CSS. Например, по-прежнему учитывается регистр атрибутов id и class у HTML-элементов.

При написании текста таблиц стилей допустимо использование комментариев. Они должны начинаться символом "/*" и заканчиваться символом "*/". Например:

b { font-color: blue;   /*  комментарии   */
    font-size: 14 pt   /*   комментарии   */ }

В CSS допустимо также использование комментариев "<!--" и "-->", установленных в HTML. При корретной поддержке CSS-таблиц стилей браузером группы символов "<!-- " " -->" будут проигнорированы.

Использовать комментарии "<!-- " " -->" имеет смысл только тогда, когда требуется скрыть содержимое таблицы стилей от браузеров, работающих с HTML 3.2 и более ранних версий, где эти таблицы не поддерживаются. Иначе текст таблицы будет отображаться в окне браузера как содержимое документа.

Обработка синтаксических ошибок.

При синтаксической проверке браузером CSS-таблицы стилей могут возникать следующие ошибки и соответствующие им действия браузера:

  • Если указано имя несуществующего свойства (или сделана ошибка при написании существующего), то браузером будет проигнорировано объявление, его содержащее. Например, правило
    b { font-color: blue;
        thick: 15;          /* thick - несуществующее свойство */
        font-size: 14 pt}
            
    будет воспринято браузером как:
    b { font-color: blue; font-size: 14 pt }
            
  • Если для определенного в CSS2 свойства указано недопустимое значение, то также будет проигнорировано содержащее его объявление. Например, фрагмент таблицы стилей:
    p { font-color: black }
    p { background-color: "lightgrey" } /* некорректное задание, т.к. ключевое
                                            слово заключено в кавычки         */
            
    после синтаксической проверки примет следующий вид:
    p { font-color: black }
    p { }
            
  • Если неверно задано имя @правила, то игнорируется все, что относится к этому правилу. Например, фрагмент CSS-таблицы:
    @superstyle {
    p { font-color: black;
        background-color: lightgrey}
    h3 { font-color: yellow }
    }
    body { font-family: Arial }
            
    будет воспринят браузером просто как:
    body { font-family: Arial }
            
    так как @правило @superstyle в CSS2 не определено.

Допустимые значения величин, используемых в CSS2.

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

Числа.

В CSS2 могут использоваться целые и вещественные числа, представленные в десятичной форме исчисления. Допустимые интервалы значений индивидуальны для каждого свойства.

Единицы измерения длины.

В CSS2 допустимо использование двух типов задания длины: относительное задание и абсолютное. Относительное задание длины подразумевает ее задание относительно чего-то. К относительным единицам относятся:

  • em — 1em равен используемому значению свойства font-size элемента, к которому данный em-размер применяется;
  • ех — 1ex равен размеру высоты строчной буквы х для используемого шрифта;
  • рх — указывает размер в пикселах и, соответственно, зависит от разрешения экрана.

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

  • cm — сантиметр;
  • mm — миллиметр;
  • in — дюйм (1 дюйм равен 2,54 см);
  • pt — точка (point). В CSS2 lpt = 1/72 дюйма;
  • рс — пика. В CSS2 1пика = 12 точкам.

Задание URL в контексте CSS2.

Указание URL-адреса в CSS2 осуществляется в следующем формате:

url ("www.nameserver.com")

Например, указать адрес фонового изображения можно следующим способом:

body { background: url ("www.myserver.ru/myimage.gif")}

При этом допустимо использование как абсолютных, так и относительных URL-адресов.

Указание цвета.

Для задания цвета отображаемого содержимого HTML-элемента могут применяться следующие возможности:

  • указание цвета с помощью ключевых слов. Наример:
    h3 { color: blue }
            
  • указание цвета с помощью шестнадцатиричного задания его RGB-кода. Например:
    h3 { color: #ffffff }
            
  • указание цвета с помощью десятиричного задания его RGB-кода. При этом используются целые числа в диапазоне от 0 до 255. Например:
    h3 { color: rgb ( 0, 255, 0 ) }   /* зеленым цветом */
            
  • указание цвета с помощью процентного задания насыщенности каждого из цветов в RGB-коде. При этом используются вещественные числа в интервале от 0% до 100%. Например:
    h3 { color: rgb ( 0%, 100%, 0% ) }
            

Углы.

Углы в каскадных таблицах стилей, написанных на языке CSS2, могут быть заданы в следующих единицах измерения:

  • deg — градусы;
  • rad — радианы;
  • grad — грады.

Значения углов, могут быть отрицательными и задаваться как целыми, так и вещественными числами.

Время.

Задание времени (не путать с датой) может осуществляться либо в секундах (s), либо в миллисекундах (ms).

Понятие о селекторе. Работа с селекторами.

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

h1 { font-color: green }

Простые селекторы употребляются наиболее часто. Однако язык CSS2 позволяет использовать более широкие возможности для создания таблиц стилей. Например, можно описать свойства HTML-элемента, который является дочерним по отношению к другому HTML-элементу. Также можно использовать селектор, правила которого будут применяться только при определенных действиях пользователя. Существуют также специальные селекторы, которые позволяют обращаться к различным группам HTML-элементов, например, ко всем элементам с определенным значением атрибута id.

Универсальный селектор.

Универсальный селектор применяет установки, указанные в его блоке определений, ко всем HTML-элементам. Обозначается универсальный селектор символом * (звездочка). Но в том случае, если этот селектор используется в сочетании с другим (или другими) селекторами, то символ * может быть опущен. Например, записи:
*.myclass и .myclass — эквивалентны;
*#idname и #idname — также эквивалентны.

Пример.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример простого и универсального селекторов
</title>
<style type ="text/css">
* { color=olive }      /* правило с использованием универсального селектора */
h1 { color=red }             /* правило с использованием простого селектора */
*.myclass { font-color: blue }   /* использование универсального селектора в
                                    сочетании с селектором классов */
</style>
<body>
...текст документа...
...текст документа...
...текст документа...
</body>
</html>

Селектор классов.

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

элемент.класс { определение; определение; определение }

Например, чтобы правило применялось ко всем элементам, принадлежащим к классу superclass, используется следующая запись:

.superclass { определение }

Или другой пример:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример селектора классов
</title>
<style type="text/css">
h3 { color: green }
h3.titlepage { color: red }
h3.indexpage { color: blue }
</style>
</head>
<body>
...текст документа...
...текст документа...
...текст документа...
</body>
</html>

При таком задании все заголовки h3, принадлежащие к классу titlepage (class=titlepage), будут отображаться красным цветом. Принадлежащие к классу indexpage (class=indexpage) — синим цветом. Все остальные h3-заголовки будут иметь зеленый цвет. Указание класса относится только к одному, слева расположенному селектору. Это значит, что правило

pre, p.chapter1 { color: red }
будет применено ко всем элементам pre и к элементам p класса chapter1, а не к элементам pre и p класса chapter1.

Селектор id-имён.

Селектор id-имен применяется аналогично селектору классов. Отличие заключается в том, что селектор id-имен фильтрует HTML-элементы не по классу ( атрибуту class), а по id-именам (атрибуту id). Синтаксис селектора id-имен имеет следующий вид:

элемент#id_имя { определение; определение; определение }

Например, правило

p#famous { font-family: Heretz }
будет применено только к тем HTML-элементам <p>, у которых для атрибута id указано значение "famous". Чтобы обратиться ко всем HTML-элементам, имеющим атрибут id = "famous", достаточно следующей записи:
#famous { определение;
          определение;
          определение }

В одном правиле может содержаться несколько селекторов. Допустим, разработчику требуется применить одно и тоже правило к нескольким разным HTML-элементам, не объединенным в классы и имеющим разные id-имена. Можно, конечно, написать отдельное правило для каждого такого элемента, но более эффективным и правильным будет перечислить, через запятую селекторы HTML-элементов в списке селекторов одного правила. Например:

h1, p, q { color: lightgrey;
           font-family: Arial }
.my-class, b { color: black }

Селекторы контекстного окружения.

Возможности CSS2 позволяют учитывать расположение HTML-элементов в иерархическом дереве документа при задании их визуальных характеристик, а также учитывать их контекстное окружение.

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

<html>
<head>
<base href="www.hrt.hd.net">
<title> Название документа </title>
<meta http-equiv=content-type content="text/html" charset="iso-8859-l">
</head>
<body>
...текст документа...
<p> ...текст абзаца... </p>
<ul>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемеит списка</li>
</ul>
...текст документа...
</body>
</html>
Рис. . Иерархическое дерево HTML-документа.

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

<pre>
   отформатированный текст
<cite>цитата</cite>
   отформатированный текст
</pre>

Для этого достаточно использовать следующее правило:

pre cite { color: blue }

В рамках одного CSS-правила допустим многократный переход родитель-потомок. Например, правило

div p em { color: yellow; font-family: italic }
будет применено только к тем элементам em, которые являются потомками элемента <p>, который, в свою очередь, должен являться потомком элемента div. Чтобы обратиться ко всем элементам em, являющимися потомками второго уровня элемента div, используется запись div * em. При этом символ * должен быть с обеих сторон выделен пробелами. Таким образом, правило, использующее иерархию HTML-элементов документа, имеет следующий общий вид:

селектор селектор ... селектор { определение; определение; определение }

CSS поддерживает использование селекторов детей, т. е. селекторов тех элементов, которые являются детьми другого элемента в дереве документа. Селекторы детей образуются путем соединения нескольких селекторов символом >. Следующее правило будет применяться ко всем элементам <p>, которые являются детьми элемента <div> (иными словами, оно применимо к тем и только тем элементам <p>, которые находятся внутри элемента <div>, и никакого промежуточного элемента между div и p нет):

div > p { text-indent: 3em }

В общем случае синтаксис селектора детей имеет следующий вид:

селектор > селектор > ... > селектор { определение; определение; определение }

Обратите внимание, что пробелы вокруг символов > являются необязательными.

Замечание:

Браузер MS Internet Explorer не поддерживает селектор детей.

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

h3 + ul { объявление;
          объявление;
          объявление }

Элементы h3 и ul называются сестринскими элементами. Символ + с обеих сторон выделяется пробелами. Таким образом, правило, учитывающее предыдущие HTML-элементы для описываемого HTML-элемента, имеет следующий общий вид:

селектор + селектор + ... + селектор { определение; определение; определение }

Использование псевдоэлементов и псевдоклассов.

В рамках спецификации CSS2 определено некоторое количество псевдоэлементов и псевдоклассов, которые представляют собой элементы и классы, не входящие в иерархическое дерево HTML-документа и не образующие в нем структурных единиц. Иными словами, они являются специфичными элементами и классами языка CSS2 и используются им только в своих целях для задания специальных визуальных эффектов.

Псевдокласс :first-child соответствует элементу, который является первым ребенком данного элемента. В следующем примере субъектами селектора будут те элементы <p>, которые являются первым ребенком элемента <div>:

div > p:first-child { text-indent: 3em }

В результате первый элемент <p> внутри <div> в следующем фрагменте будет выводиться с отступом в начале текста

<p>Последний абзац перед примечанием.</p>
<div class="note">
<p>Первый абзац внутри примечания.</p>
<p>Второй абзац внутри примечания.</p>
</div>

а такой же элемент <p> в этом фрагменте отображается без отступа, т. к. не является первым ребенком <div>:

<p>Последний абзац перед примечанием.</p>
<div class="note">
<h3>Примечание.</h3>
<p>Первый абзац внутри примечания.</p>
<p>Второй абзац внутри примечания.</p>
</div>

Обозреватели часто по-разному отображают уже посещенные и еще не посещенные гиперссылки. CSS обеспечивает возможность задания стилей их отображения через следующие псевдоклассы:

  • :visited посещенных ссылок;
  • :link не посещенных ссылок;
  • :active активных ссылок;
  • :hover ссылок, над видимым содержимым которых находится курсор мыши.

Например, чтобы задать красный цвет для ссылок, уже просмотренных пользователем, используется следующее CSS-правило:

a : visited  { color: red }

Полное цветовое описание возможных состояний элемента a может иметь следующий вид:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Пример задания оформления ссылок средствами CSS
</title>
<style type ="text/css">
a : visited { color: lightgrey }
a : link    { color: blue }
a : active  { color: yellow }
a : hover   { color: red }
</style>
</head>
<body>
...текст документа...
...текст документа...
...текст документа...
</body>
</html>

В данном случае непосредственно после открытия документа все его ссылки будут отображаться синим цветом. При наведения на ссылку курсора цвет ее изменится на красный. Сразу после щелчка по выбранной ссылке и до того момента, пока не произойдет загрузка целевого документа, цвет ссылки будет желтым. Затем, при откате из открывшегося документа по клавише "Назад" исходная ссылка будет восприниматься браузером как посещенная и отображаться серым цветом.

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

<style type="text/css">
p:first-line { text-transform: uppercase }
</style>
<p>
Это длинный абзац, который будет разбит обозревателем на
несколько строк. При этом первая строка абзаца будет
отображаться прописными буквами, как это задано в таблице
стилей.
</p>
будет отображаться так:
ЭТО ДЛИННЫЙ АБЗАЦ, КОТОРЫЙ БУДЕТ РАЗБИТ ОБОЗРЕВАТЕЛЕМ НА НЕСКОЛЬКО
строк. При этом первая строка абзаца будет отображаться прописными
буквами, как это задано в таблице стилей.

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

<style>
P:first-letter { font-size: 200%; font-weight: bold }
</style>
<p>
Это абзац, первая буква которого
будет выделена обозревателем.
</p>
будет отображаться так:
Это абзац, первая буква которого будет выделена обозревателем.

Правила каскадирования.

Обработка HTML-файла, содержащего каскадную таблицу стилей, имеет следующие этапы:

  1. Синтаксический анализ документа и обработка синтаксических ошибок.
  2. Построение иерархического дерева HTML-элементов, образующих данный документ.
  3. Применение таблицы стилей в соответствии с правилом установки каскадирования и иерархическим деревом документа.

Иерархическое дерево документа используется для передачи установок родительского элемента элементам-потомкам, то есть благодаря ему реализуется процесс наследования.

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

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

По умолчанию к браузеру никаких пользовательских таблиц не подключено, но это всегда можно сделать. Для этого написанная Вами таблица стилей помещается в .css-файл. Затем в браузере в разделе "Сервис→Свойства обозревателя→Оформление" выставляем флажок "Оформлять, используя стиль пользователя" и далее указываем название файла с таблицей стиля (рис. ).

Рис. . Окно подключения пользовательских таблиц стилей в браузере Internet Explorer.

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

Пользовательские таблицы, подключенные к браузеру, перекрываются любыми авторскими таблицами стиля, содержащихся в коде самого HTML-документа, внедренными в него с помощью правила @import или подключенных к нему с помощью элементов link.

Однако можно сделать так, чтобы пользовательские правила перекрывали авторские. Для этого нужно у пользовательских правил выставить правило-флаг !important. Например:

body { background: lightgrey !important;
       font-color: gray !important }

Правило-флаг !important может выставить и автор HTML-документа, но правило !important пользователя имеет приоритет над правилом !important автора. При задании и подключении нескольких таблиц стилей каждая последующая заданная (или подключенная) таблица имеет приоритет над предыдущей. Говоря точнее, каждый последующий элемент style или link имеет приоритет над предыдущим.

В этом отношении между таблицами, задаваемыми элементами style и link, различий не делается. Т.е., если задание подключенной таблицы (элемент link) следует после внедренной таблицы (элемент style), то подключенная имеет приоритет над внедренной. Верно также и обратное.

В содержимое одного элемента style с помощью правила @import может быть импортировано несколько таблиц стилей, после чего могут следовать другие правила, задаваемые непосредственно в этом элементе style. Внутри одного элемента style все импортированные установки имеют меньший приоритет по отношению к установкам, заданным в нем непосредственно. Надо помнить, что все правила @import задаются в таблице стилей до определения остальных правил. Если в элемент style импортировано несколько CSS-таблиц, то каждая последующая импортируемая таблица обладает большим приоритетом над предыдущей.

Кроме всего вышеперечисленного, приоритет какого-либо правила по сравнению с другими правилами, применяемыми к одному и тому же элементу, определяется, исходя из специфичности правила. Например, к элементу

<h3  class="vas" id="ret"> Заголовок </h3>
могут быть применены следующие правила:
h3 { color: gray }
h3.vas { color: red }
h3#ret { color: green }
h3, h2, h1 { color: blue }

Правило h3{color:gray} относится только к заголовкам третьего уровня. Правило h3.vas{color:red} применяется только к элементам h3, принадлежащим к классу "vas", то есть является более специфичным по сравнению с предыдущим правилом.

Самым специфичным является правило h3#ret{color:green}, которое применяется к конкретному элементу элементу h3 с id-именем ret. Все эти правила могут быть применены к элементу <h3 class="vas" id="ret">Заголовок</h3>. Но если все они заданы вместе, то к этому элементу будет применено самое специфичное правило h3#ret{color:green}, независимо от того, в каком порядке эти правила заданы.

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

  • подсчитывается число атрибутов id в данном правиле (число а);
  • подсчитывается число других атрибутов и псевдоклассов в данном правиле (число b);
  • подсчитывается число названий HTML-элементрв в данном правиле (число с);

Псевдоэлементы и псевдоклассы считаются как обычные элементы и классы.

Далее, из чисел a, b и с составляется число abc, которое и показывает специфичность правила. Например:

* { ..... } а=0, b=0, с=0 специфичность = 0
h3 { ..... } a=0, b=0, c=1 специфичность = 1
h3, h2 { ..... } a=0, b=0, c=2 специфичность = 2
h3, p + ul { ..... } a=0, b=0, c=3 специфичность = 3
h3.var { ..... } a=0, b=1, c=1 специфичность = 11
h3.var, pre { ..... } a=0, b=1, c=2 специфичность = 12
h3.var, .yty { ..... } a=0, b=2, c=1 специфичность = 21
h3#ret { ... } a=1, b=0, c=1 специфичность = 101
p#kil, ul li, *.tgt { ... } a=1, b=1, c=3 специфичность = 113