ЦСС (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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.