Идентификатор (называемый
также «ID селектор») определяет уникальное имя элемента, которое
используется для изменения его стиля и обращения к нему через
скрипты, что позволяет управлять стилем элемента динамически.
Синтаксис использования
идентификатора следующий.
#Имя идентификатора { свойство1: значение; свойство2: значение;
... }
В отличие от классов идентификаторы
должны быть уникальны, иными словами, встречаться в коде документа
только один раз.
Обращение к идентификатору происходит
аналогично классам, но в качестве ключевого слова у тега используется
параметр id, значением которого выступает имя идентификатора.
Символ решетки при этом уже не указывается.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://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.
Как и при использовании классов,
идентификаторы можно применять к конкретному тегу. Синтаксис
при этом будет следующий.
Тег#Имя идентификатора { свойство1: значение; свойство2:
значение; ... }
Вначале указывается имя тега, затем
без пробелов символ решетки и название идентификатора. В примере
ниже показано использование идентификатора применительно к
тегу <P>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://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>
В данном примере вводится стиль
для тега <P> и для такого же тега, но с указанием идентификатора
opa.
Использование идентификатора дает
возможность изменять некоторые параметры элемента, например,
делать его невидимым или видимым по желанию с помощью скриптов
(см. ниже)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Идентификаторы</title>
<style type="text/css">
#descr {
position: relative; /* Относительное позиционирование */
visibility: hidden /* Прячем содержимое слоя */
}
</style>
<script type="text/javascript">
function hiddenLayer() {
document.getElementById("descr").style.visibility
= "hidden";
}
function showLayer() {
document.getElementById("descr").style.visibility
= "visible";
}
</script>
</head>
<body>
<table width="90%" border="0" cellspacing="0"
cellpadding="4" align="center">
<tr>
<td width="20%" align="center"><a
href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img
src="button.gif" width="98" height="33"
border="0" alt="Кнопка"></a></td>
<td>
<div id="descr">Данная эксклюзия является
подмножеством астрациональных супремативных монотенных федоний
кадонарного экстрафазория.</div>
</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан
ниже. При наведении курсора мыши на изображение демонстрируется
скрытый до этого времени текст, который вновь прячется при
убирании курсора с рисунка. Изменение параметров стиля элемента
происходит через обращение к нему по имени идентификатора.
 |
Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.
|
|
