ЦСС (CSS, Cascading Style Sheets) — это такой специальный текст. В нём мы описываем, как выглядят и ведут себя ХТМЛ‑элементы: абзацы, заголовки, картинки и прочие. Если упростить, то с помощью ХТМЛ мы описываем содержимое страницы (что показать), а с помощью ЦСС — его внешний вид (как показать).

ЦСС состоит из селекторов и объявлений. В объявлениях мы задаём свойства элемента, например, красный текст и курсив: color: red; font-style: italic. Селекторы указывают на элементы, к которым нужно применить описанные свойства.

Каскад помогает браузерам решить, какие свойства применить к элементу, когда они конфликтуют друг с другом:

p { color: red }
p { color: blue }

Абзац текста

Абзац получил синий цвет текста, потому что в каскаде побеждает последнее правило

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

<style>
  article {
    font-family: Bureausans;
    font-style: italic;
  }
</style>
​
<p>Просто абзац текста</p>
​
<article>
  <p class="lead">Въезд в статью</p>
  <p>Абзац внутри статьи</p>
  <p>Последний абзац статьи</p>
</article>

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

Въезд в статью

Абзац внутри статьи

Последний абзац статьи

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

<style>
  article {
    font-family: Bureausans;
    font-style: italic;
  }
  p {
    color: #999;
  }
  .lead {
    color: red;
  }
  p:last-child {
    border-bottom: 3px solid yellow;
    font-style: normal;
  }
</style>
​
<p>Просто абзац текста</p>
​
<article>
  <p class="lead">Въезд в статью</p>
  <p>Абзац внутри статьи</p>
  <p>Последний абзац статьи</p>
</article>

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

Въезд в статью

Абзац внутри статьи

Последний абзац статьи

Первый абзац стал серым, благодаря селектору p. Въезд в статью стал красным, потому что селектор .lead специфичнее селектора p. Второй абзац статьи унаследовал шрифт и курсив и получил серый цвет от селектора p. Последний абзац унаследовал курсив, но переопределил его в p:last-child

Если к свойству добавить модификатор !important оно пересилит все прочие свойства. Чтобы пересилить !important, придётся добавить новый !important в правило с большей специфичностью, или поставить селектор с такой же специфичностью и !important позже в коде.

Если приходится злоупотреблять этим модификатором, значит система стилей плохо продумана. Это плохой тон и мы любим шутить, что кое‑кто «написал очень важный код».

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

/* У элемента с таким классом не будет внешних отступов */
.noMargins {
  margin: 0 !important;
}
​
/* У элемента с таким классом текст всегда будет выравниваться по центру */
.alignCenter {
  text-align: center !important;
}
​
/* У списка с таким классом не будет левого отступа, несмотря на его вложенность и общие стили сайта */
.noIndent {
  padding-left: 0  !important;
  margin-left: 0 !important;
}

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы