Основы работы с XHTML и CSS


Классы стилей оформления


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

.class {property:value [ ;property:value] ...}

Листинг 3.40. Общая форма таблицы стилей для селектора класса

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

Следующая встроенная таблица стилей включает класс оформления с именем .Offset. После определения этого класса его можно задать для любого тега с помощью атрибута class="class". Ниже этот класс стиля оформления задается параграфу, когда его присваивают тегу <p>. Этот параграф получает оформление класса .Offset, в данном случае с помощью переопределения обычного оформления, задаваемого простым селектором p.

<style type="text/css"> p {margin:20px} .Offset {margin-left:30px; margin-right:30px} </style>

<p class="Offset">Этот параграф требует специального оформления, отличающегося от обычных параграфов на странице. Он имеет левое и правое поле шириной по 30 пикселей.</p>

Листинг 3.41. Объявление и применение класса стиля оформления

(Отметим, что присвоенный тегу класс не включает точку, которая требуется при объявлении селектора .class в таблице стилей.)

Класс стиля является стилем общего назначения, который можно применять к тегу любого типа, задавая просто класс тегу; плюс, в отличие от селектора ID, селектор класса можно присваивать любому числу тегов. Поэтому любые параграфы, разделы и другие типы блочных тегов могут использовать приведенное выше оформление, присваивая его в классе .Offset. Конечно, тег, к которому применяется класс, должен быть восприимчив к определенным свойствам и значениям, объявляемым классом.

Классы стилей особенно подходят для тегов <span> и <div> для оформления строк текста и блоков кода, не связывая эти теги с определенным стилем. Эти теги становятся носителями множества различных стилей просто при присвоении им различных классов стилей. Следующий код является примером применения различных классов стилей к различным тегам для создания страницы, показанной на рисунке 3.16.

<head> <title>Стили классов</title>




Начало  Назад  Вперед



Книжный магазин