Единицы измерений значений свойств

Символьные значения состоят из букв латинского алфавита или комбинаций букв, цифр и специальных символов. Символьные значения присваиваются многим стилевым свойствам, например, свойствам шрифтов font-family, свойству текста text-align. Другим примером использования символьных значений являются свойства цвета color и background-color, значения которых задаются в символьном формате RGB-модели. Отметим, что в CSS для описания цвета применяются и другие форматы, которые не поддерживаются в HTML: десятичный (например, rgb(128, 0, 128)) и процентный (например, rgb(50%, 0, 50%)).

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

P {color: blue; background: white; }

Большинство таблиц стилей содержат несколько правил, и большинство правил содержат несколько описаний. Использование пробелов и переносов облегчает восприятие описаний и правил.

H1 {

Font-family: Helvetica;

Font-style: italic;

Font-size: 30pt;

Color: black;

}

P {

Font-size: small;

}

В данном примере используется список свойств для тега заголовка первого уровня (вид шрифта, начертание, размер и цвет символов) и свойство для абзаца (уменьшенный размер шрифта).

Пробелы или их отсутствие не влияют на отображение CSS в браузерах. Исключением являются уникальные имена class id, которые чувствительны к регистру, когда они связаны с документом HTML.

Иногда при написании свойства селектора может использоваться альтернативный выбор, например, при указании шрифта для всего сайта:

BODY {

Font-family: " Lucida Grande", Verdana, Arial, sans-serif;

}

Шрифты будут использоваться в порядке перечисления. Если на компьютере пользователя установлен шрифт Lucida Grande, текст будет отображаться этим шрифтом. Если нет – будет использоваться шрифт Verdana. Если Verdana не установлен – используется Arialи т. д.

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

Сгруппированные селекторы. Существуют дополнительные методы, которые расширяют функциональные возможности каскадных таблиц стилей. Стили можно сгруппировать, что позволит уменьшить количество необходимых атрибутов и аргументов путем создания логических групп. Группирование таблиц стилей может осуществляться по одинаковым тегам или по атрибутам одного семейства. Порядок следования атрибутов играет важную роль: атрибуты начертания и типа шрифта должны находиться перед остальными атрибутами, размер (кегль) должен быть задан до межстрочного интервала, и только потом в строку можно добавить дополнительную информацию.

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

Пример группирования по тегам:

– до группирования:

P {font-size: small; }

TD {font-size: small; }

UL {font-size: small; }

OL {font-size: small; }

LI {font-size: small; }

– после группирования:

P, TD, UL, OL, LI {font-size: small; }

Пример группирования по атрибутам одного семейства:

– до группирования:

BODY {margin-top: 12pt; margin-right: 10pt; margin-left: 15pt; }

– после группирования:

BODY {margin: 12pt 10pt 15pt; }

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

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

Селектор.класс {свойства}

Класс может обозначаться так же, как и тип HTML-документа, например, абзацы документа образуют класс Р. Однако чаще классу присваивается формальное имя, которое в дальнейшем будет связано с определенным набором стилевых свойств. Допустим, вы можете заголовки первого уровня Н1 синего цвета сгруппировать в класс с именем blue:

H1.blue {color: blue}

Наименование класса начинается с точки и обычно пишется строчными буквами (допускается использование латинских букв и цифр; наличие специальных символов, нижних подчеркиваний и прочих нестандартных элементов не рекомендуется).

Принадлежность HTML-элемента этому классу должна быть указана в атрибуте CLASS, который может применяться в любом теге. Так, все элементы Н1 с атрибутом CLASS=" blue" станут синими.

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

.класс {свойства}

.green {color: green; }

В данном случае все элементы с атрибутом CLASS=" green" станут зелеными.

< H2 CLASS=" green" >

< DIV CLASS=" green" >

< P CLASS=" green" >

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

ID-селекторы. В отличие от селекторов и классов, id-селекторы (идентификаторы) представляют собой кодовые объекты CSS, которые позволяют изменить стиль только одного элемента, не затрагивая стилей других однотипных элементов.

#id {свойства}

Признаком идентификатора является символ «#» перед именем. В идентификаторе используется формальное имя, которое в дальнейшем будет связано с определенным набором стилевых свойств. Данный селектор применяется в пределах тела документа BODY для задания индивидуального стиля оформления конкретного элемента.

В HTML-коде web-страницы этот идентификатор можно вызвать с использованием атрибута ID.

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

#red {color: ff0000; }

а затем вызвать его в элементе Р с использованием атрибута ID:

< P ID=" red" >

Варианты использования CSS

Таблицы стилей можно применить к web-странице любым из трех способов:

– встраивание;

– подключение;

– связывание.

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

Встраиваемые стили. CSS – это средство, позволяющее задавать различные визуальные свойства HTML-тэгам. Стиль задается атрибутом STYLE, который можно использовать практически в каждом тэге, задавая его специфические свойства. Значения атрибута STYLEобязательно заключаются в кавычки (одинарные или двойные), причем свойства отделяются друг от друга точками с запятой (пробелы не обязательны). Встраиваемые стили оказывают влияние на тот тег, в котором используются.

Пример использования STYLE для отдельного абзаца:

< P STYLE=" font–size: 1.5cm; color: green; " >

Ниже приведен пример использования атрибута STYLE в HTML-коде для различного оформления строк списка, отображение этого примера в браузере представлено на рис. 5.1.

< HTML>

< HEAD>

< TITLE> стиль для отдельного тэга < /TITLE>

< /HEAD>

< BODY BGCOLOR=" white" TEXT=" black" >

< H2> стиль для отдельного тэга < /H2>

< HR>

< UL>

< LI> это обычный текст

< LI STYLE=" color: red; font-size: 1cm; font-style: italic; " >

Красные наклонные буквы высотой в 1 сантиметр

< LI STYLE=" color: blue; font-size: 0.5cm margin-top: 2cm; " >

Синие буквы высотой 0.5 см с отступом слева в 2 сантиметра

< /UL>

< /BODY>

< /HTML>

Рис. 5.1. Отображение в браузере примера с встраиваемыми стилями

Встроенный стиль можно применять к строковым элементам, используя тег < SPAN >. Следующий пример показывает, как присваивается красный цвет одному слову в заголовке.

< H1>

< SPAN STYLE=" color: red; " > Защита< /SPAN> компьютерных сетей

< /H1>

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

< DIV STYLE=" fony-family: serif; color: brown; " >

< H1> Часть первая < /H1>

< H2> Глава 1< /H2>

< BR> < BR>

< CITE> М. Булгаков< CITE>

< /DIV>

Во всех вложенных элементах H1, H2, CITE блока DIV будетиспользован шрифт семейства serifкоричневого цвета. Это произойдет согласно правилам наследования, которые будут рассмотрены позже.

Подключаемые стили. Подключаемые стили, которые также называются внутренними стилями, применяются ко всей web-странице. Для этого достаточно написать определение в головной части документа, которое использует парный тег < STYLE> < /STYLE>.

< STYLE TYPE=" text/css" >

<! -- Описание таблицы стилей -- >

< /STYLE>

В этом коде значение text/cssатрибута TYPEсообщает браузеру, что в текущем файле применен текст на языке CSS. Все формальные описания стилей, представляющие собой CSS-правила, помещаются в элемент STYLE.

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

селектор (или имена тэгов через запятую)

{

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

………………………

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

}

Пример задания стилей заголовков всех шести уровней для всей страницы в заголовочной части HTML-файла:

< HTML>

< HEAD >

< STYLE TYPE =" text /css" >

H1, H2, H3, H4, H5, H6

{

text–align: right;

color: maroon;

font – family: " Arial Cyr", Geneva, Helvetica, Sans-serf;

}

< /STYLE>

< /HEAD>

Связываемые стили. Связываемые, или внешние, стили применяются к документам всего web-сайта. Обычной практикой является указание стилей в отдельном файле с расширением.css, который может использоваться несколькими HTML-документами, ссылающимися на этот файл. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа. Если в файл стилей были внесены изменения, то эти изменения отразятся в каждом документе, который содержит ссылку.

Для этого необходимо сначала создать файл, содержащий стилевое оформление (набор стилей) и дать ему определенное имя, которое бы указывало на то, что там находится, например, файл с именем style.css. Покажем примерное содержимое этого файла.

< STYLE TYPE=" text/css" >

BODY{background: black; font-size: 9pt; color: red; font-family: Arial; }

.base {color: blue; font-style: italic; }

H1 {color: white; }

#bold {font-weight: bold; }

< /STYLE>

В самих же HTML-файлах делается ссылка на этот файл при помощи тега < LINK >.

< LINK REL=" stylesheet" TYPE=" text/css" HREF=" путь до файла" >

Приведем пример привязки стилевого файла к одному из HTML-фай-лов, например к индексному.

< HTML>

< TITLE> < /TITLE>

< /HEAD>

< LINK REL=" stylesheet" TYPE=" text/css" HREF=" styles.css" >

< BODY>

< /BODY>

< /HTML>