CSS содержит правила стиля, которые интерпретируются браузером, а затем применяются к соответствующим элементам вашего документа. Правило стиля состоит из трех частей:

  • Селектор – это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например, <h1> или <table> и т.д.
  • Свойство – это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
  • Значение – задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.

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

селектор { свойство: значение }
Синтаксис селекторов в CSS, селектор, свойство, значение, css, пример правила css

Пример. Вы можете задать границу таблицы следующим образом:

table {
  border: 2px solid #FF8C00;
}

Здесь синтаксис селектора такой: table – это селектор, а border – свойство, а 2px solid #FF8C00 – значение этого свойства.

Вы можете задавать селекторы различными способами, как Вам будет удобно. Ниже представлены виды селекторов.

Стандартные селекторы

Это тот же самый селектор, который Вы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам первого уровня:

h1 {
  color: #8B4513;
}

Универсальные селекторы

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

* {
  color: #808080;
}

Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.

Селекторы потомков или вложенные селекторы

Предположим, Вы хотите применить правило стиля к определенному элементу только тогда, когда оно находится внутри определенного элемента, то в этом Вам помогут вложенные селекторы или селекторы потомков. Как показано в следующем примере, правило стиля будет применяться к элементу <em> только тогда, когда оно находится внутри тега <ul>.

ul em {
  color: #CD5C5C; 
}

Селекторы класса

Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.

.blue {
  color: #0000FF; 
}

Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом class="blue". Вы можете сделать селектор класса немного более конкретным. Например:

h1.blue {
  color: #0000FF; 
}

Это правило отображает содержимое в синем цвете только для элементов <h1> с атрибутом class="blue".

Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:

<p class="center bold">
  Этот абзац будет оформлен классами center и bold.
</p>

ID селекторы

Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

#blue {
  color: #0000FF; 
}

Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id="blue". Вы можете сделать id селектор немного более конкретным. Например:

h1#blue {
  color: #0000FF; 
}

Это правило отображает содержимое в синем цвете только для элементов <h1> с атрибутом id="blue".

Истинная мощность id селекторов – это когда они используются в качестве основы для селекторов-потомков, например:

#blue h2 {
  color: #0000FF; 
}

В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id="blue".

Дочерние селекторы

Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:

body > p {
  color: #0000FF; 
}

Это правило будет отображать все абзацы в синем цвете, если они являются прямым дочерним элементом <body>. Другие абзацы, помещенные внутри других элементов типа <div> или <td>, не будут иметь никакого эффекта этого правила.

Соседние селекторы

HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:

strong + em {
  color: #0000FF; 
}

Это правило будет отображать содержимое тега <em> в синем цвете, если он идет после элемента <strong>. Другие теги <em>, идущие не после тега <strong>, не будут иметь никакого эффекта этого правила.

Селекторы атрибутов

Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:

input[type = "text"] {
  color: #0000FF; 
}

Преимущество использования селекторов атрибутов заключается в том, что элемент <input type = "submit" /> не изменяется, а цвет применяется только к нужным текстовым полям.

Для селектора атрибутов применяются следующие правила:

  • p[lang] – выбирает все элементы абзаца с атрибутом lang.
  • p[lang="ru"] – выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
  • p[lang~="ru"] – выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
  • p[lang|="ru"] – выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».

Несколько правил стиля

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

h1 {
  color: #00CED1;
  letter-spacing: .2em;
  text-transform: lowercase;
  margin-bottom: 2em;
  font-weight: 700;
}

Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.

Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.

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

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

h1, h2, h3 {
  color: #00CED1;
  letter-spacing: .2em;
  text-transform: lowercase;
  margin-bottom: 2em;
  font-weight: 700;
}

Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.

Вы можете группировать различные id селектора вместе, как показано ниже:

#header, #content, #footer {
  position: absolute;
  width: 300px;
  left: 250px;
}
Источник: CSS - Syntax.

Оглавление