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

Идентификаторы они же 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" " 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}
#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" " https://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 приведут к путанице!, я уж не говорю о том, что возможно в Вашем коде будет разбираться посторонний человек. Придумайте свою " систему" названий и не нарушайте её, так Вы сэкономите собственное время и затраченные усилия.