CSS: полное руководство по стилизации элементов для новичков

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

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

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

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

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

Хотите не просто знать теорию, но и применять CSS на практике, создавая современные сайты? Курс веб-дизайна от Skypro поможет вам освоить CSS от азов до профессионального уровня. Здесь вы не только изучите все селекторы и свойства, но и научитесь создавать адаптивные макеты под руководством опытных наставников. Всего за 8 месяцев вы превратитесь из новичка в профессионала, способного реализовать дизайн любой сложности!

Что такое CSS: базовые принципы работы и синтаксис

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

Синтаксис CSS состоит из трех основных компонентов:

Селектор — указывает, к какому элементу HTML применяются стили
Свойство — определяет, что именно изменяется (цвет, размер, положение)
Значение — устанавливает конкретный параметр свойства

Базовое CSS-правило выглядит следующим образом:

селектор { свойство: значение; }

Например, чтобы сделать текст всех параграфов синим, мы пишем:

p { color: blue; }

CSS можно подключить к HTML-документу тремя способами:

Внешняя таблица стилей — CSS-код в отдельном файле, подключаемый через тег <link>
Внутренняя таблица стилей — CSS-код в теге <style> внутри <head>
Встроенные стили — CSS-код в атрибуте style конкретного HTML-элемента

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

Важный принцип CSS — каскадность. Она определяет, какие стили применяются в случае конфликта. Приоритет определяется специфичностью селектора, источником стилей и порядком объявления. 🎨

Алексей Петров, веб-разработчик Когда я только начинал изучать CSS, мне казалось, что я никогда не запомню все эти свойства и правила. Я постоянно путался в синтаксисе и не понимал, почему некоторые стили применяются, а другие — нет. Переломный момент наступил, когда я стал визуализировать каждый HTML-элемент как коробку с содержимым. Я нарисовал на бумаге прямоугольники с границами, отступами и содержимым, подписав все свойства CSS. После этого упражнения базовые принципы CSS наконец "встали на свои места" в моей голове. Теперь, обучая новичков, я всегда начинаю с этой визуальной модели — это моментально проясняет, как работает CSS и почему важно понимать блочную модель.

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

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

Тип селектора	Синтаксис	Пример	Что выбирает
Универсальный	*	* { margin: 0; }	Все элементы
По тегу	имя_тега	p { color: blue; }	Все элементы с указанным тегом
По классу	.имя_класса	.header { font-size: 18px; }	Все элементы с указанным классом
По идентификатору	#идентификатор	#logo { width: 100px; }	Элемент с указанным ID
По атрибуту	[атрибут=значение]	input[type="text"] { border: 1px solid gray; }	Элементы с указанным атрибутом

Комбинированные селекторы позволяют создавать более сложные условия выбора элементов:

Селектор потомка — div p (выбирает все p внутри div)
Селектор дочернего элемента — div > p (выбирает p, которые являются прямыми потомками div)
Селектор смежных элементов — h1 + p (выбирает p, следующий сразу за h1)
Селектор последующих элементов — h1 ~ p (выбирает все p после h1)

Псевдоклассы позволяют выбирать элементы по их состоянию или положению в документе:

:hover — элемент, на который наведен курсор
:active — активный элемент (например, нажатая кнопка)
:focus — элемент, находящийся в фокусе
:first-child — первый дочерний элемент
:nth-child(n) — n-ный дочерний элемент

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

::before — добавляет контент перед содержимым элемента
::after — добавляет контент после содержимого элемента
::first-letter — выбирает первую букву текста
::first-line — выбирает первую строку текста

Специфичность селекторов определяет их приоритет при конфликтах стилей. Чем специфичнее селектор, тем выше его приоритет:

Встроенные стили (style="...")
ID-селекторы (#id)
Селекторы классов, атрибутов и псевдоклассов (.class, [attr], :hover)
Селекторы тегов и псевдоэлементов (div, ::before)

Работа с текстом и шрифтами: ключевые CSS-свойства

Типографика — один из фундаментальных аспектов веб-дизайна. Правильно настроенный текст значительно повышает читабельность и эстетическую привлекательность веб-страницы. 📝

Основные свойства для работы с шрифтами:

font-family — задает семейство шрифта (например, Arial, Helvetica, sans-serif)
font-size — определяет размер текста (px, em, rem, %)
font-weight — устанавливает начертание шрифта (normal, bold, 100-900)
font-style — задает стиль шрифта (normal, italic, oblique)
line-height — определяет высоту строки, влияя на интерлиньяж

Для управления внешним видом текста используются следующие свойства:

text-align — выравнивание текста (left, right, center, justify)
text-decoration — оформление текста (underline, overline, line-through, none)
text-transform — преобразование регистра (uppercase, lowercase, capitalize)
text-indent — отступ первой строки абзаца
letter-spacing — интервал между символами
word-spacing — интервал между словами

Современный CSS предоставляет гибкие возможности для подключения веб-шрифтов с помощью директивы @font-face:

@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Также можно использовать системные и веб-безопасные шрифты, которые с высокой вероятностью уже установлены на устройстве пользователя:

Системные шрифты: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
Веб-безопасные шрифты: Arial, Times New Roman, Courier New, Georgia

Для создания отзывчивых текстовых элементов рекомендуется использовать относительные единицы измерения:

em — относительно размера шрифта родительского элемента
rem — относительно размера шрифта корневого элемента (html)
% — процент от размера родительского элемента
vw/vh — процент от ширины/высоты области просмотра

Мария Соколова, фронтенд-разработчик Работая над редизайном новостного портала, я столкнулась с серьезной проблемой: на мобильных устройствах текст был либо слишком мелким, либо выходил за границы экрана. Стандартные подходы с фиксированными размерами в пикселях не работали для такого разнообразия устройств. Решение пришло, когда я полностью перешла на относительные единицы измерения. Базовый размер шрифта был установлен на корневом уровне, а все остальные элементы использовали rem. Для заголовков я применила комбинированный подход: calc(1rem + 1vw). Это дало плавное масштабирование, которое прекрасно смотрелось на всех устройствах — от малых смартфонов до широкоформатных мониторов. Этот проект научил меня, что в типографике "резиновый" подход всегда лучше фиксированного. Теперь при создании любого текстового элемента я сначала думаю о том, как он будет себя вести при изменении размера экрана.

Оформление цвета, фона и границ элементов в CSS

Визуальное оформление элементов — это то, что мгновенно привлекает внимание пользователя и формирует первое впечатление о веб-сайте. Правильное использование цветов, фонов и границ создаёт гармоничную композицию и улучшает пользовательский опыт. 🎨

CSS предлагает несколько способов задания цветов:

Именованные цвета: red, blue, green (около 140 предопределенных имен)
HEX-коды: #ff0000 (красный), #00ff00 (зеленый), #0000ff (синий)
RGB: rgb(255, 0, 0) — красный, rgb(0, 255, 0) — зеленый
RGBA: rgba(255, 0, 0, 0.5) — полупрозрачный красный
HSL: hsl(0, 100%, 50%) — красный, hsl(120, 100%, 50%) — зеленый
HSLA: hsla(0, 100%, 50%, 0.5) — полупрозрачный красный

Основные свойства для работы с цветом:

color — цвет текста
background-color — цвет фона
border-color — цвет границы
outline-color — цвет контура

Для оформления фона используются следующие свойства:

background-image — фоновое изображение (url('image.jpg'))
background-repeat — повторение фона (repeat, no-repeat, repeat-x, repeat-y)
background-position — позиция фона (center, top left, 50% 25%)
background-size — размер фона (cover, contain, 100% 100%)
background-attachment — прокрутка фона (scroll, fixed, local)

Сокращенная запись свойства background позволяет задать все характеристики в одной строке:

background: #f5f5f5 url('pattern.png') no-repeat center / cover;

Для создания градиентов используются функции linear-gradient и radial-gradient:

background: linear-gradient(to right, #ff0000, #0000ff); — линейный градиент от красного к синему background: radial-gradient(circle, #ff0000, #0000ff); — радиальный градиент

Для работы с границами используются следующие свойства:

border-width — толщина границы (1px, 2px, etc.)
border-style — стиль границы (solid, dashed, dotted, double, etc.)
border-color — цвет границы
border-radius — скругление углов (5px, 50%, etc.)

Сокращенная запись для границы:

border: 2px solid #000;

Можно также задавать границы отдельно для каждой стороны:

border-top: 1px solid red; border-right: 2px dashed blue; border-bottom: 3px dotted green; border-left: 4px double orange;

Для создания теней используются свойства:

box-shadow — тень вокруг элемента (смещение по X, смещение по Y, размытие, распространение, цвет)
text-shadow — тень текста (смещение по X, смещение по Y, размытие, цвет)

Примеры:

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); — тень под элементом text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); — тень текста

Позиционирование и отступы: создание идеальной вёрстки

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

Блочная модель (Box Model) — основа для понимания размеров и отступов в CSS:

content — содержимое элемента (текст, изображения)
padding — внутренний отступ между содержимым и границей
border — граница элемента
margin — внешний отступ за границей элемента

Для управления отступами используются свойства:

padding — внутренний отступ (padding: 10px; или padding: 10px 20px 15px 5px;)
padding-top, padding-right, padding-bottom, padding-left — отдельные внутренние отступы
margin — внешний отступ (margin: 10px; или margin: 10px 20px 15px 5px;)
margin-top, margin-right, margin-bottom, margin-left — отдельные внешние отступы

Свойство box-sizing определяет, как вычисляются общие размеры элемента:

content-box (по умолчанию) — width и height задают только размер контента
border-box — width и height включают padding и border

Для управления размерами элементов используются свойства:

width — ширина элемента
height — высота элемента
min-width, max-width — минимальная и максимальная ширина
min-height, max-height — минимальная и максимальная высота

CSS предлагает несколько схем позиционирования элементов:

position: static — нормальный поток документа (по умолчанию)
position: relative — позиционирование относительно нормального положения
position: absolute — позиционирование относительно ближайшего позиционированного предка
position: fixed — позиционирование относительно области просмотра браузера
position: sticky — гибридное позиционирование, сочетающее relative и fixed

При использовании относительного, абсолютного, фиксированного или липкого позиционирования можно использовать свойства top, right, bottom и left для точного размещения элемента.

Свойство z-index контролирует наложение элементов по оси Z (чем больше значение, тем "выше" расположен элемент).

Для управления отображением элементов используются свойства:

display — определяет тип отображения элемента (block, inline, inline-block, flex, grid, none)
visibility — видимость элемента (visible, hidden)
overflow — поведение при переполнении (visible, hidden, scroll, auto)

Flexbox — мощный инструмент для одномерного расположения элементов:

display: flex; — активирует flexbox для контейнера

Основные свойства flex-контейнера:

flex-direction — направление flex-элементов (row, column)
flex-wrap — перенос элементов (nowrap, wrap)
justify-content — выравнивание по основной оси
align-items — выравнивание по поперечной оси

CSS Grid предназначен для двумерной компоновки:

display: grid; — активирует grid для контейнера

Основные свойства grid-контейнера:

grid-template-columns — определяет столбцы сетки
grid-template-rows — определяет строки сетки
gap — промежутки между элементами

Для создания отзывчивых макетов используются:

Медиа-запросы — @media (max-width: 768px) { ... }
Относительные единицы — %, vw, vh, em, rem
Flexbox и Grid — для адаптивных компоновок
Функция calc() — для динамических вычислений (width: calc(100% – 20px))

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

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

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

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

Что такое CSS?

1 / 5

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

Основные принципы работы HTTP

6 сентября 2024

Как установить и настроить Swift на Linux

6 сентября 2024

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

6 сентября 2024

CSS: полное руководство по стилизации элементов для новичков

Что такое CSS: базовые принципы работы и синтаксис

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

Работа с текстом и шрифтами: ключевые CSS-свойства

Оформление цвета, фона и границ элементов в CSS

Позиционирование и отступы: создание идеальной вёрстки

Загрузка...