1.2. CSS. Более подробно
Доброго времени суток! В предыдущей статье (1.1. HTML. Начало) был упомянут CSS, и сейчас, как и обещал, мы более подробно разберем, что это, и зачем.
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — это некий язык, с помощью которого можно описать внешний вид web-страницы, однако этот язык не является языком программирования. По расшифровке названия можно понять, что где-то присутствуют каскадные структуры или принципы. Сразу напрашивается, что может быть просто сам CSS-код выглядит каскадно? Да, это отчасти так, как и любой программный код с вложенностью, но суть именно в каскадном принципе применения стилей. Напомню, что каскад — это изначально архитектурное понятие, и в качестве примера отлично подойдет каскад «Шахматная гора», находящийся в Петергофе:
Внимание тут стоит обратить именно на структуру основного элемента, который похож на ступенчатую горку, поверхность которой стилизована под шахматную доску. Именно сама ступенчатая структура — это и есть каскад. Так же и в CSS.
Ступенчатым образом в CSS применяются стили к HTML-документу. Они применяются как бы один за другим, в порядке возрастания приоритета, как ступени каскада, снизу вверх, где каждая последующая ступень выглядит приоритетнее предыдущей. В CSS, приоритет обусловлен различными факторами (в том числе и порядковыми), о которых мы поговорим чуть позже, но что стоит отметить сейчас, так это то, что те стили, которые имеют больший приоритет, перезапишут своими свойствами те же свойства менее приоритетных стилей. А сейчас, давайте начнем с общих принципов — посмотрим на картинку:
Здесь аббревиатура CSS развернута задом наперед, что позволяет лаконично изобразить то, что понимается под этими тремя буквами.
The Sheet — это файл с расширением «css», содержащий код стилей. Стили могут быть описаны и без этого файла, в HTML-атрибуте «style» какого-то HTML-тега или между открывающим и закрывающим HTML-тегом «style» (между <style> и </style>), но это менее распространенная практика.
The Styles — это сами стили. Стили состоят из селектора (selector, от англ. select — выбирать), и закрепленного за ним, с помощью фигурных скобок, набора CSS-свойств и их значений. На картинке фигурирует селектор «div», это значит, что в HTML-документе, к которому будут подключены эти стили, текст, содержащийся в тегах «div», будет красного цвета, т. е. селектор «селектит» (выбирает) элементы «div», и применяет к ним CSS-свойства.
Есть два замечания:
- В контексте « … т. е. селектор «селектит» (выбирает) элементы «div» … », я употребил понятие элемента, хотя до этого везде писал про теги. Тут нет ошибки, и разница между тегами и элементами есть. Тег — это конструкция, с помощью которой мы описываем элемент, который начнет существовать только тогда, когда в браузере, или еще где-то, выполнится HTML-код, содержащий этот тег. Только к элементам можно применять стили, так как браузер (или другая среда, в которой можно запускать web-страницы), создав элемент, применяет к нему стили, которые могут быть описаны различным способом, в различных местах, и по самому HTML-коду (и подключенным к нему стилям) далеко не всегда можно определить, какие CSS-свойства будут применены к тому или иному элементу, так как какие-то стили могут быть подгружены с других ресурсов (а там стили могут поменяться в любой момент), могут быть подгружены через JavaScript (т. е. стилей не будет, пока JavaScript-приложение не загрузится и в нем не отработает необходимый функционал), или могут быть встроены на стороне пользователя с помощью какого-то браузерного расширения (о котором мы никогда не узнаем) и т. д. Да и сама структура страницы может создаваться через JavaScript, что окончательно убеждает в том, что применять стили можно только на уровне элементов, ибо HTML-теги могут содержаться внутри JavaScript-приложения, и их не существует на странице до тех пор, пока это JavaScript-приложение не загрузится, хотя CSS-стили уже могут быть проинициализированными.
- В контексте « … это значит, что в HTML-документе, к которому будут подключены эти стили, текст, содержащийся в тегах «div», будет красного цвета … », сказано, что текст будет красного цвета, однако, это CSS-свойство «color» может быть переопределено другими стилями для всех div-элементов сразу, или для каких-то конкретных. Для конкретных элементов, а не для всех, можно переопределять CSS-свойства с помощью каскадных свойств CSS.
The Cascade — это каскад CSS-стилей, т. е. все примененные к элементу стили в порядке их приоритета (специфичности), с дополнением или переопределением менее специфичных более специфичными. Продублирую код из картинки:
div {
color: red;
}
div a {
color: black;
}Давайте тогда сразу соберем полный пример, вместе с HTML-кодом, чтобы посмотреть на практике, как работают каскадные свойства CSS.
Перейдите на сайт https://jsfiddle.net/, и в прямоугольную область для HTML (левая верхняя), вставьте этот код:
<div>
Текст
<a>Текст 2</a>
</div>А в область для CSS (правая верхняя), вставьте это (пока просто стили для «div»):
div {
color: red;
}И нажмите на кнопочку с треугольником «Run», слева вверху. Код выполнится, и будет виден результат в прямоугольной области справа внизу:
Как видно, весь текст красного цвета. Давайте теперь добавим стили для «div a», чтобы пронаблюдать каскадные принципы работы CSS. Замените содержимое области для CSS на это:
div {
color: red;
}
div a {
color: black;
}И теперь мы видим другой результат:
«Текст 2» стал черного цвета, так как он находится в теге «a», с помощью которого был создан элемент, в котором, с помощью CSS-селектора «div a», было переопределено CSS-свойство «color» со значения «red» на значение «black», на рисунке (продублирую тот участок ниже) переопределение показано перечеркиванием, а приоритетность — изменением порядка следования.
По такому же принципу, это делается в консоли разработчика, в браузере (чтобы попасть в эту консоль, нужно нажать F12 на клавиатуре, работает в браузерах на базе Chromium):
Значение «red» изначально было применено с помощью CSS-селектора «div», так как тег, и, впоследствии, элемент, в котором находится «Текст 2» (тег и элемент «a»), является дочерним по отношению к тегу и элементу «div», т. е. произошло наследование CSS-свойств.
Представленный выше пример демонстрирует тот самый каскадный принцип CSS, где с помощью различных селекторов можно дополнять и переопределять стили у элементов.
А теперь, давайте взглянем на порядковый приоритет. Посмотрим на пример:
div a {
color: red;
}
div a {
color: green;
}На примере выше, два одинаковых селектора идут друг за другом. Будет ошибка? Или просто будет отдан приоритет какому-то определенному? Давайте посмотрим:
Как видно на скриншоте, приоритет был отдан стилю, который должен делать цвет текста зеленым, т. е. приоритетнее тот, стиль, который был объявлен позже (в коде он ниже, то есть объявлен позже, и в каскаде, выделенном оранжевой рамкой, он выше, так как приоритетнее), однако если воспользоваться ключевым словом «!important», можно добавить приоритета отдельному свойству стиля, даже если сам стиль находится в низком приоритете. Посмотрим:
И теперь мы видим, что сам стиль все так же ниже приоритетом, а вот его свойство, задающее красный цвет, одержало победу, и цвет текста стал красным.
В принципе, мы рассмотрели достаточное количество аспектов CSS, чтобы появилась пища для размышлений, чтобы появились вопросы (которые Вы всегда можете задать в сообщения сообщества https://vk.com/webdevdiary ), и, возможно, чтобы появилось желание углубиться в эту тему, что и будет сделано в дальнейших статьях.
И еще раз подчеркну, что запись «div a» не есть каскад, это лишь селектор, который работает по каскадному принципу. А сам каскадный принцип — это принцип применения к элементам стилей из разных источников, с помощью выстраивания приоритетов как среди самих селекторов, так и среди отдельных свойств, с помощью ключевого слова «!important». В наших случаях, сначала, для элемента «a», у селектора «div a» оказался больший приоритет, чем у селектора «div», так как селектор «div a» трактуется, как «для элемента «a», который находится внутри элемента «div», то есть это просто более точное (специфичное) описание элемента, чем просто что-то, что находится внутри элемента «div», а потом, в другом случае, сработал порядковый приоритет между стилями с одинаковой специфичностью и потом мы повысили приоритет отдельного свойства. В общем, такие приоритеты — один стиль выше, важнее, специфичнее другого. Это как лестница, у которой одна ступень выше другой, это как каскад в Петергофе…
Увидимся позже, и виной тому будет JavaScript!
Следующая статья цикла — 1.3. JavaScript. Начало программирования
Предыдущая статья цикла — 1.1. HTML. Начало
Содержание