=> Главная База Знаний HTML 10.3. Записи таблицы стилей


10.3. Записи таблицы стилей

10.3. Записи таблицы стилей

Таблицы стилей представляют собой множество записей, называемых правилами. Каждое правило CSS состоит из двух частей: селектора и объявления стиля. Селектор несет в себе информацию, достаточную для нахождения в документе элементов, к которым применяется стиль. Объявление стиля представляет собой набор пар свойство/значение, заключенный в фигурные скобки {}. Синтаксис правила CSS следующий:

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

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

То, что обозначено в приведенном примере как селектор, может быть названием HTML‑элемента (например, P, STRONG, H1), идентификатором фрагмента документа (#par1, #tabl1), именем стилевого класса (.par1, P.par1) или более сложной конструкцией, описанной ниже.

Свойство представляет один из предопределенных строковых идентификаторов, обозначающих тот или иной параметр, поддерживаемый для HTML‑элемента (например, color, backgroundcolor, font-family). Тип присваиваемого значения зависит от конкретного параметра.

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

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

Свойства CSS, которые можно задать для различных элементов, существенно отличаются. Часть их мы рассмотрим на примерах в тексте книги. Более полный перечень свойств с их описаниями вы сможете найти в приложении 2.

Правила отображения HTML-элементов

Рассмотрим самое простое применение CSS – задание стиля текста (или прочего содержимого), содержащегося внутри определенных HTML‑элементов. Для этого нужно указать в качестве селектора название HTML‑элемента (или нескольких HTML‑элементов), например:

H1 {color: red; font-family: arial}H2, H3 {color: blue; font-family: courier}P {font-style: italic}

Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, заголовки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML‑элемента P будет отображаться курсивом.

Приведенный выше текст уже является таблицей стилей. Его можно поместить в отдельный CSS‑файл. Тогда получится внешняя таблица стилей. Можно поместить определение CSS внутрь HTML‑документа так, как это показано в примере 10.1.

Пример 10.1. Стили для HTML-элементовИспользование стилей HTML-элементов

Заголовок первого уровня

Текст абзаца

Заголовок второго уровня

Текст абзаца

Заголовок третьего уровня

Текст абзаца

На рис. 10.1 приведено подтверждение сказанных выше слов о том, как браузер покажет текст документа с рассмотренной таблицей стилей.

Рис. 10.1. Задание стилей для HTML-элементов

Использование стилевых классов

Второй способ применения таблиц стилей основан на использовании стилевых классов. Рассмотрим это на примере:

H1.arial {color: red; font-family: arial}H2.newroman {color: blue; font-family: newroman}P.italic {font-style: italic}.bold {font-weight: bold}

Здесь созданные в таблице стилей селекторы указывают на четыре стилевых класса с именами arial, newroman, italic, bold. Перые три правила могут использоваться только для HTML‑элементов H1, H2 и P, для которых заданы стилевые классы arial, newroman и italic соответственно. Четвертый селектор позволяет применить правило к любому элементу, стилевой класс которого указан как bold.

Назначение стилевого класса HTML‑элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.

Рассмотрим пример использования стилевых классов (пример 10.2).

Пример 10.2. Использование стилевых классовИспользование стилевых классов

Заголовок первого уровня

Текст абзаца

Измененный заголовок первого уровня

Заголовок второго уровня

Курсивный текст абзаца

Измененный заголовок второго уровня

Полужирный текст абзаца

Страница, формируемая браузером Internet Explorer при обработке приведенного примера, показана на рис. 10.2.

Рис. 10.2. Использование стилевых классов

Как можно увидеть, для использования стилевых классов нужно немного больше поработать над содержимым HTML‑документа, назначая нужным элементам значения атрибутов class. При этом доступно гораздо больше возможностей по оформлению документа: например, может быть недостаточно одного и того же цвета абзацев, одинакового выравнивания или шрифта текста. Есть еще множество случаев, когда удобнее создать некоторое количество стилевых классов, а не задавать CSS‑свойства одинаковых HTML‑элементов, как это сделано в примере 10.1.

Задание отображения единичных элементов документа

Стили можно определять не только в таблице стилей. При помощи атрибута style можно создавать так называемые «инлайн‑стили». Атрибут style поддерживается для тех же HTML‑элементов, что и атрибут class. Для создания «инлайн‑стиля» атрибуту style присваивается значение, которое обычно записывается в скобках {} в строке таблицы стилей (то есть объявление правила). Ниже приведен переделанный пример 10.2, в котором как раз и реализовано определение стилей в атрибуте style (обратите внимание, что при этом отпала необходимость определения самой таблицы стилей) (пример 10.3).

Пример 10.3. Использование атрибута style

Заголовок первого уровня

Текст абзаца

Измененный заголовок первого уровня

Заголовок второго уровня

Курсивный текст абзаца

Измененный заголовок второго уровня

Полужирный текст абзаца

Рассмотрим еще один способ применения правил отображения, задаваемых с помощью стилевых таблиц. В стилевой таблице можно задать CSS‑свойства HTML‑элемента, имеющего определенное значение атрибута id (атрибут рассматривался в гл. 6). Как это делается, лучше сразу рассмотреть на примере 10.4.

Пример 10.4. Использование атрибута id в CSSИспользование id в CSS

Рисунки без применения стилей

А к этим рисунками применен стиль (изменение размера)

В данном случае при помощи CSS задаются параметры отображения двух рисунков. Как это реализуется браузером, можно увидеть на рис. 10.3.

Рис. 10.3. Задание стилей отдельных элементов

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

Контекстные селекторы

Помимо селекторов, связанных с определенными HTML‑элементами, стилевыми классами или идентификаторами элементов, можно создавать и более сложные селекторы. Они подходят для случаев, когда стиль должен применяться только к элементам документа, находящимся внутри какого‑то другого элемента. Например, средствами CSS можно особым образом оформить элементы LI, находящиеся внутри элемента LO, принадлежащего к различным стилевым классам (пример 10.5).

Пример 10.5. Применение сложных селекторовСложные селекторы

Список, оформленный обычным шрифтом

  1. Элемент списка
  2. Элемент списка

Список, оформленным курсивным шрифтом

  1. Элемент списка
  2. Элемент списка

Раскрашенный список

  1. Элемент списка
  2. Элемент списка

Чтобы применить стиль к каждому отдельному элементу списков, не потребовалось назначать никакие стилевые классы для самих элементов списков. Потребовалось лишь отнести сами списки (элементы OL) к нужным стилевым классам, что избавило нас от лишних усилий при составлении HTML‑документа.

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

Кроме того, что показано в примере, можно создать и другие виды контекстных селекторов, например:

P STRONG {color: red} /*применяется к элементам STRONG внутри P*/.par .colored {color: red} /*применяется к элементам со стилевым классом"colored", находящимся внутри элементов со стилевым классом "par"*/

Комментарии в таблице стилей

Примечательно, что даже в таблицы стилей можно помещать комментарии. Естественно, это весьма полезно при определении больших и сложных таблиц. При этом синтаксис комментария CSS отличается от синтаксиса комментария HTML. Комментарий в CSS задается в стиле языков программирования C или Java, то есть так:

/* Это однострочный комментарий *//* А здесь записанмногострочныйкомментарий */