Когда-то сайты были не такими красивыми, какими мы их видим сейчас. Раньше, чтобы отображать элементы, разработчики использовали разные хаки. Например, для отступов применяли прозрачные гифки, а чтобы разделить текст — специальные символы пробела. Но всё изменилось: в 1996 году опубликовали первую версию CSS (англ. Cascading Style Sheets — каскадные таблицы стилей).
Основы верстки
CSS — это технология, которая описывает форматирование элементов веб-страницы. С 1996 года она менялась, и сейчас разработчики используют уже третью версию.
Сайт пишут с помощью HTML-кода, но он задает только сами элементы — их логическую структуру. А специальный язык стилей CSS придает им визуальные характеристики: цвет, шрифт, размеры.
Главная страница Google 1996 года
Виды таблиц стилей
Правильный способ применять стили — подключить внешние файлы. Но задать формат отображения можно и по-другому: применить внутренние или встроенные стили.
📌 Внешние файлы
Файлу стилей «style.css» задают любое имя. Иногда в проекте используют несколько таких файлов. Это помогает уменьшать их объем и делать файлы более читаемыми, разделять логику. Чтобы подключить к странице файл со стилями, в HTML-документе в блоке <head> добавьте тег <link>. Общий вид конструкции:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="[абсолютный или относительный путь к файлу]">
<title>Заголовок страницы</title>
</head>
<body>
</body>
</html>
Что означает каждый атрибут:
- rel отвечает за отношение между документом и указанным файлом — с его помощью браузер понимает, как воспринимать файл, и правильно его применяет;
- type указывает тип файла, используя спецификацию MIME — стандарт для форматирования и кодировки;
- href указывает, где находится файл; используют абсолютный и относительный пути расположения на хосте — вашем компьютере или компьютере в дата-центре, на котором находится сайт.
📌 Встроенный CSS
Такой формат подключения — описание стилей внутри тега <style> перед закрывающим тегом </head> HTML-документа. Этот способ применения стилей считают некорректным, так как их трудно читать и изменять. Но такой подход полезен для быстрой проверки нескольких изменений. Так используют встроенные стили:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Заголовок страницы</title>
<style type="text/css">
p {
color: blue; /* сделать текст всех абзацев синим */
}
a {
text-decoration: none; /* отключить стандартное форматирование ссылок */
}
</style>
</head>
<body>
</body>
</html>
📌 Внутренние стили
Последний способ задать элементу оформление — указать стиль, добавив внутри тега атрибут style. Внутренние стили применяйте только к единичным элементам, так как они затрудняют изменения. Пример такого способа:
<!— так контейнеру элементов мы задаем
фиксированный размер 150 пикселей в ширину
и 200 пикселей в высоту —>
<div style="width: 150px; height: 200px;">…</div>📌 Приоритеты
Несколько вариантов форматирования будут конфликтовать между собой. Например, указание внутреннего стиля для элемента перепишет пересекающееся форматирование из подключенного файла. Чтобы решать такие проблемы, в CSS разработали специальную систему приоритетов:
- Внутренний стиль.
- Встроенный стиль.
- Внешний стиль.
📌 Правило @import
К примеру, вы используете несколько файлов стилей: «images.css» для картинок, «mobile.css» для мобильных устройств и «main.css» в качестве основного файла. Чтобы не подключать все файлы по отдельности с помощью тега <link>, используйте конструкцию «@import». Для этого напишите в самом начале файла «main.css»:
@import url('images.css');
@import url('mobile.css');
/* далее идут стили в основном файле */
p {
color: blue;
}
В HTML-документе подключите только основной файл, так как в него уже будет встроен CSS-код из дополнительных.
Селекторы
Их используют, чтобы выбрать, к каким элементам применять стили. Это могут быть id, классы, названия тегов, селекторы атрибутов и псевдоклассов.
📌 Селектор id
Например, внутри HTML-файла есть блок <div> с атрибутом «id». Ему задано значение «unique_row»:
<div id=”unique_row”>…</div>Для обращения к элементам по id используйте решетку + название идентификатора. Чтобы задать размер и границу контейнеру из примера, добавьте в файле стилей:
#unique_row {
width: 400px;
height: 200px;
border: 1px solid black; /* граница толщиной 1 пиксель, сплошная, черного цвета */
}
Id должен быть уникальным, поэтому не получится применить стиль к нескольким элементам.
📌 Селектор класса
Классы применяют к нескольким элементам сразу. А у элемента может быть несколько классов одновременно. Задают их через атрибут «class»:
<div class=”block”>...</div>
<div class=”block”>...</div>
<div class=”block”>...</div>
Это три контейнера с классом «block». Чтобы обратиться к этим элементам в CSS-файле, используйте точку + имя класса. Задайте стили блокам:
.block
width: 400px;
height: 200px;
border: 1px solid black;
}
📌 Селектор атрибута
Он позволяет выбирать элементы с указанным атрибутом:
img[alt] — выберет <img src=”...” alt=””>, но пропустит <img src=””> или <img src=”” title=”...”>📌 Селектор псевдокласса
Он нужен, чтобы задавать стили элементам, над которыми находится курсор. Или тем, по которым кликнули. Полный список псевдоклассов смотрите на платформе для обучения MDN.
Например, a:hover — выберет тег <a>, но стили применяются, только если курсор находится над ним.
Шрифты
Есть несколько классов шрифтов:
- без засечек (sans-serif);
- с засечками (serif);
- фиксированной ширины (monospace);
- курсив (cursive);
- декоративные шрифты (fantasy).
Шрифт задают с помощью свойства font-family. Например:
font-family: “Helvetica”, sans-serif;Браузер считывает файл стилей. Видит, что установлен шрифт Helvetica. Если браузер не находит его, он берет первый шрифт без засечек (sans-serif).
Загружайте шрифт в формате .ttf на сайт, чтобы текст отображался правильно. Например, у вас есть файл шрифта с названием «SpecialFont.ttf». Чтобы подключить его, в папке сайта создайте подпапку fonts. Положите туда файл шрифта, а в начале файла стилей — после всех @import — напишите:
@font-face {
font-family: MySpecial; /* имя шрифта */
src: url(“fonts/SpecialFont.ttf”); /* путь к нему */
}
Задайте этот шрифт всей странице сразу:
body {
font-family: MySpecial;
}
Чтобы не искать файлы шрифтов и упростить подключение, воспользуйтесь сервисом Google Fonts. Найдите подходящий шрифт и откройте его страницу. Выберите необходимые стили, скопируйте код добавления шрифта в правом модальном окне.
Есть два способа добавить шрифт. Первый — внутри HTML-документа с помощью тега <link>. Второй — внутри файла стилей с помощью инструкции @import.
Подключение шрифта в Google Fonts
Свойства
С помощью свойств в CSS задают условия отрисовки и позиционирования HTML-элементов. Полный список свойств — в справочнике HTML5Book. Рассмотрим несколько популярных примеров.
📌 Свойства текста
Такие свойства задают тексту шрифт, размер, толщину, цвет, межстрочный интервал, тени. Делают его подчеркнутым или зачеркнутым, курсивным или жирным. Приводят слова к нижнему или верхнему регистру. Делают отступы в начале абзаца, выравнивание, перенос.
Рассмотрим свойство writing-mode — эта технология еще на стадии разработки. Свойство позволяет указать направление текста:
- lr-tb — слева направо и сверху вниз;
- rl-tb — справа налево и сверху вниз;
- tb-rl — сверху вниз и справа налево;
- bt-rl — снизу вверх и справа налево.
Полный список значений и поддержка браузерами на MDN
📌 Цвет и фон
Чтобы установить в качестве фона изображение или цвет, используйте свойство background для выбранного селектора. Например,
{ background: green; }{ background: url(“img/image1.png”); }📌 Анимация
В CSS создают анимации для элементов. Например, делают так, чтобы текст менял цвет, кнопка увеличивалась, картинка уменьшалась или вращалась.
Этот код заставит параграфы переливаться:
p {
animation-duration: 5s; /* длительность анимации */
animation-name: colorful; /* название анимации */
animation-iteration-count: infinite; /* делаем ее бесконечной */
margin: auto; /* выравниваем по горизонтали */
}
/* здесь создают правила анимации под названием colorful */
@keyframes colorful {
0% {
color: orange;
}
33% {
color: red;
}
66% {
color: blue;
}
100% {
color: orange;
}
}
Результат CSS-кода из примера
Медиазапросы
Нужны, чтобы применять стили для разных устройств и сохранять адаптивность веб-страницы. Указывайте с их помощью альбомную или книжную ориентацию, тип устройства — принтер, телевизор или монитор, минимальную и максимальную ширину экрана. Например, чтобы задать стили для устройств с шириной экрана до 600 пикселей, напишите:
@media screen and(max-width: 600px) { /* селекторы и CSS-инструкции */ }Методологии
Они позволяют придерживаться определенной структуры кода. Так фронтендеру легче ориентироваться внутри файлов стилей и в HTML-разметке, создавать структуру.
Атомарный CSS — это подход к организации кода, при котором каждому свойству или группе выделяют свой класс. Так вы сможете повторно использовать код, применять нужные классы к элементам в HTML-разметке.
Методологию «Блок, элемент, модификатор» придумал «Яндекс». Идея в том, чтобы разбивать страницу на блоки — независимые части, которые можно применять повторно.
Как изучать
👨🎓 Курсы
CSS изучают на курсах по верстке и созданию сайтов с нуля. Или в рамках обучения на веб- или frontend-разработчиков.
Изучать frontend-разработку приходите в онлайн-университет Skypro. Вы будете работать с CSS целый год: освоите базовый синтаксис JavaScript, научитесь писать чистый код, познакомитесь с инструментами разработчика. Сделаете несколько проектов: интернет-магазин, приложение, сервис покупки авиабилетов. Соберете функциональные онлайн-игры, поработаете с виджетами и сделаете проект на React.
«Фронтенд — это возможность за три-четыре года стать работником, которого хотят по всему миру. Можно уехать или остаться, путешествовать и жить как хипстер. А еще несколько лет назад ты требовал картошку взвесить, прежде чем на кассу нести».
Александр Шлейко frontend-разработчик в «Яндексе», автор и преподаватель буткемпа «Frontend-разработчик» в Skypro
📘 Книги
- «Новая большая книга CSS», Дэвид Сойер Макфарланд.
- «CSS для профи», Кит Грант.
- «CSS — каскадные таблицы стилей», Эрик Мейер.
- «HTML и CSS. 25 уроков для начинающих», Владимир Дронов.
- «HTML и CSS. Разработка и дизайн веб-сайтов», Джон Дакетт.
Коротко о CSS
- CSS — начальный этап изучения веб-, frontend-разработки. Это язык описания внешнего вида веб-страниц.
- Таблицы стилей бывают внешними, внутренними и встроенными.
- Для выбора элементов, к которым применяют стили, используют селекторы — названия тегов, классы или id.
- С помощью CSS задают размер, толщину, цвет текста, фон, анимацию. Адаптируют сайт под разные устройства.
- Чтобы код легче читался, применяют методологии структурирования — Atomic CSS, БЭМ.
