Cелекторы CSS и правила



Для использования стилей CSS применяют правила.

Рассмотрим структуру правила:

Первым записывается селектор (H1), затем ставится фигурная скобка, далее прописывается свойство (color, font-size), двоеточие, значение свойства (blue, 16px), точка с запятой и все заканчивается фигурной скобкой. Все, что находится между фигурными скобками называется Блоком объявления стилей.


Селекторы по идентификатору


В качестве селектора используются имя html элемента, к которому мы хотим применить стиль.

Пример записи кода:

<style type="text/css"> P { font-family: arial, verdana, sans-serif; font-size: 12px; color:#000000; } </style> <p>Текст 12px, цвет черный, шрифт arial</p> <p>Текст 12px, цвет черный, шрифт arial</p>

РЕЗУЛЬТАТ:

Текст 12px, цвет черный, шрифт arial

Текст 12px, цвет черный, шрифт arial

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

Пример записи кода:

<style type="text/css"> P { font-family: arial, verdana, sans-serif; font-size: 12px; color:#000000; } p#blue{ color:blue; } </style> <p>Текст 12px, цвет черный, рифт arial</p> <p id="blue">Текст с идентификатором id</p>

РЕЗУЛЬТАТ:

Текст 12px, цвет черный, шрифт arial

Текст с идентификатором id


Селектор состоит из элемента p, разделителя # и имени идентификатора blue.

Запомните: на странице должен быть только один идентификатор id="blue, но каждый параграф может иметь свой идентификатор, например id="grey и заданный для него свой стиль.


Селекторы по идентификатору


Мы написали текст и нам нужно сделать так, чтобы два абзаца были синими, а два зелеными. Мы уже знаем, что id может быть на странице только один. Для этого применяется параметр class и ему присваивается имя.

В таблице стилей записываем правило - в качестве селектора используем параграф p и имя blue, разделителем будет (.).

<style type="text/css"> P { font-family: arial, verdana, sans-serif; font-size: 12px; color:#000000; } p#blue{ color:blue; } p.blue{ color:blue; } </style> <p>Текст 12px, цвет черный, шрифт arial </p> <p id="blue">Текст с идентификатором id </p> <p class="blue">Текст с классом (class) blue</p> <p class="blue">Текст с классом (class) blue</p>

РЕЗУЛЬТАТ:

Текст 12px, цвет черный, шрифт arial

Текст с идентификатором id

Текст с классом (class) blue

Текст с классом (class) blue


Подведем итог:

  • если все подобные элементы (например, все заголовки h2) должны иметь один стиль, то селектор состоит только из этого элемента (например, h2{color:black;})
  • если элемент (любой: абзац, заголовок...) должен отличаться от всех остальных, то ему присваивается идентификатор (id) и разделителем является знак решетки (#), например, p#blue{color:blue;} .
  • если же на странице будет несколько элементов с одинаковым стилем, то им присваивается класс (class), разделителем знак точки (.), например, p.blue{color:blue;}.
  • идентификатор имеет более высокий приоритет, чем класс. Поэтому, если для какого-либо элемента будет указан и класс, и идентификатор (что не противоречит принципам CSS), то применен будет стиль идентификатора.

Унифицированный селектор


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

<style type="text/css"> P { font-family: arial, verdana, sans-serif; font-size: 12px; color:#000000; } p.blue{ color:blue; } #red{ color:red; } .green{ color:green; } </style> <p>Текст 12px, цвет черный, шрифт arial </p> <p class="blue">Текст с классом (class) blue </p> <p class="red">Текст с классом (class) red</p> <p class="green">Текст с классом (class) blue</p>

РЕЗУЛЬТАТ:

Текст 12px, цвет черный, шрифт arial

Текст с классом (class) blue

Текст с классом (class) red

Текст с классом (class) green


Контекстный селектор


У нас на страничке есть текст, выделенный жирным шрифтом(strong). И нам понадобилось сделать текст, который выделен жирным шрифтом красного цвета. Впишем в таблицу стилей
p strong {color:red } названия объектов отделяются пробелом.

<link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> <p>Простой текст в абзаце</p> <p>Абзац написан и выделено <strong>слово</strong></p> <p>Абзац написан и выделено <strong>слово</strong> красным цветом</p>

РЕЗУЛЬТАТ:

Простой текст в абзаце

Абзац написан и выделено слово

Абзац написан и выделено словокрасным цветом


Группировка селекторов


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

h1, h2, h3{ color:green; }

Далее рассмотрим: Псевдоэлементы и псевдоклассы