Пройти базовые курсы на сайте HTML ACADEMY

Вводный курс, в котором рассматриваются базовые понятия CSS: селекторы, каскадность, наследование, приоритеты. Вы познакомитесь с некоторыми CSS-свойствами для оформления текста, создания сетки страницы, позиционирования элементов.

1. Введение в CSS
2. CSS-правила
3. Продвинутые селекторы
4. Свойства для оформления текста
5. Свойства для задания размеров и отступов
6. Позиционирование элементов
7. Создание сетки страницы
8. Декоративные свойства
9. Каскадность
10. Каскадность. Переопределение стилей
11. Каскадность и приоритеты
12. Каскадность. Коктейль из классов

Курс посвящен одному из важнейших механизмов CSS — селекторам. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их. Курс тематический — он посвящен биатлону.

1. Нелёгкая жизнь без селекторов
2. Селекторы по тэгам
3. Селекторы по классам
4. Отрабатываем селекторы по классам
5. Контекстные селекторы
6. Соседние селекторы
7. Контекстные и соседние селекторы
8. Дочерние селекторы
9. Псевдоклассы
10. Псевдокласс :nth-child
11. :nth-child и контекстные селекторы
12. Псевдокласс :hover
13. Динамические эффекты с помощью :hover
14. Псевдоклассы :link, :visited и :active
15. Псевдокласс :focus
16. Селекторы атрибутов
17. Селектор по id
18. Испытание. Дуэль.

Наследование, каскадирование, специфичность: что это и как их правильно использовать?

1. Иерархическое дерево
2. Наследование
3. Наследование «на пальцах»
4. Еще немного про наследование
5. Наследуемые свойства
6. Ненаследуемые свойства
7. Принудительное наследование
8. Каскадирование
9. Битва за курочку
10. Битва за курочку. Раунд второй
11. Битва за курочку. Раунд третий
12. Битва за курочку. Борьба накаляется
13. Битва за курочку. Запрещённый приём
14. Еще одна задачка на специфичность
15. Расчет значения специфичности
16. Еще задачка на порядок кода
17. Перекрестное наследование
18. Испытание: взломанный котопрофайл

1. Испытание 1: фигурное катание, спортивные пары
2. Испытание 2: медальный зачёт
3. Испытание 3: фильтры по цене

• Главный текстовый тэг — span
• Свойство font-size: задаем размер шрифта
• Свойство font-weight: выделение жирным
• Свойство font-style: курсив
• Свойство font-family: шрифт
• Свойство color: цвет текст
• Свойство text-decoration: подчеркивание и другие эффекты
• Декоративное подчеркивание
• Задаем регистр символов с помощью text-transform
• Управляем пробелами: white-space
• Горизонтальное выравнивание текста: text-align
• Вертикальное выравнивание: vertical-align
• Верхние и нижние индексы на css
• Свойство line-height: управляем высотой строки
• Вертикальный ритм текста
• Испытание: рецепт на css

1. Блочные элементы
2. Строчные элементы
3. Ширина и высота
4. Внутренние отступы, свойство padding
5. Внешние отступы, свойство margin
6. Рамки
7. Стандартная блочная модель
8. Первое испытание
9. «Схлопывание» внешних отступов
10. «Выпадание» внешних отступов
11. Как отцентровать элемент?
12. Блочная модель и строчные элементы
13. Ширина 100% и ширина по умолчанию
14. Проблемы обычной блочной модели
15. Изменяем блочную модель, свойство box-sizing
16. Второе испытание
17. Управление типом элемента, свойство display
18. display: inline-block
19. display: table
20. display: table-row
21. display: table-cell
22. display: none
23. Последнее испытание

1. Поток документа
2. Относительное позиционирование
3. position:relative и top
4. position:relative и left
5. position:relative и bottom
6. position:relative и right
7. Относительное позиционирование на практике
8. Абсолютное позиционирование
9. Абсолютное позиционирование и строчные элементы
10. position:absolute и left
11. position:absolute и top
12. position:absolute и right
13. position:absolute и bottom
14. Точка отсчета координат
15. Тренируемся задавать координаты
16. Неявная точка отсчета
17. Абсолютное позиционирование на практике
18. Фиксированное позиционирование
19. z-index или кто кого перекроет
20. Испытание: собери слово «вечность»

В курсе разбираются понятие потока документа, тонкости свойства float и блочно-строчных элементов, отрабатываются основные приёмы построения сеток.

1. Пробуем управлять потоком
2. Управление потоком, шаг 2
3. Управление потоком, шаг 3
4. Создадим другой поток
5. Другой поток, шаг 2
6. Другой поток, шаг 3
7. Другой поток, финал
8. Погружение в флоаты
9. float и ширина
10. float и выпадание из потока
11. Флоат рядом с флоатом
12. Когда флоатов много, а места мало
13. Испытание: паззл на флоатах
14. Свойство clear
15. Борьба с выпаданием флоатов: распорки
16. Борьба с выпаданием флоатов: псевдораспорки
17. Простейшая сетка, шаг 1
18. Простейшая сетка, шаг 2
19. Простейшая сетка, финал
20. Сетка посложнее, шаг 1
21. Сетка посложнее, шаг 2
22. Сетка посложнее, шаг 3
23. Сетка посложнее, добавляем содержание
24. Последняя сетка, шаг 1
25. Последняя сетка, шаг 2
26. Последняя сетка завершена
27. Испытание: строим сетку
28. Погружение в inline-block
29. float vs inline-block
30. Простая сетка на inline-block
31. inline-block и пробелы в коде
32. Испытание: котогалерея на inline-block