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

Способы применения CSS

Таблицы стилей могут встречаться на HTML странице, как атрибут тега, они могут располагаться в голове HTML документа в контейнере <STYLE>, а также таблицы стилей могут быть присоединены к документу с помощью тега <LINK>. Кроме того, внешние таблицы стилей могут быть присоединены из таблицы стилей в контейнере <STYLE> с помощью директивы @import url();.

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

  1. Стили, используемые браузером по умолчанию.
  2. Стили, хранящиеся во внешней таблице.
  3. Стили, хранящиеся во внутренней таблице стилей в контейнере <STYLE>.
  4. Стили, встроенные в HTML теги (элементы).

В этом же порядке стили переопределяют друг друга. То есть, если новое описание какого нибудь стиля совпадает с предыдущим, то оно переопределяет предыдущее определение.

Синтаксис

селектор {свойство:значение}

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

Селектором может выступать:

  1. HTML элемент. Такой селектор называется родовым (generic).
  2. Каскад HTML элементов. То есть, перечисляется через пробел порядок вложенности элементов разметки. Стиль переопределяется для последнего в перечислении элемента. Такой селектор называется контекстуальным (contextual).
  3. Селектор класса. (Произвольное имя класса с лидирующей точкой)
  4. Селектор идентификатора. (Произвольное имя класса с лидирующей решеткой)
  5. Селектор дочерних элементов. Указывают родительский элемент знак > и дочерний элемент. Например, p>i или #topmenu>.menu_item.
  6. Универсальный селектор. Стили применяются ко всем HTML элементам на странице. * {padding:0;}
  7. Селектор братских элементов. Стиль задают для элемента, у которого соседний элемент слева совпадает с указанным в селекторе перед знаком +.  b +  i {color:red;}
  8. Селектор атрибута задает стиль HTML элементов у которых задан соответствующий атрибут или этот атрибут имеет определенное значение. img [title] {border:blue} или img [title="dog"] {border:yellow} или img [title~="cat"] {border:green}. В последнем примере стиль будет применен к HTML элементу img атрибут title которого содержит слово cat.
  9. Селектор псевдокласса задает стиль HTML элемента в определенном состоянии
    • active – стиль применяется к элементу, активированному пользователем;
    • link – стиль применяется к непосещенным ссылкам;
    • focus – стиль применяется к элементу при получении им фокуса;
    • hover – стиль активизируется, когда курсор находится в пределах элемента;
    • visited – стиль применяется к посещенным гиперссылкам;
  10. Селектор псевдоэлемента
    • after – позволяет добавить контент после указанного элемента;
    • before – позволяет добавить контент до указанного элемента;
    • first-letter – задает стиль для первого символа в тексте элемента;
    • first-line – задает стиль первой строки текста элемента.
    • first-child – стиль применяется к первому дочернему элементу селектора.

Имя класса или идентификатора должно начинаться с буквы. HTML элементы стили которых переопределяют с помощью селектора класса должны содержать атрибут class="ИмяКласса", а элементы стили которых переопределяют с помощью селектора - идентификатора должны содержать атрибут id="ИмяИдентификатора".

Пример.

Открыть пример example001.htm.

Файл внешней таблицы стилей, в этом примере, example001.css содержит следующие строки кода:

P {font-family:Arial, sans-serif; color:blue;}

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

<LINK type="text/css" rel="stylesheet" href="/example001.css">
<STYLE>
    P {color:red;}
    P I {color:#19AD39;font-style:normal;font-weight:bold;}
    .newgold {color:#DFAF00;}
    #newP {font-weight:bold;}
</STYLE>

HTML код примера выглядит так:

<P>
Так выглядит шрифт, стили которого определены во внешней таблице стилей как P {font-family:Arial, sans-serif;color:blue;}, Но буквы голубого цвета в этом тексте вы не увидите, так как цвет текста переопределен во внутренней таблице стилей P {color:red;}.
<I>
Этот тест вложен в элемент I, который, в свою очередь, является дочерним элементом тега P. Стиль для него определен во внутренней таблице P I {color:#19AD39;font-style:normal;font-weight:bold;}
</I></P>
<DIV><I>
A этот курсив не является дочерним элементом тега P.
</I></DIV>
<P class=newgold>
Этот текст находится в контейнере P class=newgold. Его стиль .newgold {color:#DFAF00;}
</P>
<P id=newP>
Этот текст находится в контейнере P id=newP. Его стиль #newP {font-weight:bold;} плюс ранее определенные стили.
</P>
<DIV>
Можно определить стиль и в самом элементе разметки SPAN style="color:white;background-color:black;"
<SPAN style="color:white;background-color:black;">
Как в этом месте.
</SPAN>
Действие стиля отменяется за пределами контейнера, его использующего.
</DIV>