img
img
16 марта 2022
18 апреля 2022
9 мин
58

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

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

img
Автор статьи
Виктория Дербенченко
Редактор
img

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

Основы верстки

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

Сайт пишут с помощью HTML-кода, но он задает только сами элементы — их логическую структуру. А специальный язык стилей CSS придает им визуальные характеристики: цвет, шрифт, размеры.

главная страница Google 1996 года

Главная страница 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 разработали специальную систему приоритетов:

  1. Внутренний стиль.
  2. Встроенный стиль.
  3. Внешний стиль.

📌 Правило @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

Подключение шрифта в Google Fonts

Свойства

С помощью свойств в CSS задают условия отрисовки и позиционирования HTML-элементов. Полный список свойств — в справочнике HTML5Book. Рассмотрим несколько популярных примеров.

📌 Свойства текста

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

Рассмотрим свойство writing-mode — эта технология еще на стадии разработки. Свойство позволяет указать направление текста:

  • lr-tb — слева направо и сверху вниз;
  • rl-tb — справа налево и сверху вниз;
  • tb-rl — сверху вниз и справа налево;
  • bt-rl — снизу вверх и справа налево.

 

список значений и поддержка браузерами на MDN

Полный список значений и поддержка браузерами на 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 — начальный этап изучения веб-, frontend-разработки. Это язык описания внешнего вида веб-страниц.
  • Таблицы стилей бывают внешними, внутренними и встроенными.
  • Для выбора элементов, к которым применяют стили, используют селекторы — названия тегов, классы или id.
  • С помощью CSS задают размер, толщину, цвет текста, фон, анимацию. Адаптируют сайт под разные устройства.
  • Чтобы код легче читался, применяют методологии структурирования — Atomic CSS, БЭМ.
img
Подпишитесь на рассылку, чтобы Не упустить что-нибудь новое
Просто и понятно о том, как получить новую профессию


    Ещё по теме
    img
    Программирование
    IT-компания — это не только Google

    Рассказываем про «Тинькофф», «Билайн» и другие компании.

    16 мая 2022
    2 мин
    карьера
    img
    Программирование
    Как составить и оформить баг-репорт

    Указывайте в отчете только одну ошибку, прикладывайте скрины, сообщения и коды.

    04 мая 2022
    6 мин
    баг-репорт
    img
    Программирование
    Как работать со списками в Python

    Учимся добавлять и изменять элементы, объединять и копировать списки.

    02 мая 2022
    5 мин
    python
    списки
    img
    Программирование
    Цикл for в Java: что это, как с ним работать

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

    25 апреля 2022
    6 мин
    java
    циклы
    языки программирования
    img
    Программирование
    Как работать с модулем JSON в Python

    JSON часто применяют, когда разрабатывают API и веб-приложения.

    25 апреля 2022
    9 мин
    python
    языки программирования
    img
    Программирование
    Как IT-специалисту из России найти работу за рубежом в 2022 году

    Есть сервисы, платформы и телеграм-каналы с вакансиями по всему миру.

    21 апреля 2022
    6 мин
    востребованные профессии
    img
    Программирование
    Что такое HTML: основные теги

    С помощью HTML структурируют страницу на сайте, добавляют картинки, таблицы, списки.

    16 апреля 2022
    6 мин
    html (hypertext markup language)p Language)
    верстка сайтов
    img
    Программирование
    Как работает цикл for в Python

    Цикл for используют, когда количество повторов известно заранее.

    14 апреля 2022
    5 мин
    python
    циклы
    языки программирования
    img
    Программирование
    Комьюнити для разработчика

    Есть комьюнити на платформах, под эгидой компаний или самоорганизующиеся.

    07 апреля 2022
    6 мин
    общение
    сообщество
    img
    Программирование
    Гайд: как определить, какое направление в IT тебе подходит

    Обязанности и зарплата аналитика, Python- и Java-разработчиков и не только.

    01 апреля 2022
    9 мин
    выбор профессии
    гуманитарий в IT
    img
    Программирование
    Правильное питание на удаленке. Почему это важно?

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

    01 апреля 2022
    7 мин
    удаленная работа
    img
    Программирование
    Как я нашла время на учебу, когда времени не было совсем

    Благодаря методу «круга-пирога» увидите свое время и возьмете его под контроль.

    30 марта 2022
    7 мин
    дистанционное обучение
    домашняя работа
    самоорганизация
    img
    Программирование
    9 причин, почему не получается внедрять полезные привычки

    Ищите мотивацию, хвалите себя, визуализируйте план и результат.

    30 марта 2022
    8 мин
    постановка цели
    самоорганизация
    img
    Программирование
    Как больше успевать: зачем есть по одной лягушке в день и как справиться со слоном

    Лягушки — небольшие, но неприятные дела, слоны — долговременные задачи.

    30 марта 2022
    2 мин
    самоорганизация
    эффективность
    img
    Программирование
    Как поставить цель и не бросить на полпути

    Когда ставите цель, отталкивайтесь от проблемы и конкретизируйте решение.

    30 марта 2022
    6 мин
    постановка цели
    самоорганизация
    img
    Программирование
    Кто такой менеджер проектов, чем занимается и как им стать

    Этот специалист контролирует все этапы проекта и приводит его к успеху.

    30 марта 2022
    8 мин
    управление проектами
    img
    Программирование
    Как не угробить здоровье на удаленке

    Советы всем удаленщикам — больше двигаться, делать зарядку, разминку для глаз.

    30 марта 2022
    9 мин
    удаленная работа
    img
    Программирование
    Junior, Middle, Senior в разработке — кто есть кто и как перейти на уровень выше

    Junior зарабатывает от 40 000 ₽, Middle от 100 000 ₽, а Senior от 250 000 ₽ и выше.

    29 марта 2022
    12 мин
    junior
    middle
    senior
    img
    Программирование
    Как банковская служащая в 32 года с нуля перешла в IT и в 40 открыла свою компанию по разработке онлайн-игр

    Совет от героини: сделайте первый шаг, дальше будет проще; учитесь и идите вперед.

    29 марта 2022
    14 мин
    смена профессии
    смена сферы
    img
    Программирование
    Пять приложений, чтобы не отвлекаться от учебы и работы

    Фишки и стоимость Forest, WaterDo, SleepTown, Alarmy, Pomodoro Timer Lite.

    29 марта 2022
    5 мин
    самоорганизация
    img
    Программирование
    Самый краткий гид по специализациям программистов

    Программист fullstack получает до 550 000 ₽, а на тестировщика учатся 4–15 мес.

    29 марта 2022
    3 мин
    backend-разработка
    c++
    frontend-разработчик
    java-разработчик
    востребованные профессии
    инженер по тестированию
    img
    Программирование
    Язык SQL: что это такое и зачем он нужен

    SQL используют в банках, торговле, перевозках: везде, где много информации.

    29 марта 2022
    7 мин
    mysql
    базы данных
    img
    Программирование
    Как освоить c нуля IT-профессию и перейти на новую работу без опыта

    Сначала поставьте цель: выберите сферу и определите, кем видите себя через 10 лет.

    29 марта 2022
    6 мин
    выбор профессии
    смена сферы
    img
    Программирование
    Словарь IT-сленга

    Термины разработки, Scrum, неформального общения, организационных процессов.

    29 марта 2022
    13 мин
    сленг
    словарь
    img
    Программирование
    Подборка: 33 книги и подкаста для начинающих программистов

    Узнаете о работе программиста и поймете, как писать хороший код.

    28 марта 2022
    10 мин
    книга
    подкаст
    img
    Программирование
    Хакнуть мозг: как современные знания помогают мозгу развиваться и учиться

    Мозг меняется всю жизнь. Мы можем на него влиять: изучать новое, развивать навыки.

    28 марта 2022
    8 мин
    развитие мозга
    img
    Программирование
    Как совмещать работу, учебу, семью и быт: рассказ будущего тестировщика

    Помогает планирование, вера в то, что реально изменить жизнь, поддержка семьи.

    28 марта 2022
    8 мин
    курс обучения
    личная история
    онлайн-образование
    смена профессии
    тестирование
    img
    Программирование
    Как создать телеграм-бота на Python

    Python — самый популярный язык программирования в феврале 2022 года.

    16 марта 2022
    9 мин
    python
    img
    Программирование
    Какие профессии в IT подойдут гуманитарию

    Гуманитарию подойдут профессии тестировщика, веб-дизайнера и не только.

    15 марта 2022
    9 мин
    выбор профессии
    карьера
    img
    Программирование
    Frontend или backend: чем отличаются и какой вид разработки выбрать

    Фронтендер создает интерфейс продукта, бэкендер работает с серверной частью.

    15 марта 2022
    7 мин
    backend-разработка
    frontend
    img
    Программирование
    Кто такой Java-разработчик, чем занимается и как им стать

    Обязанности Java-разработчика — писать код, тестировать и улучшать его.

    15 марта 2022
    7 мин
    java
    java-разработчик
    карьера
    img
    Программирование
    Что такое IT-сфера и почему она сейчас так популярна

    IT-отрасль привлекает удаленкой, карьерным ростом, высоким доходом.

    04 марта 2022
    7 мин
    it
    карьера
    img
    Программирование
    Как установить Python на компьютер и начать на нём писать

    Воспользуйтесь Google Colab, онлайн-интерпретаторами или скачайте Python.

    04 марта 2022
    4 мин
    python
    языки программирования
    img
    Программирование
    Как создать приложение для Андроид самостоятельно с нуля: инструкция

    Используйте конструкторы no-code, Java или Kotlin, Android Studio.

    04 марта 2022
    8 мин
    андроид
    разработка
    img
    Программирование
    Postman: как пользоваться программой для тестирования API

    Бесплатный сервис позволяет писать тесты, поддерживает разные типы API.

    04 марта 2022
    6 мин
    api
    postman
    img
    Программирование
    Google Colab: что это такое и как с ним работать

    Colab используют, чтобы создавать код на Python прямо в браузере.

    04 марта 2022
    4 мин
    google colab
    img
    Программирование
    Как перейти в разработчики из другой профессии

    Освоить новую профессию реально с нуля в любом возрасте, главное — мотивация.

    03 марта 2022
    8 мин
    карьера
    разработка
    img
    Программирование
    Как помочь ребенку выбрать профессию

    Не выбирайте по принципу «чем проще, тем лучше» и уважайте желания ребенка.

    03 марта 2022
    7 мин
    карьера
    родителям
    img
    Программирование
    Нужно ли высшее образование программисту: сравниваем все «за и «против»

    Важнее опыт и проекты в портфолио, но иногда высшее образование все-таки нужно.

    02 марта 2022
    5 мин
    образование
    img
    Программирование
    Стоит ли переходить на удаленку: плюсы и минусы

    Сегодня удаленка доступна для разных сфер: ИТ, маркетинг, сервис, продажи.

    02 марта 2022
    6 мин
    удаленка
    img
    Программирование
    Какой язык программирования выбрать новичку

    Выбирайте по уровню спроса у работодателей и направлению в программировании.

    24 февраля 2022
    7 мин
    языки программирования
    img
    Программирование
    Фильмы про программистов: лучшие фильмы и сериалы про компьютерных гениев

    20 фильмов и сериалов для тех, кому интересен мир информационных технологий.

    24 февраля 2022
    7 мин
    фильмы
    img
    Программирование
    Фронтенд-разработчик: кто это такой и как им стать с нуля

    Frontend-разработчик создает внешнюю — пользовательскую часть веб-ресурса.

    24 февраля 2022
    8 мин
    frontend
    карьера
    img
    Программирование
    Backend-разработчик: кто это такой и чем он занимается

    Backend-разработчик отвечает за внутреннюю — серверную сторону веб-ресурса.

    24 февраля 2022
    9 мин
    backend
    карьера
    img
    Программирование
    Что такое спринты в программировании и как их выполнять

    Спринты используют в долгих проектах и сложных продуктах.

    24 февраля 2022
    5 мин
    agile
    scrum
    спринты в программировании
    img
    Программирование
    Как начать изучать Python

    Преимущества Python — понятный синтаксис и читаемость, готовые библиотеки.

    24 февраля 2022
    9 мин
    python
    языки программирования
    img
    Программирование
    Jupyter Notebook: что это такое и как им пользоваться

    Jupyter-ноутбуки применяют для визуализации данных в big data и data science.

    24 февраля 2022
    7 мин
    jupyter notebook
    python
    разработка
    img
    Программирование
    Как развить soft skills

    Soft skills помогают развивать компетенции, осваивать новые тенденции в работе.

    24 февраля 2022
    11 мин
    soft skills
    саморазвитие
    img
    Программирование
    Как начать изучать Java

    На Java разрабатывают всё: от приложений и ПО до технологий Big Data.

    24 февраля 2022
    7 мин
    java
    java-разработчик
    языки программирования