Глава 6. Классы и идентификаторы

Данная глава является своего рода продолжением главы 1. О способах внедрения CSS в HTML документ.

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

Классы CSS

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

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

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

p{color:red}

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

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

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

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

p.rose{color:#ff0}

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

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

Вот так:

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

Ну и пример:

<title>Внедрение класса</title>

<style>

body{background:#c5f}

p{color:#0ff}

p.rose{color:#ff0}

</style>

<p>На этом сайте Вы найдёте любую информацию о слонах.

<p>У нас Вы можете по выгодным ценам приобрести лучших слонов!

<p>Только у нас Вы можете взять любых слонов на прокат!

<p class=rose>Специальное предложение для девушек! Розовые слоны только у нас!

смотреть пример

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

.rose{color:#ff0}

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

Пример:

<title>Классы</title>

<style>

body{background:#c5f}

h1{color:#0ff}

p{color:#008}

span{color:#008}

.rose{color:#ff0}

</style>

<h1>Это заголовак с основным стилем CSS</h1>

<h1 class=rose>А этот заголовок использует class=rose</h1>

<hr>

<a href=# title="Обыкновенная ссылка">Это ссылка по умолчанию</a><p>

<a href=# class=rose>А эта ссылка использует class=rose</a><p>

<hr>

<span>Этот строковый блок использует основной стиль</span><p>

<span class=rose>А этот класс rose</span>

<hr>

<p>Параграф без указания класса

<p class=rose>Параграф с указанием класса

смотреть пример

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

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

Идентификаторы

Идентификаторы они же id селекторы, весьма схожи с классами, с тем лишь отличием, что идентификатор может иметь 1 единственное уникальное имя во всем документе. Идентификаторы, как правило, применяются в том случае, если возникает необходимость управлять стилем элемента динамически с помощью скрипта, обращаясь к его индивидуальному имени.

В файле CSS имя указывается со знаком решётки в его начале.

Вот так, например: #block{color:#ff0}

А к нужному элементу добавляется атрибут id=block, например: <p id=block>Параграф с идентификатором

Вот пример:

<title>Идентификатор</title>

<style>

p{color:#0ff}

#rose{color:#ff0}

</style>

<p>Это обыкновенный параграф

<p id=rose>А этот параграф уникальный

смотреть пример

Ну так в чем же отличие между классом и идентификатором?

Покажу на примере:

<title>Идентификаторы и скрипты</title>

<script>function show_hide(id){item=document.getElementById(id);if(item.style.display=='none'){item.style.display='block'}else item.style.display=none}</script>

<div id=block style=display:none>

<h2 style=color:#ff0>А вот и я</h2>

<img src=rosemammoth.gif>

</div>

<a href=javascript:show_hide('block') title="Развернуть/Свернуть" style=color:#ff0>Нажми на меня</a>

<hr>

<div id=block1 style=display:none>

<h2 style=color:#00f>А здесь я</h2>

<img src=mammoth.jpg>

</div>

<a href=javascript:show_hide('block1') title="Развернуть/Свернуть" style=color:#00f>И на меня нажми</a>

смотреть пример

Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки <div> с уникальными именами "block" и "block1" (скрывать и показывать его по нажатии на ссылку), и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать, как скрипт может обращаться к блоку через атрибут id. А вот с помощью классов мы бы не достигли такого результата.

Ну, думаю, объяснил кое как.

Полезные советы: