Основы CSS - уровень правил
Тут поговорим о CSS свойствах вообще. Ранее мы рассматривали способы выделения HTML тегов в документе с помощью CSS селекторов и их комбинаций . Теперь попробуем опустится еще на один уровень ниже. На уровне синтаксиса, зайдем внутрь фигурных скобок. С примерами таких правил как background, color, visibility, opacity на их примере разберемся о том как работают и чем отличаются initial и inherit.
Синтаксис
Синтаксис CSS правил значительно проще и однозначнее селекторов, так как на уровне правил мы просто задаем значения каких либо свойств поддерживаемых браузером. Полный перечень всех свойств всегда можно найти в справочниках например htmlbook.ru или w3schools . Чтобы написать CSS правило достаточно написать его название и через двоеточие его значение. Пример
|
|
Это довольно большое правило, но на данном этапе важно понять, что это пара ключ значение, при том что значение может быть большим. Название тут “background”, а значение “linear-gradient(to bottom, #04050a 0%,#131f51 60%,#48577D 100%)”.
Важно заметить, что многие CSS правила зачастуют дублируют другие. Это так называемые составные правила. Самый яркий пример это тот же самый " background" в значении этого правила можно сразу определить “background-attachment”, “background-color” “background-image” “background-position” “background-repeat” указав их значения последовательно через пробел, но и это еще не все в 3 версии стандарта появилась возможность иметь несколько слоев фона с разделителем через запятую, а также возможность задать “background-size” после “background-position” разделив их слешом. Например можно написать:
|
|
И эта запись будет эквивалентна:
|
|
Первая запись более короткая но в тоже время хуже читается. В результате у нас получится 2 слоя фона красного и зеленого цвета, у картинка на первом слое не будет повторяться, а на втором слое она будет дублироваться только по “y” координате. Это довольно бессмысленное правило взятое для примера возможностей синтаксиса правил.
Сами правила внутри селектора разделяются “;” по этому для последнего правила в селекторе ставить точку с запятой не обязательно.
Общие значения
Если говорить о непосредственно самих значениях то можно выделить те, что есть у всех СSS свойств.
initial
Значение initial говорит о том что нужно использовать значение указанное в браузере по умолчанию. Например:
|
|
Будет интерпретироваться как - “использовать такой цвет ссылок который указан разработчиками браузера по умолчанию. Интересно что на заре верски было очень модно настраивать цвета ссылок прямо в браузере, тем самым разрушая оригинальный дизайн страниц. Но время прошло и всем стало понятно, что это порочная практика. По этому значение initial сейчас практически не используется на практике.
Нужно заметить, что значения по умолчанию могут разнится для разных браузеров. В тоже время, у верстальшиков стоит задача сделать страницу, которая выглядит одинаково во всех браузерах. Поэтому существуют различные техники нормализации CSS. Задача нормализатора CSS сводится к тому чтобы привести стили к общему виду, сделать так чтобы один и тот же HTML код выглядел одинаково во всех браузерах. Во основном это достигается выставлением всех значений в ноль.
Это вполне стандартная задача и она уже решена в различных библиотеках. Например та же Normalize.css которой пользуются многие крупные компании. В статье про вставку подробно написано как использовать внешние внешние ресурсы вот URL который можно использовать для вставки нормализатора в свою страницу “ https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.css"
inherit
Также в CSS для любого правила можно “посмотреть на верх”. Это значит, что можно ссылаться на значение того же правила для родительского элемента с помощью значения inherit для многих правил. Рассмотрим пример:
|
|
|
|
Это будет интерпретировано, как - “Выделить все теги span синим цветом, затем все те же теги span но уже вложенные в теги с классом extra должны использовать для окраски текста цвет родительского элемента.
Интересно, что с помощью этого значения можно строить длинные цепочки наследования значений. На этом значении построено поведение по умолчанию например значения свойства visibility, которое скрывает сам блок и все внутреннее содержимое блока за счет наследования, но в отличии от того же opacity (прозрачность) этим наследованием можно управлять.
То есть все элементы по умолчанию наследуют значение visibility родителя, как только хоть у одного элемента в цепочке оно становится равным hidden все дочерние элементы этого блока начинают его наследовать и тоже пропадают.
Благодаря этому эффекту можно далее в цепочке переопределять это свойство раз за разом, скрывать элементы, а затем показывать части дочерних, и быть уверенным, что все дочерние элементы последуют за родителем.
Но в тоже время есть свойство opacity, наследованием которого управлять нельзя, тут существует жесткое правило, что прозрачность дочерних элементов относительна родительских и при этом не может быть больше единицы. По этому прозрачность вложенных элементов может только снижаться.
По этому существуют трюки как обойти эти ограничения и их объяснение выходит за границу “основ CSS”
Далее попробуем рассмотреть простые случаи пересечения правил и выставления их приоритета