root and css variables
соответствует корневому элементу дерева документа ( <html> )
однако его приоритет ( specificity ) выше, чем у селектора html
Это означает, что в случае конфликта значений CSS-атрибутов "победит" то, что объявлено в :root
:root {
background-color: yellow;
}
html {
background-color: green;
}Цвет подложки будет желтый
Глобальные CSS-переменные можно объявить в :root:
:root {
--dark-fone: black;
--light-fone: white;
--dark-text: #ccc;
--light-text: #333;
}Теперь их можно использовать в атрибутах стиля:
.dark {
background-color: var(--dark-fone);
color: var(--dark-text);
}
.light {
background-color: var(--light-fone);
color: var(--light-text);
}
pre {
padding: 10px 20px;
}Можно помотреть результат на странице:
<pre class="light">Have a nice day!</pre>
<pre class="dark">Good night!</pre>Однако CSS-переменные можно сделать и локальными:
.dark {
background-color: var(--dark-fone);
color: var(--dark-text);
}
.light {
background-color: var(--light-fone);
color: var(--light-text);
}
pre {
padding: 10px 20px;
--dark-fone: black;
--light-fone: white;
--dark-text: #ccc;
--light-text: #333;
}Теперь они будут действовать только в элементе <pre>:
<div class="light">Have a nice day!</div>
<div class="dark">Good night!</div>
<pre class="light">Have a nice day!</pre>
<pre class="dark">Good night!</pre>
Всемирная паутина
Пример
Flexbox Froggy
