Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Селекторы по классу

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

<P style="color:blue"> - для каждого абзаца синего цвета;
<P style="color:red"> - для каждого абзаца красного цвета;

Теперь рассмотрим такую ситуацию. Нам захотелось поменять цвета в абзацах. Синие абзацы мы хотим поменять на зелёные, красные - на жёлтые. В этом случае для каждого из абзацев придётся заново прописывать атрибут style. Но это не очень удобно, если абзацев 50, 20 из них - синие, 30 - красные, и это только на одной веб-странице, а если страниц - 100, и на каждой по 50 абзацев и везде менять цвета. Это долго и тяжеловато. Именно для таких случаев и были придуманы селекторы по классу.

Правила, содержащие селекторы по классу, в таблице стилей прописываются следующим образом:

p.classone {
color:blue;
}
p.classtwo {
color:red;
}

Здесь класс отделяется от элемента, которому он присвоен, точкой. В этом случае сначала пишется элемент, а затем название класса. К абзацу в html-документе классы будет подключаться следующим образом:

<P class="classone"> - подключение первого класса к абзацу;
<P class="classtwo"> - подключение второго класса к абзацу;

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

Также в таблице стилей можно задать класс для всех элементов сразу, делается это следующим образом:

.classall {
color:blue;
}

В этом случае, если к любому текстовому элементу подключить атрибут class="classall", то все они будут синими.


<<Предыдущая | В раздел | Следующая>>