ШРИ: Курс по CSS

1. Cелекторы. Псевдоклассы. Специфичность и наследование.
2. Значения и единицы измерения. Шрифт. Свойства текста.
3. Основы модели визуального форматирования.
4. Свободное перемещение и позиционирование.
5. Layouts. At-rules
6. Цвета и фон. Transition. Transform. Animation.

• Универстальный селектор *
• Class, ID
• Селекторы атрибутов
• Селекторы потомков

• :first-child, :last-child, :only
• :nth-child
• :link, :visited, :hover
• :checked, :disabled
• :not

• :before, :after

• Cпецифичность
• Наследование

1. Cелекторы. Псевдоклассы. Специфичность и наследование.
2. Значения и единицы измерения. Шрифт. Свойства текста.
3. Основы модели визуального форматирования.
4. Свободное перемещение и позиционирование.
5. Layouts. At-rules
6. Цвета и фон. Transition. Transform. Animation.

• Числа могут быть дробные и отрицательные.
• Процентные значения
• Цвет
• Единицы измерения em/ex
• calc()

vh, vw и vmin

• 1vw = 1% ширины окна
• 1vh = 1% высоты окна
• 1vmin = 1vw или 1vh, в зависимости от того, что меньше

• Семейства шрифтов
• Насыщенность шрифта
• Размер шрифта
• Стили и варианты

Внешние шрифты

• Отступы
• Горизонтальное выравнивание
• Высота строки
• Вертикальное выравнивание
• Расстояние между буквами и словами
• Переносы

• Преобразование текста
• Оформление текста
• Затенение текста
• Multi Column

1. Cелекторы. Псевдоклассы. Специфичность и наследование.
2. Значения и единицы измерения. Шрифт. Свойства текста.
3. Основы модели визуального форматирования.
4. Свободное перемещение и позиционирование.
5. Layouts. At-rules
6. Цвета и фон. Transition. Transform. Animation.

                }
                      width: auto;
                      height: auto;
                      margin: 0;
                      padding: 0;
                      border: 0;
                }
            

• Viewport
• Containing block
• Formatting contexts
  • Block
  • Inline

• Positioning schemes
  • Normal flow, relative positioning
  • Floats
  • Absolute positioning

• root (HTML) -> Viewport
• position: relative/static —> nearest block ancestor
• position: absolute —> nearest ancestor position: absolute/relative/fixed

• Ширина и отступы

• width, margin: auto
• negative margin-left
• width, replaced elements
• height, margin

• height, margin: auto
• margin-top, margin-bottom
• negative margin-top
• margin-top: %

• min-width, max-width
• min-height, max-height
• W3C

• Ширина, высота и отступы
• Пробелы
• Line-height

• Ширина, высота и отступы
• replaced elements

• пример
• пример

1. Cелекторы. Псевдоклассы. Специфичность и наследование.
2. Значения и единицы измерения. Шрифт. Свойства текста.
3. Основы модели визуального форматирования.
4. Свободное перемещение и позиционирование.
5. Layouts. At-rules
6. Цвета и фон. Transition. Transform. Animation.

• Positioning schemes
  • Normal flow, relative positioning
  • Floats
  • Absolute positioning

• Механика
• Поток
• Картинка и текст
• Картинка и много текста
• Отступы

• Механика
• Poa, Pof —> Смещение
• Poa, Pof —> Размеры
• Poa —> магия
• Попап

• Механика
• Повседневные задачи

• Без z-index
• Float
• Z-index
• Контекст z-index
• Пример 1
• Пример 2
• Пример 3

1. Cелекторы. Псевдоклассы. Специфичность и наследование.
2. Значения и единицы измерения. Шрифт. Свойства текста.
3. Основы модели визуального форматирования.
4. Свободное перемещение и позиционирование.
5. Layouts. At-rules
6. Цвета и фон. Transition. Transform. Animation.

• Float
• Чикуенок
• Position: absolute 1
• Position: absolute 2
• Inline-block

• 2009 -> 2011 -> 2012
• Механика
• Поддержка Flexbox в браузерах
• Таблица соответствия F09 и F11
• Таблица соответствия F09 и F11 для IE10
• CSS3 Flexplorer

• Механика
• Adaptive design

1. Cелекторы. Псевдоклассы. Специфичность и наследование.
2. Значения и единицы измерения. Шрифт. Свойства текста.
3. Основы модели визуального форматирования.
4. Свободное перемещение и позиционирование.
5. Layouts. At-rules
6. Цвета и фон. Transition. Transform. Animation.

• Цвета
• Color
• Background
• Background
• background-clip

• Градиенты — пример №1
• Градиенты — пример №2
• Градиенты — пример №3
• Градиенты — пример №4

• Multiple — пример №1
• Multiple — пример №2
• Patterns

• Transitions — механика
• Transitions — пример №1
• Transitions — easing
• Transitions — delay

• Transforms — механика
• Transforms — origin
• Transforms — пример

• Animation — механика

• 3D transforms — перспектива
• 3D transforms — механика
• 3D transforms — пример
• 3D transforms — пример2