Основы CSS - уровень правил

Тут поговорим о CSS свойствах вообще. Ранее мы рассматривали способы выделения HTML тегов в документе с помощью CSS селекторов и их комбинаций . Теперь попробуем опустится еще на один уровень ниже. На уровне синтаксиса, зайдем внутрь фигурных скобок. С примерами таких правил как background, color, visibility, opacity на их примере разберемся о том как работают и чем отличаются initial и inherit.

Синтаксис

Синтаксис CSS правил значительно проще и однозначнее селекторов, так как на уровне правил мы просто задаем значения каких либо свойств поддерживаемых браузером. Полный перечень всех свойств всегда можно найти в справочниках например htmlbook.ru или w3schools . Чтобы написать CSS правило достаточно написать его название и через двоеточие его значение. Пример

1

background: linear-gradient(to bottom, #04050a 0%,#131f51 60%,#48577D 100%);

Это довольно большое правило, но на данном этапе важно понять, что это пара ключ значение, при том что значение может быть большим. Название тут “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” разделив их слешом. Например можно написать:

1

background: red no-repeat, green repeat-y;

И эта запись будет эквивалентна:

1
2

background-color: red, green;
background-repeat: no-repeat, repeat-y;

Первая запись более короткая но в тоже время хуже читается. В результате у нас получится 2 слоя фона красного и зеленого цвета, у картинка на первом слое не будет повторяться, а на втором слое она будет дублироваться только по “y” координате. Это довольно бессмысленное правило взятое для примера возможностей синтаксиса правил.

Сами правила внутри селектора разделяются “;” по этому для последнего правила в селекторе ставить точку с запятой не обязательно.

Общие значения

Если говорить о непосредственно самих значениях то можно выделить те, что есть у всех СSS свойств.

initial

Значение initial говорит о том что нужно использовать значение указанное в браузере по умолчанию. Например:

1

a { color: initial }

Будет интерпретироваться как - “использовать такой цвет ссылок который указан разработчиками браузера по умолчанию. Интересно что на заре верски было очень модно настраивать цвета ссылок прямо в браузере, тем самым разрушая оригинальный дизайн страниц. Но время прошло и всем стало понятно, что это порочная практика. По этому значение initial сейчас практически не используется на практике.

Нужно заметить, что значения по умолчанию могут разнится для разных браузеров. В тоже время, у верстальшиков стоит задача сделать страницу, которая выглядит одинаково во всех браузерах. Поэтому существуют различные техники нормализации CSS. Задача нормализатора CSS сводится к тому чтобы привести стили к общему виду, сделать так чтобы один и тот же HTML код выглядел одинаково во всех браузерах. Во основном это достигается выставлением всех значений в ноль.

Это вполне стандартная задача и она уже решена в различных библиотеках. Например та же Normalize.css которой пользуются многие крупные компании. В статье про вставку подробно написано как использовать внешние внешние ресурсы вот URL который можно использовать для вставки нормализатора в свою страницу “ https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.css"

inherit

Также в CSS для любого правила можно “посмотреть на верх”. Это значит, что можно ссылаться на значение того же правила для родительского элемента с помощью значения inherit для многих правил. Рассмотрим пример:

1
2
3

span {
    color: blue; 
}

1
2
3

.extra span {
    color: inherit; 
}

Это будет интерпретировано, как - “Выделить все теги span синим цветом, затем все те же теги span но уже вложенные в теги с классом extra должны использовать для окраски текста цвет родительского элемента.

Интересно, что с помощью этого значения можно строить длинные цепочки наследования значений. На этом значении построено поведение по умолчанию например значения свойства visibility, которое скрывает сам блок и все внутреннее содержимое блока за счет наследования, но в отличии от того же opacity (прозрачность) этим наследованием можно управлять.

То есть все элементы по умолчанию наследуют значение visibility родителя, как только хоть у одного элемента в цепочке оно становится равным hidden все дочерние элементы этого блока начинают его наследовать и тоже пропадают.

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

Но в тоже время есть свойство opacity, наследованием которого управлять нельзя, тут существует жесткое правило, что прозрачность дочерних элементов относительна родительских и при этом не может быть больше единицы. По этому прозрачность вложенных элементов может только снижаться.

По этому существуют трюки как обойти эти ограничения и их объяснение выходит за границу “основ CSS”

Далее попробуем рассмотреть простые случаи пересечения правил и выставления их приоритета