CSS/Селекторы: различия между версиями

#* Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.

#* Универсальный селектор, который обозначается символом * и применяется для изменения необходимых свойств всех элементов на странице.

#* Селектор classКлассы, который применяетсяприменяются для элементов с атрибутом class и необходимым значением.

#* Селектор idИдентификаторы, который применяетсяприменяются для элементов с атрибутом id и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами ([[Книга JavaScript|JavaScript]]).

#* [[CSS/Псевдо-элементы и Псевдо-классы|Псевдо-классы]] предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со [[CSS/Гиперссылки|ссылками]] (:link, :visited, :hover, :active, :focus).

#* [[CSS/Псевдо-элементы и Псевдо-классы|Псевдо-элементы]] определяют стиль элементов, чётко не определённых в структуре документа (:first-letter, :first-line), а также позволяют генерировать и стилизировать несуществующее содержимое (:before, :after и свойство content). В CSS3 псевдо-элементы начинаются с двух двоеточий :: (::first-letter, ::first-line, ::before, ::after).

#* Селекторы атрибутов. Позволяют стилизировать элемент не только по значению тега, но и по значению атрибута. (a[attr])

#* Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента. (a b)

#* Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком. (a > b)

#* Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)

#* Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизируются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a ~ b)

Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <nowiki> <p> </nowiki>, причём оба вида будут постоянно чередоваться и часто повторяться.

Пример такой страницы -— интервью, в котором чередуются вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:

В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15 пикселей от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов чёрного цвета. Вы можете создавать любое количество классов для любых элементов страницы.