Селекторы тегов, классы (class) и идентификаторы (id) в языке каскадных таблиц стилей CSS

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Сегодня мы в «Учебнике CSS» начинаем очередную тему и разберем селекторы тегов, идентификаторы и классы.

В дальнейшем мы рассмотрим и другие виды этих важнейших составляющих каскадных таблиц стилей (дочерние и контекстные, универсальный и соседние, а также селекторы атрибутов), кои вместе с указанными для них CSS-стилями соответствуют определенным элементам на странице.

CSS селекторы тегов, class (классы), id (идентификаторы)

В общем и целом данная тема не должна вызвать серьезных затруднений даже у начинающих за исключением небольших нюансов, ну а классификация селекторов обязательно будет в помощь, поскольку даст возможность систематизировать и оптимизировать знания.

Селекторы тегов

Наверное, вы уже знаете, какую роль играют теги в формировании структуры HTML документа, каждый из которых отвечает за отображение того или иного элемента вебстраницы. А внешний вид каждого элемента и его позицию на веб-страничке описывают свойства стилей.

Чтобы стили CSS корректно работали, необходимо каждый тег связать с нужным набором свойств (цвет, размер, фон). Из всех 3 способов присоединения стилей к HTML документу самым лучшим в современных условиях является метод связанных стилей, который предусматривает создание отдельного файла (на большинстве ресурсов он называется style.css).

Для примера пропишем определенные свойства тегу абзаца p в соответствии с установленными стандартами записи правил CSS. Тут в качестве одного из связующих звеньев между кодом HTML странички и файлом style.css как раз выступает селектор тега p:

p {
    text-align: justify; /* Выравнивание по ширине */
    color: blue; /* Синий цвет текста абзаца */
   }

При этом элемент (текстовый фрагмент), для которого прописан этот комплект свойств, при отображении в браузере будет выглядеть так:

Как видите, с помощью селектора p мы смогли сформировать внешний вид данного абзаца, то есть задать цвет текста и его расположение (текст выравнивается по обоим краям). Стили можно применять к любым тегам, которые являются содержимым контейнера body.

Идентификаторы (id) и классы (class)

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

Идентификаторы могут применяться к любому тегу в составе HTML-страницы, но чаще всего они добавляются к основному тегу блочной верстки div. Синтаксис использования идентификатора может быть осуществлен двумя способами, в одном из которых упоминается непосредственно тег:

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

Поэтому, чтобы записать в файле CSS стили для конкретного элемента, требуется придумать название для id селектора и поставить перед ним знак решетки #.

Для классов и идентификаторов можно использовать любые имена, однако, очень важно, чтобы они начинались не с цифры, а с символа латинского алфавита (кириллица и любой другой алфавит не подходит). Допускается также использовать знаки нижнего подчеркивания «_» и дефиса «-».

Поясню на примере. В HTML документе может встретиться тег div, который, как я уже говорил, является основой блочной верстки, где указано наименование идентификатора (id=»star»):

<div id="star">Контейнер DIV, который содержит уникальный ID с заданными свойствами</div>

И для этого идентификатора заданы свойства стилей (скажем, в файле style.css):

#star {
    color: green; /* Зеленый цвет текста */
    border: 2px solid; /* Параметры рамки, окружающей текст */
    background: #ffdead; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }

В браузере этот элемент приобретет следующий вид (пример 1):

Надеюсь, здесь все понятно. Если селектор id задает свойства CSS для уникального элемента, то классы (class) дают возможность определить стиль отображения для сколь угодно большого числа элементов в документе HTML. То есть, различным тэгам может соответствовать одно и то же название class, которому соответствуют определенные стили:

Совершенно очевидно, что для элементов, которым присвоены одинаковые классы, применяются одни и те же свойства. Синтаксис селектора для тега p в файле CSS:

Однако, чтобы не прописывать свойства одного и того же класса для разных элементов в CSS коде, как и в случае с идентификатором, название тега спереди опускается и запись для данного селектора начинается с точки:

Таким образом, запись с точкой впереди селектора в файле стилей означает, что данные свойства присвоены элементам вебстраницы, атрибутами тегов которых является class.

Теперь конкретный пример. В файле CSS прописаны свойства для определенного класса:

.one { /* Класс one */
    color: olive; /* Цвет текста */
    border: 1px solid; /* Параметры рамки, окружающей текст */
    padding: 15px; /* Поля вокруг текста */
   }

Который применим сначала к заголовку h3:

<h3 class="one">Заголовок h3 с примененными к нему свойствами стилей класса one</h3>

Он будет выглядеть так при отображении страницы (пример 2):

А затем и к абзацу:

<p class="one">Текст абзаца, формируемый посредством тега p с примененными к нему свойствами стилей класса one.</p>

Который будет иметь такой дизайн (пример 3):

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

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

Работа в интернете
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Иннокентий

    Как делать вложенные классы?

    Ответить
    1. Игорь Горнов автор

      Иннокентий, эта тема отдельной статьи.

      Ответить
  2. Nadezda Krivohizina

    Пост познавательный! Спасибо автору!

    Ответить
  3. Nadezda Krimhizna

    Спасибо за интересный материал!

    Ответить
  4. Весельчак

    Здравствуйте. Недавно закончил исследование по школе Твой Старт с аналитикой по 2500 сайтов их учеников за несколько лет. Возможно, Вам будет интересно почитать.
    http://smartnotes.ru/samouchiteli-i-treningi/shkola-tvoj-start-otzyv/
    Если нет – извините за беспокойство.

    Ответить
    1. Игорь Горнов автор

      К отзывам в интернете надо относиться с осторожностью, они вполне могут быть накручены. Хотя начальные знания они дают неплохие.

      Ответить
  5. Кристина

    Удачи Вашему блогу и только положительных комментариев)))

    Ответить
    1. Игорь Горнов автор

      Спасибо, Кристина.

      Ответить