Введение в CSS

Селекторы

p {...} /* по тегу */
.title {...} /* по классу */
p .warning {...} /* тег с классом */
#promo {...} /* по id */
h1 #chapter1 {...} /* тег с id */
.title a {...} /* тег внутри тега с классом */
.title . bag {...} /* класс внутри тега с классом */

Псевдоклассы:

• Усиливают обычные селекторы.
• Позволяют выбирать элементы с учётом:
  - Состояния.
  - Расположения относительно других элементов.

Псевдоэлементы:

• Создают виртуальные теги.
• Позволяют стилизовать их.

Классификация свойств:

• Позиционирование.
• Блочная модель (размеры и отступы) и поток.
• Оформление текста.
• Декоративные эффекты (фоны, тени и т.д).
• Анимация и динамические эффекты.
• Разное.

Каскадность

• К одному и тому же элементу может применяться несколько CSS правил.
• Свойства правил комбинируются.
• Свойства элементов можно комбинировать.
• Кода в разных CSS правилах есть разные свойства, то они конфликтуют.

Специфичность и приоритеты:

• Специфичность определяется по селектору.
• При одинаковой специфичности побеждает то правило, которое ниже в коде.
• Чем проще селекторы, тем меньше проблем с расчётом специфичности.

Типы значений:

• Абсолютные.
• Относительные.
• Ключевые слова.
• Цвета.
• Функции.
• Произвольные строки.

px или rem:

• px - вёрстка без дизайна.
• px - вёрстка по дизайну.
• rem - вёрстка по дизайну со спецвозможностями.