Лекция: Идентификаторы
Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.
Синтаксис использования идентификатора следующий.
#Имя идентификатора { свойство1: значение; свойство2: значение;… }
В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.
Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример 7.1). Символ решетки при этом уже не указывается.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" «www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=«Content-Type» content=«text/html; charset=windows-1251»>
<title>Идентификаторы</title>
<style type=«text/css»>
#help {
position: absolute; /* Абсолютное позиционирование */
left: 160px; /* Положение элемента от левого края */
top: 50px; /* Положение от верхнего края */
width: 225px; /* Ширина блока */
height: 180px; /* Высота блока */
background: #f0f0f0; /* Цвет фона */
}
</style>
</head>
<body>
<div id=«help»>
Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.
</div>
</body>
</html>
В данном примере определяется стиль тега <DIV>, для которого указан селектор help через параметр id (рис. 3.4).
Рис. 3.4. Результат применения идентификатора
Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий.
Тег#Имя идентификатора { свойство1: значение; свойство2: значение;… }
Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора. В следующем примере показано использование идентификатора применительно к тегу <P>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" «www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=«Content-Type» content=«text/html; charset=windows-1251»>
<title>Идентификаторы</title>
<style type=«text/css»>
P {
color: green; /* Зеленый цвет текста */
font-style: italic; /* Курсивное начертание текста */
}
P#opa {
color: red; /* Красный цвет текста */
border: 1px solid #666; /* Параметры рамки */
background: #eee; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<p>Обычный параграф</p>
<p id=«opa»>Параграф необычный</p>
</body>
</html>
Результат данного примера показан на рис. 3.5.
Рис. 3.5. Вид параграфов после применения стиля
В данном примере вводится стиль для тега <P> и для такого же тега, но с указанием идентификатора «opa».