Классы и идентификаторы.
Данная глава является своего рода продолжением главы первой о способах внедрения 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>
Смотреть пример
Дата добавления: 2016-02-16; просмотров: 537;