CSS: селекторы, классы и идентификаторы

Селектор в CSS — это имя, присвоенное стилю. Основу селекторов составляют так называемые HTML-селекторы, имена которых совпадают с именами элементов HTML. Например:

  body {
    font-family: arial;
    font-size: 1.2em;
  }

Имя селектора body совпадает с именем элемента <``body``>. В фигурных скобках указываются настройки стиля: тип шрифта font-family и его размер font-size. В данном случае он равен размеру стандартного шрифта, умноженному на 1.2.

Теперь все, что попадает внутрь <``body``>, т.е. все содержимое веб-страницы, будет отображаться в соответствии с указанным стилем:

Код веб-страницы полностью:

Добавив стиль элемента <``p``>

  p {
    color: navy;
  }

мы тем самым выкрасим абзацы документа в «морской» цвет

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

Пусть мы хотим создать отдельный стиль для аннотации документа: она должна отображаться курсивным шрифтом. Но стиль элемента <``p``> уже определен, а отдельных элементов специально для аннотации у нас нет. Здесь на помощь приходят классы.

Добавим в таблицу стилей следующий текст

  .abstract {
    font-style: italic;
  }

Он определяет класс abstract. Имя класса начинается с точки «.».

Теперь, чтобы оформить аннотацию в соответствии с этим стилем, нужно указать в используемых элементах атрибут класса class со значением abstract

Т.е. с помощью одного класса мы можем определить стиль одного или нескольких элементов (в данном случае <``p``> и <div>)

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

Определим следующий стиль идентификатора для даты date (имя идентификатора начинается с решетки «#»)

  #date {
    font-weight: bold;
  }

Теперь, указав для даты атрибут id="date",

получим

Существенно, что имена идентификаторов и классов, в отличие от имен элементов HTML, чувствительны к регистру.