Веб-термины

Тема

Классы каскадных таблиц стилей css

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

Действительно, исследуемая технология весьма практична: как вы уже понимаете, она способна многократно сократить как трудоёмкость вёрстки гипертекста, так и собственно сам объём итогового кода. Но это утверждение справедливо лишь до тех пор, пока у автора веб-проекта не появилось необходимости отступить от раз и навсегда сделанных в файле css установок. Но ведь на практике почти не случается ситуаций, когда во всём массиве кода веб-страницы, везде используются абсолютно одинаковые значения атрибутов и свойств? Для решения подобных задач, применяются классы каскадных таблиц, а также логически следующие за ними методики (о них мы поговорим в другой тематической заметке).

Каскадные таблицы стилей предлагают к использованию так называемые «классы» , как ещё одну интерпретацию собственных возможностей — едва ли не мощнейших из технологий веб-дизайна и Интернета. Суть их чрезвычайно проста: разработчик вправе самостоятельно назначать произвольные имена для любых директив css, а в определениях свойств указывать необходимые для конкретного сетевого ресурса установки.

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

p {font-family: Verdana, Helvetica, Arial Cyr;
font-size: 12px;
margin-top: 10; margin-bottom: 9;
margin-left: 60px; margin-right: 60px;
text-indent: 0pt;
line-height:135%;
word-spacing: 2px; text-align: justify;
}

— такая установка регламентирует отображение текста в теге HTML <P> в том виде, как он представлен на этой веб-странице. Если у автора возникнет желание изменить указанное представление, то достаточно в таблице css создать отдельный класс под произвольным именем, и указать для него изменения в свойствах (допустим, в размере кегля):

.z {font-size: 10px;}

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

<P CLASS="z">

— в этом случае, размер выводимого на дисплей кегля будет равен десяти пикселям, а все остальные установки тега наследуются из селектора <P> (по сути, все, кроме определённых в директиве класса).

  На главную