Уроки CSS
Селекторы
Для применения стилей к элементу или группе элементов используют так называемые селекторы.
Существуют следующие виды селекторов:
- Селектор по элементу
- Селектор по классу
- Селектор по ID
Селектор по элементу
В качестве селектора может выступать название самого элемента (p, body, table, a).
Например, конструкция:
p {color: #ff0000;
font-family: verdana;
font-size: 12px}
обозначает, что внутри всех тегов <p></p> текст будет отображаться шрифтом Verdana красного цвета и размером 12 пикселов. Аналогично в качестве селекторов можно использовать любые элементы HTML, но при этом примененные к данному селектору стили будут применяться к каждому элементу данного вида, которые имеются на странице.
Селектор по классу
Этот механизм позволяет разделять элементы на классы, которые могут иметь разные стили. Например:
<p class="green">Текст выведен зеленым цветом </p>
<p class="red">Текст выведен красным цветом </p>
Как видите, элементам одного вида мы присваиваем разные стилевые классы. Стили будут иметь вид:
p.green {color: #00ff00}
p.red {color: #ff0000}
В данном случае первый абзац будет выведен зеленым цветом, а второй - красным.
Нужно отметить, что один класс можно применять к разным элементам. Например:
<a href="xxxxxxxxx" class="red">Эта ссылка красного цвета</a>
<p class="red">Этот абзац тоже красного цвета</p>
Для того чтоб один класс можно было применять к разным элементам, в таблице стилей перед точкой не указывается имя элемента:
.red {color: #ff0000}
Селектор по ID
С помощью селектора по ID можно применять стили только к одному элементу, т.е. в HTML-коде должен быть только один элемент с данным ID. Например:
p#unik {color: #ff0000;
font-family: verdana;
font-size: 14px}
...
<p id="unik">Текст абзаца</p>
А следующий код:
<p id="unik">Текст абзаца</p>
<cite id="unik">Цитата</cite>
будет некорректным, поскольку есть два одинаковых ID.
© Seredenco Roman
2004-2006
