Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Глава 5.1. Кастомные свойства
Вступление Спецификация CSS Custom Properties for Cascading Variables была создана в 2012 и стала рекомендацией в конце 2015 года. Сегодня кастомные свойства поддерживаются в 94% браузеров. Custom properties, кастомные свойства, пользовательские свойства, каскадные переменные, CSS-переменные — всё это название одного и того же. Мы будем использовать термин «кастомные свойства» — он ближе к спецификации и позволяет отделить их от переменных в CSS-препроцессорах, которые работают иначе. Обычно в больших проектах имеется один большой CSS-файл, в котором множество значений дублируются. Например, сайт может иметь цветовую схему и повторно использовать несколько цветов по всему сайту. Обычно это белый, черный, проектные цвета, серые цвета для теней. Изменение таких цветов может быть очень трудным и подвержено ошибкам, так как использование этих цветом разбросано по всему CSS-файлу. Автозамена тоже не всегда может сработать правильно — один и тот же цвет может быть написан в разных нотациях: #000, #000000, rgb(0, 0, 0), rgba(0, 0, 0, 1). Кастомные свойства позволяют быстро и удобно повторно использовать значения CSS-свойств. Определение Именовать кастомное свойство можно произвольно, но лучше делать это информативно — это облегчает чтение больших файлов. Имя любого кастомного свойства начинается с двух дефисов: :root { --basic-color: #06c; --accent-color: #006;}Псевдокласс:root находит корневой элемент дерева документа. В HTML:root находит элемент <html> и идентичен селектор по тегу html, но его специфичность выше. В SVG такой селектор выберет корневой элемент <svg>. Обратите внимание, что кастомные свойства чувствительны к регистру. Например, это два разных кастомных свойства: :root { --basic-color: #06c; --BASIC-COLOR: #000;}Значением кастомного свойства может быть любое значение CSS-свойства: #000, cover, 20px, 1.5, flex, 0 auto. Использование После определения кастомного свойства, мы можем начать его использовать с помощью функции var(). .about { background-color: var(--basic-color); color: var(--accent-color);}Функция var() может использоваться вместо любой части значения в любом свойстве элемента. Использовать его в качестве имени свойства, селектора или где угодно, кроме значения CSS-свойства — нельзя. Если в CSS-свойстве использовать кастомное свойство с неподходящим значением, то CSS-свойство будет работать с начальным значением этого CSS-свойства.
В этом примере <p> будет иметь прозрачный цвет (начальное значение background-color), а не красный фон. Алгоритм работы здесь такой: первый фон переопределится вторым фоном, но так как второй фон имеет неправильное значение 20px, то значением для фона станет значение по умолчанию. Каскадирование и наследование Кастомные свойства — это обычные свойства, поэтому они могут быть объявлены для любого элемента. На них влияют такие же правила наследования и каскада, как и на обычные свойства. Кастомное свойство можно объявить в корневом элементе и такое свойство будет наследоваться элементам во всём документе. Его значение можно использовать с помощью var(): :root { --header-color: #06c;} h1 { background-color: var(--header-color);}Если пользовательское свойство имеет одинаковое имя и объявляется несколько раз, то стандартные правила каскада помогают разрешить конфликт. :root { --color: blue;} div { --color: green;}.alert { --color: red;}<body> <p>Станет синим, так как унаследован от корневого элемента</p> <div>Станет зеленым, так как цвет взят у селектора `div`</div> <div class="alert"> Этот текст станет красного цвета <p>И даже этот текст будет красного цвета, так как он будет унаследован от `.alert`</p> </div></body>Значение по умолчанию Когда мы используем кастомное свойство, мы также можем установить значение по умолчанию. Таким образом, если такое свойство не определено в месте использования, оно вернётся к значению по умолчанию. :root { /* удалили кастомное свойство --basic-color */} h1 { color: var(--basic-color, rebeccapurple);}<h1> Заголовок пурпурного цвета, так как `--basic-color` не определён</h1>Динамическое изменение Динамическое измение — это одно из преимуществ использования кастомных свойств. Дело в том, что они живут постоянно, а не только в вашем коде во время разработки. Если изменить значение кастомного свойства, то оно изменится для всех экземляров. :root { --basic-color: #fff; --accent-color: #000;} h1 { background-color: var(--basic-color); color: var(--accent-color);}.about-header { background-color: var(--basic-color); color: var(--accent-color);}.footer { background-color: var(--basic-color); color: var(--accent-color);}После первого определения можно изменить значение кастомных свойств, например с помощью JavaScript. В этом случае цвет поменяет сразу несколько элементов: h1,.about-header и.footer.
Это наглядный пример того, как сделать светлую и тёмную тему сайта. Нужно всего лишь переопределить значение кастомного свойства и весь сайт перекрасится динамически.
Теория~ 5 минут Глава 6.1.0. Введение Что такое сетка? Сеткой или раскладкой обычно называют взаимное расположение крупных визуальных блоков на странице. Можно мысленно разделить макет на непересекающиеся прямоугольники. Сначала вы получите самые крупные области. Потом эти крупные области можно разделить на области поменьше и так далее до мельчайших прямоугольников, которые выделяют отдельные слова или элементы страницы. Вся страница будет выглядеть как набор вложенных в друг друга прямоугольников, от самых крупных, до самых мелких:
К сетке относят самые крупные области макета, примерно до 3 уровня вложенности. Более мелкие блоки, такие как карточки товаров, номера страниц в переключателе, пункты меню, ссылки на страницы социальных сетей и так далее — это уже мелкие блоки, они относятся к микросеткам. Граница в разделении на сетки и микросетки весьма условная. Есть два ключевых признака, по которым можно их отличить. Это важно научиться делать поскольку «правила игры» при работе с сетками и микросетками отличаются.
|
||||||
|
|
Последнее изменение этой страницы: 2021-01-14; просмотров: 213; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.23.127.197 (0.006 с.) |
Схема страницы
