Введение в CSS
CSS (Cascading Style Sheets) — каскадные таблицы стилей. Это язык, который описывает, как должен выглядеть HTML-документ.
1. Что такое CSS?
CSS — это текстовый файл с расширением .css. В нём пишутся правила, которые говорят браузеру, как отображать элементы на странице: цвет, размер, расположение, шрифт, анимацию.
HTML отвечает за структуру. CSS — за внешний вид. Без CSS сайт выглядит как чёрно-белый документ без картинок и оформления.
2. Зачем нужен CSS?
- Разделение содержания и оформления: HTML пишет структуру, CSS — внешний вид. Можно менять дизайн, не трогая HTML.
- Единый стиль для всего сайта: Один CSS-файл может управлять внешним видом всех страниц.
- Адаптивность: CSS позволяет подстраивать сайт под разные экраны (телефоны, планшеты, компьютеры).
- Анимации и эффекты: Плавные переходы, hover-эффекты, трансформации.
3. Как подключить CSS к странице?
Внешний файл (рекомендуется)
Самый чистый способ. Весь CSS лежит в отдельном файле (styles.css), а в HTML в раздел <head> ставится ссылка на него.
<head>
<link rel="stylesheet" href="styles.css">
</head>Внутренний стиль (тег <style>)
CSS пишется внутри HTML-страницы в теге <style>, который также помещается в <head>. Используется редко, только для маленьких страниц.
<head>
<style>
body {
background: #f0f0f0;
}
</style>
</head>Инлайновый (атрибут style)
CSS пишется прямо в тег. Используется в исключительных случаях (плохая практика).
<p style="color: red;">Красный текст</p><head>. Это удобно, быстро и правильно.
4. Синтаксис CSS
CSS-правило состоит из селектора и блока объявлений.
селектор {
свойство: значение;
свойство: значение;
}Пример:
p {
color: blue;
font-size: 16px;
}Это правило сделает весь текст внутри тегов <p> синим, размером 16 пикселей.