CSS Правила и Селекторы

26.12.2020

Синтаксис CSS

CSS состоит из правил стиля, которые браузер интерпретирует и затем применяет к соответствующим элементам в вашем документе.

Каждое правило имеет три части: селектор и свойство, и значение.

Например, цвет заголовка может быть определен как:

<h1>Большой заголовок</h1>

h1 {
  color: orange;
}

Селекторы по Типу

Наиболее общие и легкие для понимания селекторы, это селекторы по типу. Эти селекторы выделяют типы элемента на странице.

Например, для выделения всех параграфов на странице:

<p>Один параграф</p>

p {
  color: red;
  font-size: 130%;
}

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

Селекторы идентификаторов позволяют вам изменять стиль элемента HTML, который имеет атрибут id, несмотря на его позицию в дереве документа. Пример селектора id:

<div id="intro">
  <p>Это параграф в секции intro</p>
</div>
<p>Это параграф не в секции intro</p>

#intro {
  color: white;
  background-color: gray;
}

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

Селекторы классов работают похожим образом. Главным различием является то, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам

В нижеуказанном примере, на оба параграфа, содержащих класс "first", будет влиять CSS:

<p class="first">Это параграф со стилевым классом</p>
<p>Это параграф без стилевого класса</p>
<p class="first">Это параграф со стилевым классом</p>
<p>Это параграф без стилевого класса</p>

.first {
  font-size: 200%;
}

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

Селекторы классов работают похожим образом. Главным различием является то, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам

В нижеуказанном примере, на оба параграфа, содержащих класс "first", будет влиять CSS:

<div id="intro">
<p class="first">Это параграф со <em>стилевым классом</em></p>
</div>
<p>Это параграф без стилевого класса</p>
<p class="first">Это параграф со стилевым классом</p>
<p>Это параграф без стилевого класса</p>

#intro .first em {
  color: pink;
  background-color: gray;
}

В результате, только выбранные элементы будут изменены:

Проверка знаний

#intro {
  background-_____: yellow;
}
p, h1, h2, h3, h4 {
  _____: black;
}

_ {
  сolor: ____
}
.test {
  _____ red;
}