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

Здравствуйте, уважаемые читатели! Приступаем к изучению важнейшей темы основ CSS (каскадных таблиц стилей) в рамках рубрики «Учебник CSS», а именно отдадим должное роли селекторов и сегодня рассмотрим CSS селекторы тегов, классы (class) и идентификаторы (id).

Я уже писал о синтаксисе CSS и его базовых понятиях, в число которых входит и определение селектора. Все селекторы я бы разделил на две категории: относящиеся непосредственно к элементам html кода документа (селекторы тегов, атрибутов, классы и идентификаторы) и селекторы по способу применения (дочерние, контекстные, соседние и универсальные).

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

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

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

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

Например, для элемента абзаца p в соответствии с правилами CSS можно задать определенные свойства. В качестве связующего звена между документом html и файлом style.css и выступает селектор тега p.

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

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

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

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

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

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

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

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

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

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

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

Синтаксис для классов следующий:

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

Таким образом, если вы вдруг встретите в файле CSS запись с точкой впереди селектора, будете знать, что данные свойства присвоены элементам вебстраницы, атрибутами тегов которых является class. Да, чуть не забыл. Наименование классов должно заполняться только латинскими буквами, кириллица и любой другой алфавит не подходит. Они могут содержать символы дефиса «-» и подчеркивания «_». Теперь конкретный пример. В файле CSS прописаны свойства для определенного класса:

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

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

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

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

Итак, с помощью селектора class можно задать одинаковый набор свойств для совершенно различных тегов, которые описывают те или иные элементы в документе html. Надеюсь, я понятно описал алгоритм применения рассмотренных сегодня селекторов тегов, а, главное, вы ощутили принципиальную разницу между идентификаторами и классами. Новые материалы на тему CSS будут обязательно, поэтому, если мои публикации вызывают интерес, осуществляйте подписку через RSS-канал либо посредством электронной почты. Ну, а на десерт предлагаю вспомнить ставшие легендарными фразы из золотой сокровищницы кинематографа:

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Учебник CSS

8 отзывов

  1. Кристина

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

  2. Игорь

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

  3. Весельчак

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

  4. Игорь

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

  5. Nadezda Krimhizna

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

  6. Nadezda Krivohizina

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

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

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

  8. Игорь Горнов

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.