Цели урока
В этом уроке мы познакомимся с CSS (Cascading Style Sheets) и его важностью в веб-разработке. Мы научимся подключать CSS к HTML-документу, а также рассмотрим основные селекторы и свойства, которые помогут нам стилизовать веб-страницы
Что такое CSS
CSS — это язык стилей, который используется для описания внешнего вида HTML-документов. Он позволяет изменять цвет, шрифт, размеры, отступы и другие визуальные аспекты элементов на веб-странице. Без CSS веб-страницы выглядели бы одинаково и не привлекали бы внимания пользователей
Обсуждение
- Вопрос для студентов: Что вы знаете о CSS? Какие стили вы хотели бы применить к своим проектам?
Подключение CSS к HTML
Существует несколько способов подключения CSS к HTML-документу:
Встроенные стили (inline): Стили, прописанные непосредственно в HTML-тегах с помощью атрибута style
<h1 style="color: blue;">Привет, мир!</h1>Внутренние стили (internal): Стили, прописанные в <style> внутри <head> HTML-документа
<head>
<style>
h1 {
color: blue;
}
</style>
</head>Внешние стили (external): Стили, прописанные в отдельном CSS-файле, который подключается к HTML-документу с помощью тега <link>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Практическое задание
Создайте простой HTML-документ и подключите к нему CSS разными способами. Попробуйте изменить цвет текста и фон страницы
Версии CSS:
- CSS1: Устарела
- CSS2.1: Рекомендована для использования
- CSS3: Разделена на модули, активно развивается
Основные селекторы CSS
Селекторы — это способы выбора элементов HTML для стилизации. Рассмотрим основные из них:
Селекторы по тегам: выбирают элементы по их имени
p {
color: green;
}Селекторы по классам: Выбирают элементы по атрибуту class
.highlight {
background-color: yellow;
}Селекторы по идентификаторам: Выбирают элементы по атрибуту Id
#main-title {
font-size: 24px;
}Практическое задание
Напишите CSS-код, который применяет стили к элементам HTML с использованием разных селекторов. Например, создайте класс для выделения текста и примените его к нескольким элементам.
Основные свойства CSS
Теперь рассмотрим некоторые основные свойства CSS, которые помогут нам стилизовать элементы.
- Стилизация элементов: CSS позволяет задавать стили для текста, фона, ссылок и других элементов на веб-странице
- Расположение элементов: Позволяет управлять позиционированием и расположением элементов на странице
- Адаптивность: С помощью медиа-запросов CSS можно создавать адаптивные дизайны, которые корректируются под разные устройства и экраны
Цвет (color): Определяет цвет текста
h1 {
color: blue;
}Шрифт (font-family, font-size): Определяет тип и размер шрифта
body {
font-family: Arial, sans-serif;
font-size: 16px;
}Отступы (margin, padding): Определяют расстояние между элементами
.box {
margin: 20px;
padding: 10px;
}Фон (background): Определяет цвет или изображение фона элемента
body {
background-color: lightgray;
}Задание на дом
Создайте небольшую веб-страницу с использованием CSS, применяя изученные селекторы и свойства. Постарайтесь сделать страницу привлекательной и уникальной
Дополнительные материалы
- Ссылки на ресурсы и документацию по CSS MDN Web Docs и W3Schools
