Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Сегодня мы в «Учебнике CSS» начинаем очередную тему и разберем селекторы тегов, идентификаторы и классы.
В дальнейшем мы рассмотрим и другие виды этих важнейших составляющих каскадных таблиц стилей (дочерние и контекстные, универсальный и соседние, а также селекторы атрибутов), кои вместе с указанными для них CSS-стилями соответствуют определенным элементам на странице.
В общем и целом данная тема не должна вызвать серьезных затруднений даже у начинающих за исключением небольших нюансов, ну а классификация селекторов обязательно будет в помощь, поскольку даст возможность систематизировать и оптимизировать знания.
Селекторы тегов
Наверное, вы уже знаете, какую роль играют теги в формировании структуры 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):
Надеюсь, я понятно описал алгоритм применения рассмотренных сегодня селекторов, а главное, вы ощутили принципиальную разницу между идентификаторами и классами.
Как делать вложенные классы?
Иннокентий, эта тема отдельной статьи.
Пост познавательный! Спасибо автору!
Спасибо за интересный материал!
Здравствуйте. Недавно закончил исследование по школе Твой Старт с аналитикой по 2500 сайтов их учеников за несколько лет. Возможно, Вам будет интересно почитать.
http://smartnotes.ru/samouchiteli-i-treningi/shkola-tvoj-start-otzyv/
Если нет – извините за беспокойство.
К отзывам в интернете надо относиться с осторожностью, они вполне могут быть накручены. Хотя начальные знания они дают неплохие.
Удачи Вашему блогу и только положительных комментариев)))
Спасибо, Кристина.