Селектор класса (class)

Дата добавления: 2015-07-09; просмотров: 493; Нарушение авторских прав

При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.

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

h1.stepleft {margin-left: 10pt}h2.stepright {margin-left: 20pt}

Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:

<h1 class="stepleft">Заголовок с внешним отступом 10 пунктов.</h1> <h2 class="stepright">Заголовок с внешним отступом 20 пунктов.</h2>

В то же время не допускается следующее определение атрибута class:

< h1 class="stepleft" h2 class="stepright">,

т.е. можно определить только один атрибут class

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

.left {margin-left: 40pt}

В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний отступ, равный 40 пунктам.

В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе ".left":

<table class="left">Эта таблица будет иметь внешний отступ, равный 40 пунктам. </table> <p class="left">Этот параграф будет иметь внешний отступ, равный 40 пунктам.</p>

Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.

<== предыдущая лекция	\|	следующая лекция ==>
Предназначение стилей	\|	Селектор идентификатора (id)