CSS для начинающих: основы стилизации HTML от базы до практики

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

начинающие веб-разработчики
студенты и профессионалы, желающие освоить CSS
люди, заинтересованные в создании и улучшении веб-сайтов
Представьте веб-страницу как дом: HTML создаёт фундамент и стены, а CSS — это всё, что делает дом привлекательным: цвет стен, мебель, освещение. Без CSS интернет был бы унылой серой массой текста! За 15 лет работы в веб-разработке я видел, как начинающие разработчики теряются в попытках "подружить" HTML с CSS. Этот гид проведёт вас через все основы — от подключения стилей до создания первых красивых элементов. Готовы превратить сырой HTML в визуальный шедевр? 🎨 Начнём путешествие в мир CSS!

Хотите быстро освоить веб-разработку и перейти от простых стилей к созданию профессиональных веб-сайтов? Программа Обучение веб-разработке от Skypro поможет вам за 9 месяцев пройти путь от новичка до востребованного специалиста. Вы начнёте с основ CSS и HTML, а закончите профессиональной разработкой на JavaScript и React с реальными проектами в портфолио. Никакой бесполезной теории — только практика под руководством опытных наставников!

Что такое CSS и как он работает с HTML

CSS (Cascading Style Sheets) — это язык стилей, который определяет внешний вид HTML-элементов на веб-странице. Если HTML — это структура и содержание сайта, то CSS — его внешний вид и презентация. Без CSS веб-страница выглядит как простой текстовый документ без форматирования. С CSS вы можете изменить цвета, шрифты, отступы, расположение элементов и многое другое. 💅

Важно понимать, что CSS работает по принципу каскада (отсюда и название). Это означает, что стили могут наследоваться и переопределяться в зависимости от их приоритета и порядка объявления.

Марина Иванова, фронтенд-разработчик
Недавно я помогала маркетинговому отделу с оформлением страницы для нового продукта. Они прислали макет, где все кнопки были разных цветов и размеров. Вместо того, чтобы создавать отдельные стили для каждой кнопки, я использовала CSS-классы и переменные. Создала базовый класс .button с общими стилями и несколько модификаторов типа .button--primary и .button--small. Этот подход не только ускорил разработку, но и позволил легко поддерживать единый стиль по всему сайту. Когда через неделю заказчик решил изменить цветовую схему, мне потребовалось изменить всего пару строк в CSS-переменных, а не искать и заменять цвета по всему коду.

Основой CSS является правило, которое состоит из селектора и блока объявлений:

Селектор указывает, к каким HTML-элементам применяется правило
Блок объявлений содержит одно или несколько объявлений, разделенных точкой с запятой
Каждое объявление включает свойство CSS и значение, разделенные двоеточием

Вот как выглядит простое CSS-правило:

Часть правила	Пример	Описание
Селектор	h1	Выбирает все элементы <h1>
Свойство	color	Определяет, что мы хотим изменить
Значение	blue	Указывает новое значение свойства
Полное правило	h1 { color: blue; }	Делает все заголовки h1 синими

Способы подключения стилей к веб-странице

Существует несколько способов подключения CSS к HTML-документу, каждый со своими преимуществами и недостатками. Выбор метода зависит от ваших целей и масштаба проекта. 🔄

Встроенные стили (Inline CSS) — применяются непосредственно к HTML-элементу с помощью атрибута style:

HTML

Скопировать код

<p style="color: red; font-size: 18px;">Этот текст красный и увеличенный</p>

Внутренние стили (Internal CSS) — размещаются внутри тега <style> в разделе <head> HTML-документа:

HTML

Скопировать код

<style> p { color: blue; } </style>

Внешние таблицы стилей (External CSS) — хранятся в отдельном CSS-файле и подключаются к HTML с помощью тега <link>:

HTML

Скопировать код

<link rel="stylesheet" href="styles.css">

Импорт CSS — позволяет загружать CSS-файл из другого CSS-файла с помощью директивы @import:

CSS

Скопировать код

@import url("additional-styles.css");

Сравнение методов подключения CSS:

Метод	Преимущества	Недостатки	Рекомендуется для
Inline CSS	Быстрое применение, высокий приоритет	Смешивает содержание и оформление, затрудняет поддержку	Небольших изменений, тестирования
Internal CSS	Не требует дополнительных файлов, стили доступны сразу	Увеличивает размер HTML, не переиспользуется между страницами	Одностраничных документов
External CSS	Разделяет контент и стиль, переиспользуемость, кэширование	Дополнительные HTTP-запросы	Большинства веб-сайтов, многостраничных проектов
@import	Модульность, организация сложных таблиц стилей	Блокирует рендеринг до загрузки, может замедлять загрузку	Больших проектов с модульной структурой

Для большинства проектов рекомендуется использовать внешние таблицы стилей, так как они обеспечивают лучшую организацию кода, повторное использование и возможность кэширования браузером.

Основные селекторы CSS для стилизации элементов

Селекторы — это паттерны, которые используются для выбора HTML-элементов, к которым нужно применить стили. Овладение селекторами — ключевой шаг в освоении CSS, поскольку они определяют, какие именно элементы будут затронуты вашими стилями. 🎯

Вот основные типы селекторов, которые должен знать каждый начинающий разработчик:

Селектор элемента — выбирает все элементы указанного типа:

CSS

Скопировать код

p { color: blue; } // все абзацы будут синими

Селектор класса — выбирает элементы с указанным атрибутом class:

CSS

Скопировать код

.highlight { background-color: yellow; } // все элементы с классом "highlight" получат желтый фон

Селектор идентификатора — выбирает элемент с указанным атрибутом id:

CSS

Скопировать код

#header { position: fixed; } // элемент с id "header" будет зафиксирован

Универсальный селектор — выбирает все элементы:

CSS

Скопировать код

* { margin: 0; } // убирает отступы у всех элементов

Селектор потомков — выбирает элементы, которые являются потомками указанного элемента:

CSS

Скопировать код

nav a { text-decoration: none; } // убирает подчеркивание у всех ссылок внутри элемента nav

Селектор дочерних элементов — выбирает элементы, которые являются непосредственными дочерними элементами:

CSS

Скопировать код

ul > li { list-style: square; } // маркеры списка изменятся на квадраты только для прямых li внутри ul

Селектор атрибутов — выбирает элементы с указанным атрибутом:

CSS

Скопировать код

input[type="text"] { border: 1px solid gray; } // добавляет границу ко всем текстовым полям ввода

Псевдоклассы — выбирают элементы в определенном состоянии:

CSS

Скопировать код

a:hover { color: red; } // ссылки становятся красными при наведении

Псевдоэлементы — создают и стилизуют части содержимого:

CSS

Скопировать код

p::first-letter { font-size: 2em; } // первая буква каждого абзаца увеличена

Комбинирование селекторов позволяет создавать более точные правила. Например, p.intro выберет только абзацы с классом "intro", а nav > ul > li — только элементы списка, которые являются прямыми потомками маркированного списка внутри навигации.

Александр Петров, веб-дизайнер
Однажды я работал над обновлением дизайна новостного портала с десятками тысяч статей. Клиент попросил изменить стиль цитат в статьях, но только тех, что содержат ссылки на источники. Задача казалась простой, но готовые статьи были оформлены разнообразно: некоторые цитаты были в тегах <blockquote>, некоторые в <div class="quote">, а ссылки иногда находились внутри цитаты, а иногда после неё.
Вместо ручного исправления HTML, я применил комбинированные селекторы CSS. Написал правило вида blockquote:has(a), .quote:has(a) { border-left: 4px solid #3498db; padding-left: 15px; }, которое находило любые цитаты со ссылками внутри и применяло к ним новый стиль. Клиент был впечатлен, что мы решили задачу без изменения содержимого тысяч статей, а мне это сэкономило недели рутинной работы.

Базовые свойства CSS для оформления текста и блоков

После освоения селекторов важно понять основные свойства CSS, которые помогут вам контролировать внешний вид текста и блочных элементов. Вот наиболее важные из них, разделенные по категориям: 📝

Свойства для работы с текстом:

color — задает цвет текста: color: #333;
font-family — определяет шрифт: font-family: 'Arial', sans-serif;
font-size — устанавливает размер шрифта: font-size: 16px;
font-weight — задает жирность шрифта: font-weight: bold;
text-align — выравнивает текст: text-align: center;
text-decoration — добавляет подчеркивание, зачеркивание и т.д.: text-decoration: underline;
line-height — устанавливает высоту строки: line-height: 1.5;
letter-spacing — задает расстояние между буквами: letter-spacing: 1px;

Свойства для работы с блочными элементами:

width и height — задают ширину и высоту: width: 300px; height: 200px;
margin — устанавливает внешние отступы: margin: 10px 20px;
padding — задает внутренние отступы: padding: 15px;
border — создает границу: border: 1px solid #ddd;
background-color — устанавливает цвет фона: background-color: #f9f9f9;
box-shadow — добавляет тень: box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius — скругляет углы: border-radius: 5px;
display — определяет тип отображения элемента: display: flex;

Свойства для позиционирования:

position — задает тип позиционирования: position: relative;
top, right, bottom, left — определяют смещение: top: 10px; left: 20px;
z-index — контролирует порядок наложения: z-index: 10;
float — обтекание элементов: float: left;

Понимание модели блока CSS (Box Model) критически важно для правильного расположения элементов на странице. Она состоит из четырех компонентов:

Компонент	Описание	CSS-свойство	Влияние на размеры
Content	Содержимое блока	width, height	Задает базовый размер
Padding	Внутренний отступ	padding	Увеличивает видимую область
Border	Граница	border	Добавляется к общему размеру
Margin	Внешний отступ	margin	Создает пространство между элементами

По умолчанию, когда вы устанавливаете width и height, эти значения применяются только к области содержимого. Чтобы изменить это поведение, можно использовать свойство box-sizing: border-box; — оно включает padding и border в указанные ширину и высоту, что упрощает расчеты и верстку.

Практические проекты для закрепления навыков CSS

Теория без практики мало что значит в веб-разработке. Предлагаю вам несколько последовательных проектов, которые помогут закрепить полученные знания и построить ваше портфолио CSS-навыков. 🛠️

Проект 1: Стилизация личной визитной карточки

Создайте HTML-структуру с вашим именем, фотографией, контактной информацией и кратким описанием
Примените стили для текста: шрифты, цвета, выравнивание
Добавьте границы, тени и закругление углов для карточки
Используйте hover-эффекты для интерактивных элементов

Проект 2: Адаптивная навигационная панель

Создайте горизонтальное меню с 5-6 пунктами
Стилизуйте меню с помощью CSS: фон, цвет текста, отступы
Добавьте эффекты при наведении и активации пунктов меню
Сделайте выпадающие подменю для некоторых пунктов
Убедитесь, что меню корректно отображается на мобильных устройствах

Проект 3: Галерея изображений с фильтрацией

Создайте сетку из изображений разных категорий (природа, архитектура, люди)
Добавьте навигацию для фильтрации изображений по категориям
Используйте CSS Grid или Flexbox для расположения изображений
Реализуйте плавные анимации при фильтрации
Добавьте модальное окно, открывающееся при клике на изображение

Проект 4: Лендинг-страница продукта

Создайте полноценную страницу продукта с несколькими секциями
Включите героический баннер, описание преимуществ, отзывы и контактную форму
Примените все изученные техники стилизации
Обеспечьте корректное отображение на разных устройствах
Добавьте анимации для улучшения пользовательского опыта

Советы по выполнению проектов:

Начинайте с простой HTML-структуры, затем добавляйте стили
Используйте инструменты разработчика в браузере для отладки CSS
Экспериментируйте с различными значениями свойств
Изучайте код успешных веб-сайтов для вдохновения
Получайте обратную связь от других разработчиков
Документируйте процесс создания для будущего портфолио

После выполнения этих проектов вы не только закрепите основы CSS, но и будете иметь портфолио работ, демонстрирующее ваши навыки потенциальным работодателям или клиентам. Каждый следующий проект должен быть немного сложнее предыдущего, чтобы вы могли постепенно расширять свои знания и умения.

Освоение CSS — это не конечная точка, а начало бесконечного путешествия в мир веб-дизайна. Практика и эксперименты — ваши главные союзники. Не бойтесь ломать код и исправлять ошибки, именно так происходит настоящее обучение. Начните с малого — стилизуйте простой текст, затем переходите к более сложным элементам и макетам. Создайте свой первый проект сегодня, и через месяц вы с удивлением обнаружите, насколько выросли ваши навыки и уверенность в работе с CSS.

Читайте также

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

Пройди тест и узнай насколько ты лучше других читателей

Что такое CSS?

1 / 5

Свежие материалы

Мета-теги: как правильно использовать

6 сентября 2024

История и развитие HTTP и HTTPS

6 сентября 2024

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024

CSS для начинающих: основы стилизации HTML от базы до практики

Что такое CSS и как он работает с HTML

Способы подключения стилей к веб-странице

Основные селекторы CSS для стилизации элементов

Базовые свойства CSS для оформления текста и блоков

Практические проекты для закрепления навыков CSS

Загрузка...