Классы CSS.

Начнём с классов..

Как присвоить элементу или группе идентичных элементов индивидуальный стиль, отличный от основного, уже указанного в стилевом описании документа? Не знаю задавались Вы этим вопросом или нет, но рано или поздно на него необходимо найти ответ.

Итак.. предположим в файле CSS к элементу < p> у нас применён следующий стиль:

p {color: #0000ff; font-size: 14px}

И все вроде бы хорошо.. все параграфы синенькие и размер у них 14px, но нам надо сделать так чтобы некоторые из этих параграфов были розовые! И как быть??

На помощь приходят классы.

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

Ну что давайте попробуем? Делается это так:

p.rose {color: #ff00ff; font: italic 16px Arial}

Поясню p - это элемент HTML (селектор) в данном случае наш параграф, .rose - это индивидуальное имя класса которое мы сами выдумали, оно может быть любым необязательно rose -розовый, точка между селектором и именем класса есть дань уважения к синтаксису принятому в CSS - теперь браузер поймет, что данный элемент p выведен в класс rose.

Ну что ж имя мы присвоили теперь нам необходимо в документе HTML указать теги (в нашем случае теги < p>) которым необходим индивидуальный стиль. Делается это с помощью атрибута class.

Вот так:

< p class=" rose" > Этот параграф использует имя класса rose и тем самым выделяется из основной массы < /p>

Ну и пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Внедрение класса< /title>
< style type=" text/css" >
body {background-color: #c5ffa0}
p {color: #0000ff; font-size: 14px}
p.rose {color: #ff00ff; font: italic 16px Arial}
< /style>
< /head>
< body>
< p> На этом сайте Вы найдёте любую информацию о слонах.< /p>
< p> У нас Вы можете по выгодным ценам приобрести лучших слонов!! < /p>
< p> Только у нас Вы можете взять любых слонов на прокат!! < /p>
< p class=" rose" > Специальное предложение для девушек! Розовые слоны!! только у нас!!! < /p>
< /body>
< /html>

В данном примере класс " rose" может быть присвоен только параграфу - элементу p. Для того чтобы данное стилевое описание могло распространятся на все элементы, в файле CSS (или между тегами < style> < /style> в заголовке документа) элемент явно не указывается и синтаксис приобретает следующий вид:

.rose {color: #ff00ff}

Теперь указав в любом элементе class=" rose" он примет стиль данного класса.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Классы< /title>
< style type=" text/css" >
body {background-color: #c5ffa0}
h1 {color: #0000ff; font-size: 22px}
p {color: #008000; font: italic 16px Arial}
span {color: #0080ff; font-size: 12px}
.rose {color: #ff00ff}
< /style>
< /head>
< body>
< h1> Это заголовак с основным стилем CSS< /h1>
< h1 class=" rose" > А этот заголовок использует class=" rose" < /h1>
< hr>
< a href=" #" title=" Обыкновенная ссылка" > Это ссылка по умолчанию< /a> < br>
< a href=" #" title=" Розовая ссылка" class=" rose" > А эта ссылка использует class=" rose" < /a> < br>
< hr>
< span> Этот строковый блок использует основной стиль< /span> < br>
< span class=" rose " > А этот класс rose< /span>
< hr>
< p> Параграф без указания класса< /p>
< p class=" rose" > Параграф с указанием класса< /p>
< /body>
< /html>

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

Например, заголовок < h1 class=" rose" > был синим, а стал розовым, но при этом сохранил свой размер 22 пикселя, так как в нашем классе rose никаких разговоров о размере шрифта не шло.. мы лишь " договорились" с браузером, что элементы из группы rose будут розовыми.