Классы и идентификаторы.Данная глава является своего рода продолжением главы первой о способах внедрения CSS в HTML документ. Отложил эту главу "на потом", нарушив тем самым стандартную последовательность обучения CSS, с той лишь целью, чтобы раньше времени не забивать Вам голову информацией, которая в начале была для Вас малопонятной. Теперь, когда Вы уже познакомились с некоторыми свойствами CSS, поняли принцип построения и внедрения CSS в HTML, настал час и необходимость поговорить о CSS классах и идентификаторах, так как дальнейшее обучение, хоть и представляется возможным, но не раскроет в полной мере все возможности CSS. Классы 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" "http://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" "http://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 будут розовыми. ИдентификаторыИдентификаторы они же id селекторы, весьма схожи с классами, с тем лишь отличием, что идентификатор может иметь одно единственное уникальное имя во всем документе. Идентификаторы, как правило, применяются в том случае, если возникает необходимость управлять стилем элемента динамически с помощью скрипта, обращаясь к его индивидуальному имени. В файле CSS имя указывается со знаком решётки в его начале. Вот так, например: #block {color: #ff00ff; font: italic 16px Arial}А к нужному элементу добавляется атрибут id="block" например <p id="block">Параграф с идентификатором</p>Вот пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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} #rose {color: #ff00ff; font: italic 16px Arial} </style> </head> <body> <p>Это обыкновенный параграф</p> <p id="rose">А этот параграф уникальный</p> </body> </html> Ну так в чем же отличие между классом и идентификатором? Покажу на примере: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Идентификаторы и скрипты</title> <script> function show_hide(id){ var item = document.getElementById(id); if (item.style.display == 'none') {item.style.display = 'block';} else item.style.display = 'none'; } </script> </head> <body> <div id="block" style="display:none"> <h2 style="color: #ff00ff">А вот и я!!</h2> <img src="rosemammoth.gif"> </div> <a href="javascript:show_hide('block')" title="Развернуть/Свернуть" style="color: #ff00ff">Нажми на меня!!</a> <hr> <div id="block1" style="display:none"> <h2 style="color: #0000ff">А здесь я!!</h2> <img src="mammoth.jpg"> </div> <a href="javascript:show_hide('block1')" title="Развернуть/Свернуть" style="color: #0000ff">И на меня нажми!!</a> </body> </html> Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки <div> с уникальными именами "block"и "block1" (скрывать и показывать его по нажатии на ссылку), и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать, как скрипт может обращаться к блоку через атрибут id. А вот с помощью классов мы бы не достигли такого результата. Ну, думаю, объяснил кое как.. Полезные советы:
|
