| Основы_CSS |
| 1 | Конспект: основы CSS CSS-правила CSS — это язык для оформления структурированных документов, например, HTML- документов. Синтаксис — это плоский список CSS-правил. CSS-правило состоит из селектора и перечня свойств и их значений: селектор { свойство: значение; свойство: значение; } Для комментариев в CSS используются символы /* и */. Селекторы Селектор находится в начале CSS-правила, до фигурных скобок, и определяет, к каким HTML-элементам применятся свойства и значения из правила. |
| 2 | .feature-kitten { padding-top: 60px; } Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам. Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class. h1 { color: red; } .info { color: blue; } На странице может быть несколько списков, и стили применятся ко всем спискам, даже к тем, которые вы менять не хотели. |
| 3 | Чтобы избежать таких ситуаций, лучше не использовать селекторы по тегам или использовать их как можно реже. Если у CSS-правил отличаются только селекторы, а свойства и значения одинаковые, то их можно сгруппировать через запятую. Также можно комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например: nav a {...} .menu ul {...} .post .title {...} Свойства и значения Список свойств и значений находится внутри фигурных скобок CSS-правила. |
| 4 | Свойство определяет, какую характеристику внешнего вида мы хотим изменить, а значение — как именно. .feature-kitten { padding-top: 60px; } Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице. Наследование Наследование в CSS — это механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам. Стили, присвоенные одному элементу, наследуются всеми потомками (вложенными элементами), но только в том случае, если они где-то явно не переопределены. |
| 5 | Составные свойства В CSS есть обычные свойства, управляющие одним параметром отображения, и есть составные свойства, управляющие одновременно несколькими параметрами. Например, свойство font. Оно задаёт сразу шесть параметров: размер и название шрифта, высоту строки и некоторые другие. font: 16px/26px "Arial", sans-serif; Если значение обычного свойства не было задано в составном, то браузер при «расшифровке» использует исходное значение этого свойства. |
| 6 | Типы значений: абсолютные и относительные Абсолютные единицы измерения привязаны к настоящим физическим размерам и связаны между собой жёсткими пропорциями. Пиксели, px, используют чаще всего, остальные абсолютные единицы почти не применяют. Примеры абсолютных единиц измерения: font-size: 1cm; font-size: 10mm; font-size: 38px; Относительные единицы измерения описывают значения, которые зависят от других значений. |
| 7 | Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты. Стили по умолчанию Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление. Например, у списка <ul> есть отступы и маркеры. |
| 8 | Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально. Их можно переопределить или сбросить, задав другие значения свойств элементу. Каскадирование Когда браузер отрисовывает страницу, он должен определить итоговый вид каждого HTML-элемента. Для этого он собирает все CSS-правила, которые относятся к каждому элементу, ведь на элемент могут влиять сразу несколько CSS-правил. |
| 9 | Механизм комбинирования стилей из разных источников в итоговый набор свойств и значений для каждого тега называется каскадностью. Например, есть такой элемент в разметке: <p class="beloved-color">Зелёный - мой любимый цвет</p> Заданные стили: .beloved-color { color: green; } Браузерные стили: margin: 1em 0; Итоговые стили: color: green; margin: 1em 0; Конфликт свойств На один элемент могут действовать несколько CSS-правил. |
| 10 | Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт. Например: ul { list-style: disc; } .blog-navigation ul { list-style: none; } Браузеру нужно как-то решать, какими будут итоговые значения конфликтующих свойств. Конфликт разрешается максимум за три шага. Если на текущем шаге определиться не удалось, то выполняется следующий шаг. Вот эти шаги: Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства. |
| … |
Комментарии