Главная | Обратная связь | Поможем написать вашу работу!

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

Данная глава является своего рода продолжением главы первой о способах внедрения 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. А вот с помощью классов мы бы не достигли такого результата.

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

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

· При построении CSS будьте логичны, соблюдайте "значимость" элементов и их порядок, так же как они вложены друг в друга в HTML коде.

Например:

body {сначала опишите стиль страницы в целом}
div {потом её отдельных частей - блоков}
a {затем ссылок}
h1.-.h6 {далее заголовков}
p {и в конце параграфов}

Для чего это нужно?

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

Во-вторых, что более важно, загрузка страницы происходит не моментально и не всегда приятно наблюдать как содержание данной страницы при загрузке "прыгает" и всячески "шевелится" так как сначала прописываются "малозначимые" стили элементов, например шрифт параграфов, а в конце "значительные" например размеры блоков, с помощью которых свёрстан весь сайт. К тому же загрузка, по каким либо причинам, вообще может пройти не до конца..

Что увидит (сначала увидит) пользователь при "неправильном" построении CSS? Красивый шрифт, беспорядочно разбросанный в окне браузера? Или нормальное построение, но без красивого шрифта? - Это уже решать Вам!

· При использовании классов и идентификаторов придумывайте им осмысленные информативные имена. Варианты тапа: .aaa.123 #abc #cba приведут к путанице!, я уж не говорю о том, что возможно в Вашем коде будет разбираться посторонний человек. Придумайте свою "систему" названий и не нарушайте её, так Вы сэкономите собственное время и затраченные усилия.

Глава 7

Размеры элемента.

Блоки и строки.

Прежде чем говорить о работе с размерами элементов их расположении, полях и отступах, расскажу немного о самих элементах, точнее об их типах.

Все элементы (теги) можно разделить на две категории: Блочные и строковые.

Чем они отличаются?

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

К блочным (block) элементам относятся:
<div>, <dl>, <form>, <h1>- <h6>, <hr>, <noscript>, <ol>, <p>, <pre>, <table>, <ul> …

К строчным (inline) элементам относятся:
<a>, <br>, <cite>, <code>, <em>, <img>, <input>, <label>, <select>, <span>, <strong>, <sub>, <sup>, <textarea> …

Основные отличия от элементов строкового и блочного типа заключаются в том что:

Боксовые элементы могут содержать в себе другие элементы, как блочного, так и строкового типа. Строчные же элементы могут включать в себя только строчные элементы.

На примере:

<div>
<b>Это <i>правильная строка</i> в блоке</b>
</div>

<i><b>
<div>А это неправильная толи строка толи блок. Так лучше не делать!!</div>
</b></i>

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

По умолчанию блочные элементы имеют ширину 100% и тем самым оставляют за собой все пространство по горизонтали, у строковых же элементов ширина определяется содержанием.

Думаю, на примере будет понятнее.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Блочные и строковые элементы</title>
</head>
<body>
<p style="background-color: #00ffff;">Параграф</p>
<p style="background-color: #00ff00;">Параграф</p>
<p style="background-color: #ffff00;">Параграф</p>
<hr>
<span style="background-color: #00ffff;">Строка</span>
<span style="background-color: #00ff00;">Строка</span>
<span style="background-color: #ffff00;">Строка</span>
<hr>
<div style="background-color: #00ffff;">Блок</div>
<div style="background-color: #00ff00;">Блок</div>
<div style="background-color: #ffff00;">Блок</div>
</body>
</html>

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

⇐ Предыдущая 3 4 5 6 789 10 11 12 Следующая ⇒