CSS — селекторы

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

Что есть селектор в CSS? На самом деле  CSS-стиль имеет две основные части — селектор и блок объявления, который в свою очередь обрабатывает параметры, отвечающие за свойства форматирования — текст, цвета, размер и прочее. Пример можно увидеть чуть ниже:

h1 {
font-family: Arial, sans-serif;
color: #000000;
}

Фактически, выделенная жирным часть кода и есть селектор — используя его мы говорим веб-документу о том, что все, относящееся к h1 должно иметь такой-то шрифт, такого-то цвета. Нужно обозначить внешний вид текста h2? Опишите его следующим образом:

h2 {
font-family: Arial, sans-serif;
color: #000000;
}

и аналогично по совершенно любым параметрам документа. НО! Что делать, если, например, нужно использовать несколько стилей оформления текста h2? Для этого нам понадобится селектор классов. На примере это выглядит следующим образом: предположим, у нас имеется два текста шрифтом h2. Однако, один нужно сделать жирным, а второй — нет. Для этого подключим классы. Класс .bold описывает свойства текста, который нам нужно сделать жирным, а класс .classic будет описывать параметры текста, который нам делать жирным не нужно.

CSS класс

Напомню, что и тот и другой текст должны быть написаны h2. Воспользуемся этими заготовками:

Этот код отвечает за оформление жирного текста:

h2.bold {
font-family: Arial, sans-serif;
color: #000000;
font-weight: bolder
}

А вот этот код отвечает за оформление текста без жирного выделения.

h2.classic {
font-family: Arial, sans-serif;
color: #000000;
}

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

Что касается использования созданных селекторов в веб-документе — для их подключения используется конструкция в стиле:

<h2 class=»ваш-класс-оформления»>Сам текст</h>

Сразу уточню — параметры и тонкости использования указанных выше font-family — в следующей записи.
На этом видео представлены примеры работы описанных выше кодов. Как видите — все просто! И да — пример CSS-кода с простым шрифтом, жирным шрифтом и наклонным — ниже, или доступен по ссылке: http://codepen.io/Lavrynenko/pen/JEppqK

See the Pen JEppqK by Lavrynenko (@Lavrynenko) on CodePen.

А сейчас — спасибо за внимание! Делайте репост на свои страницы, не стесняйтесь задавать вопросы и следите за обновлениями!