htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > CSS по шагам > Идентификаторы

Этот материал устарел, рекомендую Самоучитель CSS

Шаг 7. Идентификаторы

Влад Мержевич

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.

Синтаксис использования идентификатора следующий.

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример 7.1). Символ решетки при этом уже не указывается.

Пример 7.1. Использование идентификатора

<!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 (рис. 7.1).

Рис. 7.1

Рис. 7.1. Результат применения идентификатора

Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий.

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора. В примере 7.2 показано использование идентификатора применительно к тегу <P>.

Пример 7.2. Применение идентификатора совместно с тегом

<!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>

Результат данного примера показан на рис. 7.2.

Рис. 7.2

Рис. 7.2. Вид параграфов после применения стиля

В данном примере вводится стиль для тега <P> и для такого же тега, но с указанием идентификатора opa.

Использование идентификатора дает возможность изменять некоторые параметры элемента, например, делать его невидимым или видимым по желанию с помощью скриптов (пример 7.3).

Пример 7.3. Изменение видимости слоя

<!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>

Результат данного примера показан ниже. При наведении курсора мыши на изображение демонстрируется скрытый до этого времени текст, который вновь прячется при убирании курсора с рисунка. Изменение параметров стиля элемента происходит через обращение к нему по имени идентификатора.

Кнопка
Статья опубликована: 15.10.2005 Последнее обновление: 22.12.2008
CSS по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru