Введение
CSS (Cascading Style Sheets) - это язык стилей, который определяет внешний вид веб-страниц. В этой статье мы рассмотрим основы CSS и научимся создавать красивые и отзывчивые веб-страницы.
Что такое CSS?
- Стилизация: Визуальное оформление
- Макет: Расположение элементов
- Адаптивность: Отзывчивый дизайн
- Анимации: Интерактивность
Основы CSS
1. Подключение стилей
Способы подключения
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!-- Внешний файл -->
<link rel="stylesheet" href="styles.css">
<!-- Внутренние стили -->
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
</style>
<!-- Инлайн стили -->
<div style="color: blue; font-size: 16px;">
Текст с инлайн стилями
</div>
|
2. Селекторы
Типы селекторов
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| /* По тегу */
p {
color: #333;
}
/* По классу */
.button {
background: #007bff;
color: white;
}
/* По ID */
#header {
background: #f8f9fa;
}
/* Комбинированный */
nav.main-nav a {
text-decoration: none;
}
/* Атрибут */
input[type="text"] {
border: 1px solid #ddd;
}
/* Псевдокласс */
a:hover {
color: #0056b3;
}
|
Свойства CSS
1. Цвета и фон
Работа с цветами
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| /* Цвета */
.text {
color: #ff0000; /* HEX */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA с прозрачностью */
}
/* Фон */
.element {
background-color: #f8f9fa;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
|
2. Текст
Стилизация текста
1
2
3
4
5
6
7
8
9
10
| .text {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 1px;
}
|
Боксовая модель
1. Размеры и отступы
Свойства box-model
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .element {
/* Размеры */
width: 300px;
height: 200px;
/* Отступы */
margin: 20px; /* Внешний отступ */
padding: 15px; /* Внутренний отступ */
/* Границы */
border: 1px solid #ddd;
border-radius: 5px;
/* Тип box-sizing */
box-sizing: border-box;
}
|
2. Позиционирование
Типы позиционирования
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| /* Статическое */
.static {
position: static;
}
/* Относительное */
.relative {
position: relative;
top: 10px;
left: 20px;
}
/* Абсолютное */
.absolute {
position: absolute;
top: 0;
right: 0;
}
/* Фиксированное */
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
}
/* Прилипающее */
.sticky {
position: sticky;
top: 0;
}
|
Flexbox
1. Основы Flexbox
Контейнер
1
2
3
4
5
6
7
8
| .flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
|
2. Элементы Flexbox
Элементы
1
2
3
4
5
6
7
8
| .flex-item {
flex: 1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: center;
order: 1;
}
|
Grid
1. Основы Grid
Контейнер
1
2
3
4
5
6
7
8
9
10
| .grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
|
2. Элементы Grid
Элементы
1
2
3
4
5
6
7
| .grid-item {
grid-column: 1 / 3;
grid-row: 1 / 2;
grid-area: header;
justify-self: center;
align-self: center;
}
|
Медиа-запросы
1. Адаптивный дизайн
Брейкпоинты
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| /* Мобильные устройства */
@media (max-width: 576px) {
.container {
width: 100%;
padding: 0 15px;
}
}
/* Планшеты */
@media (min-width: 577px) and (max-width: 768px) {
.container {
width: 540px;
}
}
/* Десктопы */
@media (min-width: 769px) {
.container {
width: 720px;
}
}
|
2. Особенности устройств
Медиа-функции
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| /* Ориентация */
@media (orientation: landscape) {
.header {
height: 100vh;
}
}
/* Плотность пикселей */
@media (-webkit-min-device-pixel-ratio: 2) {
.logo {
background-image: url('logo@2x.png');
}
}
/* Предпочтения пользователя */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
|
Анимации и переходы
1. Переходы
Свойства transition
1
2
3
4
5
6
7
8
9
| .button {
background: #007bff;
transition: all 0.3s ease;
}
.button:hover {
background: #0056b3;
transform: scale(1.1);
}
|
2. Анимации
Keyframes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.element {
animation: fadeIn 0.5s ease forwards;
}
|
Переменные CSS
1. Определение переменных
Глобальные переменные
1
2
3
4
5
6
| :root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-family: 'Arial', sans-serif;
--spacing-unit: 8px;
}
|
2. Использование переменных
Применение
1
2
3
4
5
| .button {
background: var(--primary-color);
font-family: var(--font-family);
padding: calc(var(--spacing-unit) * 2);
}
|
Оптимизация
1. Производительность
Оптимизация CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| /* Использование transform вместо position */
.element {
transform: translateX(100px);
}
/* Использование will-change */
.animated {
will-change: transform;
}
/* Оптимизация селекторов */
/* Плохо */
div.container > div.row > div.col > p.text
/* Хорошо */
.text
|
2. Организация кода
Методология
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| /* BEM методология */
.block {
/* Блок */
}
.block__element {
/* Элемент */
}
.block--modifier {
/* Модификатор */
}
/* Компонентный подход */
.component {
/* Компонент */
}
.component__header {
/* Заголовок компонента */
}
.component__content {
/* Содержимое компонента */
}
|
Заключение
CSS - это мощный инструмент для создания современных веб-интерфейсов. Понимание основ CSS и правильное использование его возможностей поможет создать красивые и отзывчивые веб-страницы.