Оформление веб-страниц с использованием каскадных листов стилей 121
Синтаксис конструкций CSS
и связь листа стилей с веб-страницей
В основе технологии CSS лежит особый язык, не имеющий ничего общего с
HTML. Тем не менее язык этот достаточно прост и понятен.
Лист стилей — это набор правил, каждое из которых имеет следующий
формат:
селектор {свойство__1: значение_1; свойство_2: значение_2; … свойство_Ы:
значение_Ы}
Правила можно записывать в одну строку, но в целях удобочитаемости кода
поначалу лучше всего использовать запись в столбик:
селектор {
свойство_1: значение_1;
свойство_2: значение_2 ;
свойство_М: значение_Ы;
}
Точка с запятой, следующая за последней парой «свойство — значение»,
необязательна, но на первых порах ее лучше не пропускать, чтобы выработать
привычку не забывать ставить точку с запятой после каждой такой пары.
Селекторы, свойства и значения
Селектор определяет, к каким элементам HTML-документа будет применено
данное правило. В самом простейшем случае селекторы совпадают с
именами тегов. Так, например, селектор р позволяет определить правило,
распространяющееся на все абзацы (элементы …р>) того документа (или
множества документов), к которому относится лист стилей.
Бывают, разумеется, и более сложные селекторы. Вот некоторые примеры
правил с пояснениями, для каких элементов они действительны:
П * {…} — распространяется на все без исключения элементы;
П hi, h2, p {…} — применяется к заголовкам первого и второго уровней,
а также к абзацам;
Пра (…) — относится к гипертекстовым ссылкам, расположенным
внутри абзацев.
Еще бывают селекторы атрибутов, уникальных элементов, классов,
псевдоэлементов, псевдоклассов и т. п., но их мы пока, пожалуй, не будем трогать.
С более сложными селекторами мы будем знакомиться по мере
необходимости на практических примерах.
122
Часть I. Технологические основы
Во многих случаях селекторы строятся на базе элементарных «кирпичиков»,
образуя в результате довольно хитроумные сочетания перечислений
элементов, иерархичности, классов-псевдоклассов и т. д. Такие селекторы (порой в
сотню-другую символов длиной) называются комбинированными. Вот
простой пример:
р a, li a
Этот селектор указывает на элементы .. .а>, но не все подряд, а только
такие, которые заключены в контейнерах … р> и .. ..
Что касается свойств и значений, то здесь все совсем просто. Именно они
предписывают агенту пользователя, как именно представлять те или иные
элементы. Нижеследующее простейшее правило, сдается мне, сможет понять
не то что браузер, но даже совсем далекий от Интернета человек, немного
знакомый с английским языком:
р {text-align: right; color: red}
Здесь говорится, очевидно, о том, что все абзацы должны быть выровнены по
правому краю и «окрашены» в красный цвет.
Внешние и внутренние листы стилей
Пришло время рассмотреть наиболее животрепещущий вопрос— как же
«привязать» лист стилей к HTML-документу?
Опишем возможные способы.
Наиболее предпочтительный вариант — организация внешнего листа стилей
в виде отдельного файла. Таким файлам обычно присваивают расширение
ess, но это вовсе не обязательно.
Внешний лист стилей style.css можно подключить к XHTML-документу,
вставив внутрь контейнера
.. . элемент:В случае использования HTML 4 косая черта перед закрывающей угловой
скобкой тега не нужна. (Полагаю, уже пора бы и закончить оговаривать
типичные отличия HTML- и XHTML-конструкций — комментарий такого рода
будет последним.)
Лист стилей можно внедрить непосредственно в HTML-документ. Для этого
используется тег
\
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей 123
Этот элемент должен также находиться между тегами
иHTML-документа. Конструкции листа стилей помещаются непосредственно
внутрь контейнера .. ..
Тут есть, правда, небольшой нюанс. Устаревшие версии браузеров, не
поддерживающие CSS и не понимающие тега , могут интерпретировать
CSS-код как часть содержания веб-страницы.
|
5th Фев 2011
|
Теги:
|