16 марта 2022

18 апреля 2022

9 мин

Программирование css

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

С помощью CSS задают цвет, размеры, анимацию, адаптируют сайт под устройства.

Автор статьи

Виктория Дербенченко

Редактор

Когда-то сайты были не такими красивыми, какими мы их видим сейчас. Раньше, чтобы отображать элементы, разработчики использовали разные хаки. Например, для отступов применяли прозрачные гифки, а чтобы разделить текст — специальные символы пробела. Но всё изменилось: в 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”); }

задаст фону изображение image1.png из папки img.

📌 Анимация

В 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-разметке, создавать структуру.

Atomic CSS

Атомарный 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, БЭМ.

Содержание

Шрифты