Виды классов и индификаторов для селекторов.
Несколько слов от том как работают каскадные таблицы стилей. Вы уже наверно знаете что браузер при обработке начинает читать HTML самой верхней строки, сначала он определяет тип документа, далее соглавно типу обрабатывает все что есть в теге HEAD, т.е. мета-теги скрипты и стили. Если браузер встречает CSS то он их все обрабатывает, составляет шаблоны(регулярные выражения) для тегов и уже когда он начинает обрабатывать все содержимое тега BODY, он ищет совпадения с шаблоном, и если есть совпадения то браузер применяет правила стилей. Например мы сделали такое правило: B{ color:red ; font-size:120%}, то браузеру сначала нужно определить размер шрифта по умолчанию, а потом умножить его на 120%, а уже только потом обрабатывать содержимое тега BODY и искать совпадения, в нашем примере тег B и уже если находит совпадения то применяет правило, т.е. не только делает текст жирным, и красит в красный цвет и увеличивает размер шрифта.
И так продолжим. Мы умеем применять правила для тегов, но мы эти правила распространяем на все теги, т.е. если мы создаем правило B{ color:red ; font-size:120%}, то содержимое в всех тегах B будет использовать это правило. Но что делать если мы хотим применить стиль только к одному тегу, а все остальные оставить по умолчанию?
Вот для этих целей служат идентификаторы, классы , псевдоклассы и подобные, но об всем по порядку.
И еще, если вы до этого момента не начали конспектировать пройденный материал, то с следующего абзаца я вам рекомедую делать это, потому что в CSS приблизительно 150 свойств правил, в свою очередь в среднем каждое правило имеет 5 значений, а еще более 20 способов использования селекторов, и того 150Х5Х20=15тыс. комбинаций. Запомнить все это не реально, но если делать конспект то вам будет проще.
1) Селектор типа тегов , это то что мы уже изучили, т.е. простое правило:
<STYLE type="text/css">
H1 { text-align:center }
</STYLE>
2) Групирование селекторов в CSS.
Если два и более селекторов имеют одинаковое объявление:
<STYLE type="text/css">
H1 { text-align:center }
H2 { text-align:center }
H3 { text-align:center }
</STYLE>
То такие селекторы можно сгрупировать:
<STYLE type="text/css">
H1, H2, H3{ text-align:center }
</STYLE>
при групировке селекторы разделяются запятой, между запятой и следующим селектором рекомендуется ставить пробел, после последнего слелектора не ставится запятая, а пробел между поледним селектором и фигурной скодкой на ваще усмотрение.
3) Универсальные селекторы подходят для любых тегов.
<STYLE type="text/css">
.{ color: red }
*.{ color: red }
</STYLE>
Оба правила выполняют одну и ту же функцию, за исключением того что правило с звездочкой есть устаревшим и может быть проигнорировано многоми браузерами. Этот пример аналог:
<STYLE type="text/css">
BODY{ color: red }
</STYLE>
4) Классы селекторов. При помощи Селектор типа можно создать правила для всех тегов(например B), но что делать если нам нужно в одном или нескольких тегах изменить оформление?, мы создаем классы:
<html>
<head>
<title>ВВедение в CSS</title>
<STYLE type="text/css">
B { font-size:12pt; color: red }
B.bluetext { color: blue }
</STYLE>
</head>
<body>
<b> красный текст 12pt</b>
<b class="bluetext"> голубой текст 12pt</b>
</body>
</html>
Чтобы создать класс нужно к имени тега прикрепить при помощи точки имя класса, а потом это имя поместить в значение атрибута class. Имя класса может быть произвольное из букв и цифр, но начальным символом должна быть буква.
5)Идентификаторы селекторов: <html>
<head>
<title>ВВедение в CSS</title>
<STYLE type="text/css">
B#bluetext { color: blue }
H1#textcenter { text-align:center }
</STYLE>
</head>
<body>
<body>
<H1 id="centertext">Текст по центру</H1>
<b id="bluetext"> голубой текст</b>
</body>
</html>
Идентификаторы аналогичны классам, за исключением того что их на одной странице можно использовать только один раз, а классы сколько угодно. Так-же в XML могут быть конфликты, потому что идентификаторы там зарезервированы для других целей.
6) Универсальные идентификаторы и классы селекторов.
<html>
<head>
<title>ВВедение в CSS</title>
<STYLE type="text/css">
.centertext { text-align:center }
.#bluetext { color: blue }
</STYLE>
</head>
<body>
<H1 class="centertext"> текст по центру</b>
<b id="bluetext"> голубой текст </b>
</body>
</html>
Эти классы и идентификаторы отличаются от универсальных селекторов, тем что их можно использовать в любом теге.
