Классы

CSS является достаточно гибкой структурой, позволяющей описывать не только определенные параметры для каких-либо элементов таблицы стилей, но и назначать различные свойства одним и тем же ее элементам. Предположим, в тексте вашего html-документа встречается несколько вариантов расположения текста: часть абзацев позиционируется по всей ширине страницы, а часть — по ее левому краю. И в том и в другом случае для описания отрывков текста используется тег <Р>. Если вы назначите данному элементу те или иные свойства, представив его в качестве селектора в файле CSS, то все отрывки текста, помеченные в коде web-страницы тегом <Р>, будут представлены на экране одинаковым образом. Чтобы избежать этого, можно использовать в составе ess-файласпециальные кодовые объекты, называемые классами.

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

НАЗВАНИЕ ЭЛЕМЕНТА. имя класса {свойство: значение;}

Простым примером использования данной функции CSS может служить следующий отрывок текста ess-файла:

P.myclass {text-align: justify;}

В этом случае именем класса у вас служит символьный определитель «myclass». Теперь, если вы вызовете в коде web-страницы тег форматирования абзаца с указанием имени класса, данному абзацу будут присвоены значения, определенные в описании элемента <Р>:

<BODY>

<Р CLASS="myclass">Teкст, отформатированный согласно директивам CSS</P>

<Р>Текст. отформатированный по умолчанию</Р>

</BODY>

Очевидно, что теперь текст, заключенный в первую пару тегов <Р> и </Р>, будет растянут по всей ширине окна броузера, а текст, заключенный во вторую пару этих тегов, останется отформатированным по умолчанию. Таким образом, вы можете придавать одним и тем же элементам разметки гипертекста различные свойства в пределах одного документа.

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

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

В качестве примера такого представления класса можно предложить следующий вариант описания свойств элементов web-страниц:

,myclass{color: green;}

Записав предложенную выше строку в файл CSS, вы можете вызывать класс с именем «myclass» из кода html-документа, присваивая его свойства любому тегу. Например, указав в html-коде директиву

<Р CLASS="myclass">TeKCT, отображаемый зеленым цветом </Р>

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

<Н3 CLASS="myclass ">текстовый заголовок</Н3>

Заголовок третьего уровня также будет представлен на экране зеленым цветом. Очевидно, что каждый класс можно вызывать в пределах одной web-страницынеограниченное количество раз, равно как каждый файл CSS может содержать неограниченное количество классов.

Создавая классы CSS, следует помнить о том, что для одного элемента каскадной таблицы стилей может быть специфицирован только один класс. Например, запись

A.class-l.c1ass-2{text-decoration: none;}

является в корне неправильной. Учтите также, что для классов, равно как и для селекторов, справедливы свойства группировки и наследования.

  Идентификаторы

В отличие от селекторов и классов, идентификаторы представляют собой кодовые объекты CSS, которые позволяют назначать свойства отдельным компонентам HTML без использования прочих стандартных методов. В файле CSS идентификатор обозначается знаком <#», а в документе HTML — атрибутом ID. Он имеет собственное имя, состоящее из цифр и символов латинского алфавита. Общий синтаксис записи идентификаторов можно представить в следующем виде:

НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора {свойство: значение;}

Простым примером использования идентификатора может служить такой отрывок файла CSS:

P#qwerty{text-align: left:}

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

<Р ID="qwerty">Teкст. позиционированный по левой границе экрана</Р>Очевидно, что тег <Р>, включающий атрибут ID, в качестве значения которого использовано имя идентификатора, наследует свойства последнего. Если же в записи этого тега вы не укажете данный атрибут, текст будет выровнен по умолчанию либо согласно другим директивам HTML или CSS. Идентификаторы также можно записывать без указания имени элемента, которому они соответствуют. Так, строка

#qwerty{color: #00FF00:}

создает идентификатор, который может использовать любой элемент HTML, например:

<Н1 ID="qwerty">Teкст заголовка</Н1>

  Комментарии

Файл CSS может содержать введенные пользователем комментарии, поясняющие назначение тех или иных участков кода. Комментарии в стандарте CSS заключаются в последовательность символов «/» и «*» следующим образом:

/* текст комментария */

  Безопасность

Поскольку стандарт CSS окончательно сложился значительно позже стандарта HTML, в полной мере его поддерживают далеко не все версии броузеров, а именно — Microsoft Internet Explorer начиная с версии 4.0 и Netscape Navigator старше четвертой версии. Более того, интерпретаторы данных броузеров работают, как известно, с некоторыми отличиями, а потому одни и те же элементы, специфицированные согласно стандарту CSS, могут отображаться в них совершенно по-разному. Старые броузеры вообще могут обрабатывать команды CSS по абсолютно непредсказуемому алгоритму, превращая содержимое вашей web-странички в некое подобие малоаппетитной на вид манной каши.

Поэтому с объективной точки зрения нецелесообразно использование для представления содержимого web-страниц каскадных таблиц стилей в полном объеме. Наоборот, рекомендуется применять лишь ограниченный набор элементов, заведомо поддерживаемый броузерами большинства версий. Такой набор директив CSS условно называется «безопасным». В него входят, прежде всего, свойства текста font-family, font-weight и font-size, свойства цвета color и background-color, свойства текста text-align, text-indent, text-decoration и line-height и, наконец, свойства границ margin-left, margin-right и margin-top. Это отнюдь не означает, что другие свойства CSS использовать категорически нельзя, просто делать это следует с осторожностью. Подробные таблицы совместимости стандарта CSS с различными версиями броузеров можно найти на сервере http://style.webreview.com.

На главную