Синтаксис
Формально стиль отображения элементов разметки задается ссылкой в элементе разметки на селектор стиля. Синтаксис описания стилей в общем виде представляется следующим образом:
selector[, selector[, ...]]{attribute:value;[atribute:value;...]}
или
selector selector [selector ...] {attribute:value;[atribute:value;...]}
Первый вариант перечисляет селекторы, для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль. Напомним, что речь в данном случае идет об описаниях стилей в нотации "text/css". Описания стилей размещаются либо внутри элемента STYLE, либо во внешнем файле.
В качестве селектора можно использовать: имя элемента разметки, имя класса и идентификатор объекта на HTML-странице.
Атрибут (attribute) определяет свойство отображаемого элемента, например, левый отступ параграфа (margin-left), а значение (value) - значение этого атрибута, например, 10 типографских пунктов (10pt).
Селектор - имя элемента разметки
Когда автор Web-узла хочет определить общий стиль всех страниц, то он просто прописывает стили для всех элементов HTML-разметки, которые будут на страницах использоваться. Это дает возможность скомпоновать страницы из логических элементов, а стиль отображения этих элементов описать во внешнем файле.
Такой способ конструирования сайта позволяет автору изменять внешний вид всех страниц путем внесения изменений в файл описания стилей, а не в файлы HTML-страниц.
Внешний файл при этом может выглядеть следующим образом:
i, em {color:#003366,font-style:normal}
a i {font-style:normal;font-weight:bold;text-decoration:line-through}
Первая строка этого описания перечисляет селекторы-элементы, которые будут отображаться одинаково:
<i>>Это курсив</i> и это тоже <em>курсив</em>
Это курсив и это тоже курсив
Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива:
<a name=empty><i>kuku</i></a>
kuku
В данном случае переопределение состоит в том, что текст отображается внутри гипертестовой ссылки перечеркнутым и "жирно".
[ начало страницы ]
Селектор - имя класса
Имя класса не является каким-либо стандартным именем элемента HTML-разметки. Имя класса определяет описание класса элементов разметки, которые будут отображаться одинаково. Для того, чтобы отнести элемент разметки к определенному классу, нужно воспользоваться атрибутом class этого элемента разметки:
<style>
.kuku {color:white;background-color:darkred;}
</style>
...
<p class=kuku>
Этот параграф мы отобразим белым цветом по темно-красному фону
</p>
...
<p>
Эту <a class=kuku>гипертекстовую ссылку</a> мы отобразим белым цветом по темно-красному фону.
</p>
Этот параграф мы отобразим белым цветом по темно-красному фону
Эту гипертекстовую ссылку мы отобразим белым цветом по темно-красному фону.
Как видно из этого примера, в любом элементе разметки можно сослаться на описание класса отображения. При этом совершенно не обязательно, чтобы элементы разметки были однотипными. В примере к одному классу отнесены и параграф и гипертекстовая ссылка в другом параграфе.
Лидирующую точку в имени класса можно опускать. Она задается из соображений сохранения общности описания. Так, например, можно определить классы отображения однотипных элементов разметки:
a.menu {color:red;background-color:white;text-decoration:normal;}
a.paragraph {color:navy;text-decoration:underline;}
В данном примере класс гипертекстовых ссылок menu имеет одно описание стиля, а класс гипертекстовых ссылок paragraph совершенно другое. При этом каждый из этих классов нельзя применить к другим элементам разметки, например, параграфу или списку. Если не задано имени элемента разметки, то это обозначает, что класс можно отнести к любому элементу разметки - корневой класс описания стилей. Это очень похоже на обозначение имени корневого домена в системе доменных имен. Собственно ничего удивительного здесь нет, т.к. система классов объектов на HTML-странице представляет из себя дерево. Элементы разметки - это узлы дерева.
[ начало страницы ]
Селектор - идентификатор объекта.
Объектная модель документа (Document Object Model) описывает документ как дерево объектов. Объектами являются: сам документ, разделы(элемент DIV), картинки, параграфы, приложения и т.п.. Каждый из объектов можно поименовать и обращаться к нему по имени. Данная возможность используется при программировании страниц на стороне клиента, например, на JavaScript.
Применение идентификатора объекта оправдано еще и в случае модификации атрибута описания стиля для данного объекта в его CSS-описании. Вместо создания двух описаний классов, которые различаются только одним из параметров, можно создать одно описание и описание идентификатора объекта. Описание стиля для объекта задается строкой, в которой селектор представляет собой имя этого объекта с лидирующим символом "#":
a.mainlink {color:darkred;text-decoration:underline;font-style:italic;}
#blue {color:#003366}
...
<a class=mainlink>основная гипертекстовая ссылка</a>
<a class=mainlink id=blue>модифицированная гипертекстовая ссылка</a>
...
основная гипертекстовая ссылка
модифицированная гипертекстовая ссылка
Следует оговориться, что интерпретации идентификаторов объектов в IE и NN разные. Дело в том, что существует еще атрибут name у элемента разметки. NN предпочитает иметь дело именно с этим атрибутом при идентификации объекта, а IE с атрибутом id.
Различия в интерпретации ID в браузерах при декларативном использовании CSS не очень страшны. Все становится гораздо хуже, когда автор решится программировать стили, т.е. изменять значения атрибутов описателей стилей. В этом случае разница объектных моделей документов в NN и IE проявится в полной мере. Фактически, придется разрабатывать совершенно разные страницы для каждого из браузеров.
далее...
|
