Что такое CSS и зачем его изучают
У вас бывало такое, что из-за плохого интернета сайт отображал столбец текста с ссылками, и только спустя время появлялась картинка и дизайн? Все элементы, появившиеся после загрузки — визуальное оформление сайта, которое получается как раз благодаря CSS. CSS — это каскадная таблица стилей. В статье рассказываем, что это, как работает и для чего нужно. Для […]
У вас бывало такое, что из-за плохого интернета сайт отображал столбец текста с ссылками, и только спустя время появлялась картинка и дизайн? Все элементы, появившиеся после загрузки — визуальное оформление сайта, которое получается как раз благодаря CSS. CSS — это каскадная таблица стилей. В статье рассказываем, что это, как работает и для чего нужно.
Учитесь бесплатно за счёт государства
Экономия до 100 000 ₽ на любой программе
Для чего нужна каскадная таблица стилей
Каскадная таблица стилей или CSS (Cascading Style Sheets) — это язык разметки, благодаря которому мы видим красиво оформленные сайты.
С помощью HTML разработчик создает документ с гиперссылками, списками, заголовками и подзаголовками, разными шрифтами. Так получается неоформленный каркас сайта, с текстом таблицами и иллюстрациями. Когда сайты и интернет только появились, этого было достаточно. Сейчас, чтобы выделиться на фоне конкурентов, сделать сайт удобным и приятным для чтения, страницам придают индивидуальность с помощью визуала. Он и достигается благодаря CSS.
Объекты сайта размещаются с помощью HTML, а за размер, цвета, фоны, вид и работа кнопок отвечает CSS.
Основы CSS
CSS стал популярен в веб-разработке, потому что позволяет быстро изменять визуал сайта, не используя другие языки программирования.
Чтобы понять основы каскадных таблиц, разберем синтаксис разметки, медиазапросы и теги.
Синтаксис разметки
Синтаксис CSS в отдельном файле в формате (.css) выглядит так:
селектор {
свойство: значение;
}
Селектор — это ссылка на элемент в HTML, который нужно оформить. В качестве селектора в коде могут быть использованы типы элемента (p), классы, ID.
Свойство — характеристика элемента, которую меняем, например, цвет, как будет в примере ниже.
Значение — цифровое или текстовое имя свойства.
В качестве селектора будем использовать тип (p). Все элементы, объединенные этим типом станут зелеными:
p {
color: green;
}
Так выглядит самый базовый синтаксис, но его можно усложнить и добавить новые функции.
Медиа-запросы и тег <style>
Медиа-запросы — это правила-триггеры, применяемые к каскадной таблице. Они реагируют на тип устройства и экрана, браузер и ориентацию устройства (портретную или горизонтальную) и показывают страницу сайта в зависимости от условий, заданных кодом.
Такой запрос в коде пишется как @media. Рассмотрим на примере, где цвет нужно сделать зеленым, а расширение ставим 768 px для планшетов с портретной (вертикальной) ориентацией:
@media (max-width: 768px) {
p: {
color: green;
}
}
Здесь используется определение разрешения экрана. Дело в том, что медиа-запрос следует правилу, которое основано на параметрах минимальной и максимальной ширины. Например, код выше поменяет цвет текста на зеленый в разделе section, для экранов, разрешение которых равно или меньше 768 пикселей.
Теперь перейдем к тегу <style>. Он применяется, чтобы определить тип страницы. Тег <style> можно использовать внутри тега <head> или отдельным CSS файлом. В первом случае синтаксис будет выглядеть:
<head>
<style>
p {color: green;}
</style>
</head>
<body>
<p> Этот текст станет зеленым после применения кода.
</body>
Здесь первые два элемента — открывающие, последние — завершающие часть кода.
В втором случае так:
<p style=”color: green; “> Текст. </p>
Хотите сменить профессию или повысить квалификацию?
Федеральный проект «Активные меры содействия занятости» даёт возможность пройти обучение бесплатно за счёт государства
- Программы от ведущих вузов России — от 2 месяцев
- Удостоверение или диплом установленного образца
- Центр карьеры: 7 500+ вакансий, помощь с трудоустройством
Что еще может CSS
Поскольку каскадные таблицы используются для оформления всего документа, значит можно менять не только цвета и стили: вы можете задать параметры для SVG-изображения.
Коротко об SVG-изображении. Это вид графики, которую создают с помощью математического описания линий, кругов, эллипсов, прямоугольников, кривых, которые образуют детали будущего изображения. По сути это инструкция для построения картинки по точкам и кривым.
В коде вы можете задать размеры изображения:
svg {
width: 120px;
height: 68px;
}
Так, ваша картинка будет размером 120 x 68.
Далее вы можете добавить контент, которого изначально не было в коде, например, подпись к SVG-картинке. Для этого используют псевдоселекторы :after :before, благодаря им вы сможете разместить новый объект до или после выбранного элемента:
.block:after {
content: "text ";
}
Разделение контента (HTML) и представления (CSS)
Появление CSS привело к появлению идеи о разделении контента и оформления документа.
До CSS верстку документа выполняли HTML-таблицами. Если хотели создать сайт в три колонки, то брали HTML таблицу с тремя колонками и прозрачными границами.
Проблема состояла в том, что при верстке таблицами оформление привязывалось к контенту. Если изменяли контент, то нужно было заново верстать очень много таблиц. Это огромная работа, поэтому когда появился CSS, работать стало намного легче, ведь теперь оформление отделено от контента.
CSS — дополнительный язык разметки, благодаря которому создается визуальное оформление сайта. У него много возможностей и начать кодить на нем не сложно.
Как изучить и начать использовать CSS для заработка
Применить знания о CSS, HTML и стать квалифицированным специалистом реально за 2 месяца на бесплатном курсе «Web-программист: с нуля до первых проектов». Обучение проходит в рамках федерального проекта «Содействие занятости».
На курсе вы узнаете, как создать сайт понятным и удобным для пользователя, научитесь писать код и использовать инструменты разработки и верстать сайты для всех типов устройств.
Вы научитесь:
- Выстраивать элементы сайта так, чтобы он был удобным и понятным
- Понимать все внутренние процессы, которые происходят на сайте
- Писать код и использовать инструменты разработки
- Верстать сайты для всех типов устройств
Обучение проходит в онлайн-формате на образовательной платформе. Все учебные материалы, лекции и презентации доступны вам в любое время. Обучаться можно по гибкому графику: после работы или на выходных.
После окончания программы вы получите документ установленного образца и возможность пройти оплачиваемую стажировку в компаниях-партнерах проекта. Сейчас «Содействие занятости» сотрудничает с крупными компаниями: Литрес, МТС, Яндекс, Кинопоиск, ВТБ, банк «Открытие», Теле2 и другими.
Как только закончите обучение, вы получите доступ в закрытый канал с 4500+ вакансиями от проверенных работодателей России. Мы связываемся с работодателями по всей России и ищем для вас актуальные вакансии «с опытом» и «без», чтобы вы могли найти работу мечты после обучения. Каждый день в канал добавляется больше 10 свежих вакансий.
Чтобы вам было легче и комфортнее найти работу после обучения, чувствовать поддержку и получать помощь и ответы на вопросы, обращайтесь в Центр карьеры. Вы научитесь создавать продающее резюме, оформлять портфолио, писать сопроводительные письма.
Наши HR-специалисты профессионально помогут:
- Сориентироваться в сферах, где вам стоит искать работу по своей специальности.
- Понять, на какую зарплату можно претендовать (подготовят статистику по вашей позиции).
- Определиться с чего начать, если планировали менять работу.
- Узнать, как действовать при угрозе увольнения или сокращения.
- Составить план поиска работы.
- Правильно коммуницировать с работодателем на всех этапах работы.
Бесплатно помогаем найти работу мечты
Лучшая инвестиция — это инвестиция в себя, в свои знания и будущее. Оставьте заявку на бесплатное обучение прямо сейчас и станьте участником проекта.
Принять участие
Подайте заявку —
забронируйте место в группе
45 000 мест на 2026 год. Бесплатное обучение по федеральному проекту «Активные меры содействия занятости»
- Онлайн
- От 2 месяцев
- Бесплатно
- Диплом
