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

Идентификаторы (id селекторы), весьма схожи с классами, и отличаются тем, что идентификатор может иметь одно единственное уникальное имя во всем документе.

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

Синтаксис применения идентификатора следующий:

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

При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора. Оно должно начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах идентификатора недопустимо.

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

<html>
 <head>
  <meta charset="utf-8">
  <title>Идентификаторы</title>
  <style>
   #primer {
    position: absolute; /* Абсолютное позиционирование */
    left: 160px; /* Положение элемента от левого края */
    top: 50px; /* Положение от верхнего края */
    width: 225px; /* Ширина блока */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body> 
  <div id="primer">
  Текст примера!
  </div>
 </body> 
</html>

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

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

Рассмотрим пример:

P#Primer1 { text-align: center; }

P#Primer2{ text-align: left; }

Вызов из HTML будет выглядеть таким образом:

<p id="Primer1"> Текст выровнен по центру </p>
<p id="Primer2"> Текст выровнен по левой стороне </p>
<p> текст отформатирован по умолчанию </p>

2023-11-18 00:30 Самоучитель по CSS