Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически. Синтаксис использования идентификатора следующий. #Имя идентификатора { свойство1: значение; свойство2: значение; ... } В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз. Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример 7.1). Символ решетки при этом уже не указывается. Пример 7.1. Использование идентификатора <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> #help { position: absolute; left: 160px; top: 120px; width: 225px; height: 180px } </style> </head>
<body> <p id="help"> Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет. </p>
</body> </html> В данном примере определяется стиль тега <p>, для которого указан селектор help через параметр id. Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий. Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... } Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора. В примере 7.2 показано использование идентификатора применительно к тегу<P>. Пример 7.2. Применение идентификатора совместно с тегом <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <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. Использование идентификатора дает возможность изменять некоторые параметры элемента, например, делать его невидимым или видимым по желанию с помощью скриптов (пример 7.3). Пример 7.3. Изменение видимости слоя <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <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"></a></td> <td> <p id="descr">Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</p> </td> </tr> </table>
</body> </html> Результат данного примера показан ниже. При наведении курсора мыши на изображение демонстрируется скрытый до этого времени текст, который вновь прячется при убирании курсора с рисунка. Изменение параметров стиля элемента происходит через обращение к нему по имени идентификатора.
|