Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

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

Идентификаторы CSS создаются с помощью знака решетки (#), за которой идет имя идентификатора. Это имя, как и у классов, придумывается вами самостоятельно и может содержать символы латинского алфавита (a-z, A-Z), цифры (0-9), символы дефиса (-) и подчеркивания (_), но не может начинаться с цифры или дефиса, после которого идет цифра. Общий синтаксис следующий:

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

Чтобы применить стили идентификатора к HTML-элементу, надо просто указать в его теге атрибут id="имя_идентификатора", где имя_идентификатора, соответственно, и есть имя придуманного вами идентификатора. Но, в отличие от класса, на странице не может быть двух и более элементов с одинаковым id, поэтому будьте внимательны при работе с идентификаторами.

Как и имя класса, имя идентификатора всегда должно точно соответствовать тому, что вы пропишете в атрибуте id. Например, если у вас есть идентификатор #sidebar, то в теге надо писать id="sidebar", а не id="Sidebar", id="SIDEBAR" и т.д.

Пример использования идентификаторов в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Селекторы идентификаторов</title>
  <style type="text/css">
   #logo {
    height: 50px; /* высота блока с логотипом */
    background: #ffcc66; /* фоновый цвет */
   }
  </style>
 </head>
 <body>
  <div id="logo">
   <a href="/css/"><img src="image/uchebnik-css.jpg" width="200" height="50" alt="Учебник по CSS"></a>
  </div>
 </body>
</html>

Результат в браузере

Учебник по CSS

Объединение идентификаторов CSS

Чтобы указать, к какому именно HTML-элементу с заданным id будут применяться стили, идентификаторы можно объединять с другими селекторами (тегов, атрибутов, классов и т.д.). Общий синтаксис:

селектор#идентификатор { свойство: значение; ... }

Пример объединения в CSS идентификаторов с другими селекторами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Объединение селекторов</title>
  <style type="text/css">
   p {
    border: 5px #c66 double; /* стили рамки параграфов */
    padding: 5px; /* внутренние отступы */
   }
   #last {
    font-weight: bold; /* жирный шрифт */
   }
   p#last {
    color: #6c6; /* зеленый текст, если у параграфа есть id="last" */
   }
  </style>
 </head>
 <body>
  <p id="last">Жирный текст зеленого цвета.</p>
 </body>
</html>

Результат в браузере

Жирный текст зеленого цвета.

Возможно вы спросите: «А зачем вообще нужно такое объединение, ведь на каждой странице и так может присутствовать только один элемент с определенным id»? И будете отчасти правы. Например, если мы в предыдущем примере запишем не p#last, а просто #last — результат будет тот же.

Но ведь совсем не обязательно, что у вас на всех страницах один и тот же идентификатор будет применяться к одному и тому же элементу, правильно? Допустим, если в примере мы заменим HTML-код на следующий — текст уже не будет зеленым, он станет просто жирным:

 <body>
  <div id="last">Жирный текст но не зеленый.</div>
 </body>

Домашнее задание.

  1. Как известно, большинство браузеров по умолчанию добавляют небольшие поля пустого пространства по краям страницы. Вспомните из HTML, какой тег отвечает за эти поля и уберите их.
  2. Создайте на странице три колонки. Пусть средняя колонка будет «резиновой» ширины, а боковые — фиксированной.
  3. Пусть все колонки по высоте будут равны высоте окна браузера независимо от разрешения и размера экрана. Для этого вам понадобится свойство height, в которое надо будет вникнуть и хорошенько подумать, так как не все так просто с процентной высотой.
  4. Раскрасьте страницу, как показано в результате урока.
Классы← Содержание →Селекторы потомков
Учебник CSS