Лекция № 7

1.

Лекция №7
Каскадные таблицы стилей (CSS)

2.

Что такое CSS?
CSS (Cascading Style Sheets) — язык стилей, предназначенный для
оформления и визуального представления HTML-документов. С
помощью CSS можно управлять цветами, шрифтами, размерами,
отступами, расположением элементов и адаптивностью Webстраницы.
Внешний вид
Управление
Язык для описания стилей и
Цвета, шрифты, размеры и
оформления веб-страниц
расположение элементов
В связке
Работает вместе с HTML (структура) и JavaScript (логика)

3.

Синтаксис CSS
Селектор
Свойство
Значение
Выбирает элемент
Что менять —
На что менять —
— например, h1,
например, color,
например, red,
.класс, #id
font-size
24px

4.

Основные свойства
Текст
Фон
Размеры
color, font-size,
background-color,
width, height,
font-family, text-
background-image
padding, margin
align

5.

Какова структура и синтаксис CSS-правил?
С помощью CSS можно задавать:
➢ цвет и размер текста;
➢ тип и начертание шрифта;
➢ фон элементов;
➢ размеры блоков;
➢ внешние и внутренние отступы;
➢ расположение элементов;
➢ границы;
➢ адаптивность Web-страницы.
Таким образом, HTML отвечает преимущественно
за структуру страницы, а CSS — за её внешний
вид и оформление.
CSS-правило состоит из селектора, свойства и его
значения.
Здесь:
✓ p — селектор, определяющий элемент <p>;
✓ color — свойство;
✓ blue — значение свойства;
✓ font-size — свойство размера шрифта;
✓ 18px — его значение.
Одному элементу можно задать несколько свойств.

6.

Блочная модель (Box Model)
1 Content
Само содержимое: текст, изображение или другой элемент
2 Padding
Внутренний отступ — пространство внутри границы
3 Border
Граница, обрамляющая элемент
4 Margin
Внешний отступ — пространство снаружи границы

7.

Способы подключения CSS
Внешний файл
Внутри HTML
Встроенный стиль
<link rel="stylesheet"
<style>...</style> в блоке <head>
style="color: red;"
href="style.css">
Рекомендуется
Лучше избегать

8.

Каскадность и специфичность
Элементы
1
Самый низкий приоритет
Классы
2
Выше, чем элементы
ID
3
Выше классов
4
Встроенный стиль
Наивысший приоритет
Последний стиль в файле переопределяет предыдущие — порядок записи имеет значение.

9.

Начни с этого
Создай файлы
Экспериментируй
HTML-файл и подключи к нему внешний CSS-файл через
Пробуй разные селекторы и свойства — изменяй цвета,
<link>
шрифты, отступы
DevTools (F12)
Практикуйся
Используй инструменты браузера для отладки и проверки
Создавай простые проекты: лендинги, карточки,
стилей в реальном времени
навигационные меню