Запись занятия

YOUTUBE · 01.12.2025 05:05

Ключевые темы и таймкоды

Введение

0:00
  • В видео автор приветствует зрителей и представляет себя в студии московской школы программистов.
  • Он демонстрирует магию исчезновения и объясняет, что это одна из технологий, на которых держится весь веб-разработка.

Цели занятия

0:04
  • Главная цель занятия - научиться писать все СС правила и узнать, что такое СС.
  • В дальнейшем планируется изучение установки фона для элементов и управления шрифтом текста.

Теория СС

0:05
  • СС отвечает за внешнюю составляющую сайта, стили и оформление.
  • СС позволяет работать со шрифтами, цветом текста и фона, размером элементов, отступами и положением элементов на странице.

Практическая работа

0:06
  • Автор предлагает зрителям сделать проект и доделать его, если это необходимо.
  • Он также напоминает о том, что не следует использовать кириллические символы и пробелы в именах файлов и папок.

Заключение

0:07
  • СС позволяет работать с различными элементами сайта, такими как шрифты, цвет, размер, отступы и положение элементов.
  • Вскот - редактор, который будет использоваться на протяжении всего курса.

Анимации

8:17
  • Обсуждается анимация на сайтах, включая использование CSS-анимаций.
  • Рассматриваются планы на будущие занятия, включая изучение библиотеки Bootstrap и изучение деталей CSS.

Структура проекта

10:15
  • Создается папка с CSS-файлами и обсуждается структура проекта.
  • Обсуждается использование метатега для подключения CSS-файлов на страницу.

Вопросы и ответы

12:38
  • Задаются вопросы о подключении CSS-файлов на страницу и о метатеге.
  • Ответы на вопросы даются в чате.

Введение в CSS

14:01
  • В этом видео мы рассмотрим синтаксис CSS и его использование для создания стилей для элементов на странице.
  • Мы рассмотрим различные селекторы, такие как селектор по тэгу, селектор по классу и селектор по идентификатору.

Синтаксис CSS

15:53
  • Мы рассмотрим синтаксис CSS, который включает в себя использование фигурных скобок для указания свойств и значений.
  • Мы также рассмотрим различные цветовые модели, такие как RGB, HEX и ключевые слова для цветов.

Практика с ассистентами

23:28
  • В этой части мы перейдем к практике с ассистентами и выполнению задания на пятнадцать минут.
  • Мы продемонстрируем, как подключать стили и использовать различные селекторы и цветовые модели в CSS.

Демонстрация стилей

26:00
  • Автор демонстрирует, как применять стили в аштимель документе, создавая папку "все сс" и файл "индекс сс".
  • Подключение файла к индексу html-документу с помощью тэкланк.

Применение стилей

28:57
  • Автор применяет стили к сайту лунного зоопарка, задавая цвет фона и текста.
  • Использование ключевых цветов и свойств бэкграунд калар для стилизации.

Разбор задания

39:58
  • Автор разбирает задание по стилизации лунного зоопарка, стилизации темы сайта и задания цветов для текста и фона.
  • Демонстрация стилизации тэгов и выделения текста.

Практика по типографике

47:48
  • Автор видео объясняет, что он занимался практикой и разбирал задания для тех, кто посмотрит видео.
  • Он предлагает проверить свои знания в чате и задать вопросы, если что-то непонятно.

Типографические свойства

51:03
  • Автор объясняет свойства, которые используются для изменения шрифта и размера текста.
  • Он упоминает, что не стоит использовать заголовки для увеличения размера шрифта, а использовать специальные свойства.

Декоративные свойства

54:30
  • Автор рассказывает о декоративных свойствах, таких как подчеркивание и зачеркивание текста.
  • Он объясняет, что эти свойства можно использовать, но не обязательно запоминать их все.

Практика с использованием свойств

56:29
  • Автор демонстрирует, как использовать свойства на практике, например, для центрирования текста.
  • Он предлагает пройти несложное тестирование на внимательность, чтобы проверить свои знания.

Магический эспандер

59:07
  • Автор демонстрирует магический эспандер, который позволяет ему видеть сквозь экран компьютера и использовать черную магию

Проверка на внимательность

1:00:06
  • Автор предлагает решить тест на внимательность, связанный с использованием свойств CSS

Виды селекторов

1:09:12
  • Автор объясняет виды селекторов, такие как селектор по тэгу, селектор по классу и селектор по айдишнику

Применение селекторов

1:10:09
  • Автор показывает, как использовать селекторы для стилизации элементов, таких как параграфы, списки и слова

Селектор пустышка

1:13:01
  • Автор объясняет, как использовать селектор пустышка для обращения к конкретным элементам и стилизации их по классу

Практика

1:14:52
  • Автор предлагает практиковаться в создании новой страницы с рецептом крабургера, используя CSS

Разбор задания для тех, кто не смог присутствовать на занятии

1:21:13
  • В видео проводится разбор задания для тех, кто не смог присутствовать на занятии.
  • Обсуждаются различные элементы и классы, которые необходимо добавить в шаблон.

Стилизация и использование классов

1:27:02
  • Обсуждаются стилизация заголовка, изображения и списка ингредиентов.
  • Задаются различные стили для элементов, такие как фон, шрифт и курсивность.

Завершение разбора задания

1:31:48
  • Обсуждаются оставшиеся пункты задания и стилизация финального сообщения.
  • Задается вопрос о продолжении изучения аштимель или возвращении к штимель.