Псевдоклассы |
11 |
|
–Усиливают обычные селекторы.
–Позволяют выбирать элементы с учетом:
-состояния;
-расположения относительно других элементов.
Псевдоклассы |
12 |
|
Псевдоэлементы 13
–Создают виртуальные теги.
–Позволяют стилизовать их.
Псевдоэлементы 14
По умолчанию используйте ::
Для поддержки старых браузеров дублируйте вариант с :
Псевдоэлементы 15
16
CSS - свойства
Классификация свойств |
17 |
|
–Позиционирование
–Блочная модель
–Оформление текста
–Декоративные эффекты (фоны, тени и т.д.)
–Анимация и динамические эффекты
–Разное
Спецификации CSS
В отличие от языка HTML, у которого есть спецификация, у языка CSS спецификаций много.
Все спецификации CSS и их текущее состояние: https://www.w3.org/Style/CSS/current-work
18
одна
Каскадность |
19 |
|
–К одному и тому же элементу может примениться несколько CSS-правил.
–В этом случае свойства правил комбинируется.
Свойства тега <p>:
font-weight: bold color: red;
Комбинирование стилей с помощью классов20
– Свойства элемента можно комбинировать и явно с помощью
множественных классов.
Свойства первого тега <a>:
display: inline-block; background: blue;
Свойства второго тега <a>: display: inline-block; background: darkblue;
21
Конфликт свойств
Свойства тега <a>:
background: black; background: blue;
22
Специфичность и приоритеты
– Чтобы понять, кто кого переопределит используют понятия специфичности и приоритетов.
23
Специфичность и приоритеты
–Специфичность определяется по селектору.
–Если она одинаковая, то побеждает то правило, которое расположено ниже в коде.
–Чем проще селекторы, тем меньше проблем с расчётом специфичности.
Расчёт значения специфичности
24
Типы значений
–Абсолютные
–Относительные
–Ключевые слова
–Цвета
–Функции
–Произвольные строки
24
Абсолютные значения
26
Относительные значения
27
Ключевые слова
28
Цвета
29
Функции
30
Произвольные строки
31
CSS-директивы
– Специальные инструкции, которые начинаются с @
32
Стили кодирования
–Дело личных предпочтений.
–В рамках одного проекта придерживайтесь одного стиля.
–Придерживайтесь соглашений кодирования внутри команды.
33
34
Кодгайды
–Кодгайд от HTML Academy http://codeguide.academy/
–Кодгайд от GOOGLE https://google.github.io/styleguide/htmlcssguide.xml