CSS — это код, который позволяет визуально оформить страницу: раскрасить подзаголовки, поменять фон или отформатировать изображение. CSS — важная часть фронтенд-разработки и один из ключевых навыков для веб-разработчика. В статье расскажем, как устроен код, где используется и как с помощью несложного и понятного CSS-программирования сделать первые шаги в IT-профессии.
Что такое CSS
Когда вы открываете сайт в Интернете, то видите перед собой то, что разработчики называют фронтендом. Фронтенд — часть сервиса, которая отвечает за внешнее представление программы. Он создаётся с помощью трёх основных инструментов — HTML, CSS и JavaScript.
HTML — язык разметки страницы. Он нужен для того, чтобы браузер понимал, как и в какой последовательности отображать информацию. Это что-то вроде каркаса сайта, в котором прописываются основные блоки, ссылки, заголовки и формы.
JavaScript позволяет подключать интерактивные элементы: карты, графику, кнопки, формы обратной связи. Именно JS отвечает за то, что сайт будет реагировать на ваши действия: обновлять страницу, запускать видео или отправлять запрос на обратный звонок.
CSS — язык описания внешней страницы. Он отвечает за визуальную красоту и оформление сайта. Если бы не было CSS, сайты выглядели бы вот так:
Это главная страница Яндекс Практикума без разметки CSS
А это — она же с подключенными стилями
Если в школе у вас были уроки информатики, скорее всего, вы и сами создавали такие страницы: писали несложный код в блокноте, открывали документ в браузере и получали сайт. До середины 90-х это был единственный подход к веб-разработке. Даже серьёзные профессиональные сайты создавались с помощью простой разметки. Сегодня на фоне современных анимированных сайтов они выглядят так, словно их дизайн тоже был придуман на одном из школьных уроков.
Научная соцсеть «Астронет» — один из первых высоконагруженных российских сервисов, ставший прототипом Рамблера. «Астронет» был создан в 1999 году, но его дизайн остался таким же, как и 23 года назад, и содержит минимальное количество стилей. Источник
Но Интернет развивался быстро: в нём стало больше информации, сайтов и браузеров для их отображения. Каждый из браузеров мог поддерживать разные теги форматирования. Когда стандартных возможностей HTML стало не хватать, появился первый стандарт CSS — сначала очень скромный, позволяющий отформатировать цвет или выравнивание текста. А спустя ещё два года, в 1998-м, вышел стандарт CSS2. Он стал настоящим прорывом. Разработчики впервые смогли задавать блочную и строчную модели элементам, звуковые стили и работать с большим количеством элементов на сайте.
Процесс создания сайта похож на работу за типографским станком: разработчик из готовых элементов выстраивает страницу, поэтому этот процесс по аналогии называют вёрсткой. Сейчас без вёрстки страниц CSS невозможно представить полноценную веб-разработку. Если сравнивать сайт с домом, то HTML — это стены, пол и потолок, а CSS — краска, обои или даже картины на стене.
Материал по теме:
Почему стоит попробовать себя в веб‑разработке
Как работает CSS
Чтобы покрасить стену, сначала её нужно возвести. В примере с сайтом роль стен играет HTML-документ — он является базой, к которой подключают стили в виде CSS.
Есть несколько способов это сделать. Например, можно прописать стили прямо в HTML в теге <style>, вот так:
<head>
<style>
h1 {
color: tomato;
}
p {
font-size: 24px;
}
</style>
</head>
Это рабочий способ, но у него немало минусов. Чем больше сайт и сам HTML-файл, тем медленнее будет происходить загрузка. А если такой же стиль нужно будет использовать на нескольких страницах сразу, их придётся переписывать вручную.
Поэтому чаще используют другой подход — создают CSS в отдельном файле с расширением .css. Файл связывают с основным документом при помощи тега . Вот так:
<head>
<link rel="stylesheet" href=main.css">
</head>
Внешний файл можно подключить сразу к нескольким страницам. Тогда, если вы захотите изменить один элемент, достаточно будет поменять его в документе формата CSS, и обновление автоматически применится ко всем файлам. А ещё внешний документ ускоряет загрузку страницы: когда пользователь открывает сайт, файл со стилями сохраняется в кеше и в следующий раз подтягивается оттуда.
То, как именно стили подключаются к документу, влияет не только на формат работы, но и на визуальное представление страницы. Например, есть ещё один способ подключения — инлайн-стили, когда к нужным элементам добавляется атрибут style. Использовать такие стили нужно осторожно: у них наивысший приоритет и их нельзя переопределить с помощью селекторов во внешнем CSS. Это значит, что вы можете указать в коде: «Все заголовки покрасить в зелёный», а на странице они будут фиолетовыми.
Чтобы разобраться, почему так происходит и что это за селекторы, которые могут влиять на код и саму страницу, нужно понять, как работают команды CSS.
Как устроен код CSS
Ключ к пониманию того, как работает CSS, — само название кода. CSS или Cascading Style Sheets переводится как «каскадная таблица стилей». Мы пойдем от простого к сложному и начнем расшифровывать с конца.
Почему стили
Стили — это визуальные особенности, которые нужно придать странице, например цвет текста, размер подзаголовка, тип шрифта или оформление иллюстрации.
Стили или свойства CSS называются правилами. Каждое правило состоит как минимум из одного селектора и одной пары «свойство — значение».
Так выглядит код CSS: здесь мы задаём внешний вид для целого абзаца
Селектор нужен для того, чтобы браузер понимал, к какому элементу CSS будет применяться свойство: заголовку, абзацу, фоновому цвету.
Свойство показывает, что именно будет меняться в этом элементе: цвет, размер, выравнивание. Значение определяет, как именно изменится элемент: станет красным, увеличится вдвое, примет круглую форму.
Например, здесь:
h2 {
color: #32a846;
}
мы говорим браузеру: пусть все заголовки второго уровня (селектор h2) будут иметь цвет (свойство color) зелёный (значение #32a846).
Другие знаки — фигурные скобки, пробелы, абзацы и точки с запятой — не влияют на то, как браузер прочитает код. Они нужны для того, чтобы разработчику и его коллегам было проще читать и редактировать документ.
Почему таблица
Иногда CSS переводят как «каскадные списки стилей». Это тоже правильно: фактически тут нет привычных таблиц со строками и столбцами. Документ CSS — это перечень правил визуального оформления, в котором правила — стили — располагаются в виде списка в каскадном порядке.
Почему каскад
Каскад — один из самых важных принципов в оформлении CSS. Он означает, что все стили сортируются по определённым правилам. Принцип каскада влияет на то, как браузер прочтёт ваш код, и на то, что в итоге увидит пользователь на экране.
Например, сначала вы указали в коде, что все заголовки будут зелёными. А затем в середине документа — что они должны быть красными.
Правило порядка в коде гласит, что при равной специфичности правила, написанные ниже по ходу «чтения», «перебивают» написанное выше. Для браузера правило «покрасить заголовок в красный» важнее, чем правило «покрасить в зелёный», потому что оно написано ниже.
На правила каскада влияют и другие сущности. Например, специфичность правила, про которую мы упомянули выше. Специфичность может быть одинаковой у всех, а может «весить» по-разному: скажем, правила, которые прописаны инлайном, «перебивают» правила на селектор. Вот как это работает.
<style>
p {
color: red;
}
</style>
<p>Цвет текста будет красным — единственное правило описано в теге <style>.<p>
Если мы добавим в код инлайн-правило <р style="color: blue">Цвет текста стал синим — инлайн «перебивает» <style>.</p>— текст станет синим независимо от того, написан он вверху кода или внизу.
А ещё на принцип каскада могут влиять браузеры: у каждого из них свои стили и спецификации, которые могут нарушать заданный разработчиком порядок. Например, Google Chrome запрещал делать слишком мелкий шрифт в полях ввода вопреки всем правилам, прописанным в коде.
Знание принципа каскада и умение разбираться в порядке отображения кода CSS — то, что зачастую отличает начинающего веб-разработчика от мидла и специалиста-сеньора. При этом правила как самого кода, так и браузеров могут меняться. Недостаточно просто один раз выучить их все — важно следить за обновлениями и изучать новые спецификации языка CSS.
Ещё одна область, в которой должен разбираться программист, — методологии CSS: рекомендации, как лучше написать код так, чтобы с ним было удобно работать другим разработчикам.
Сегодня есть несколько ключевых методологий. Одни из самых распространенных — БЭМ, методология, созданная в Яндексе, и Atomic CSS, или атомарный CSS.
Для чего нужны методологии
Методологии — способ контролировать код и поддерживать в нём порядок. Если у вас большой проект, который проживёт не одну неделю, нужно сделать так, чтобы его было легко обслуживать: вносить изменения, переиспользовать и поддерживать в рабочем состоянии. Если вёрстка CSS написана без методологии, она может разрастись и выйти из-под контроля, например, появятся дублирующие друг друга куски, а любое редактирование кода приведёт к непредсказуемым последствиям.
Чтобы этого не произошло, разработчики создают методологии. У Яндекс есть БЭМ (расшифровывается как «Блок, Элемент, Модификатор») — подход, в основе которого лежит разделение интерфейса на независимые блоки. Блоком считается независимый компонент страницы, например блок search form — форма поиска.
Так выглядят блоки с позиции пользователя. Источник
Блоки можно вкладывать друг в друга, объединять или использовать для создания более сложных, родительских блоков. У блоков могут быть элементы СSS — части, которые работают только в контексте самого блока и не существуют в отдельности, — и модификаторы, изменяющие внешний вид блока или элемента. Управляя отдельными блоками, разработчик может сделать код CSS менее связанным, понятным в отрыве от контекста и удобным для повторного использования.
Другая методология, атомарный CSS, преследует сходные цели — сократить код, сделать его понятным и повысить возможность повторного использования CSS. Но, в отличие от БЭМ, здесь используются не смысловые блоки, а отдельные правила, точечно применяемые в нужных местах. Если мы хотим сделать текст большим, полужирным и красным, мы добавляем ему классы font-size-xl, font-size-bold и color-red, в которых уже прописаны все необходимые свойства. По сути, это универсальная коллекция стилей, которую можно применять в любых проектах.
Атомарный CSS позволяет сократить код и максимально переиспользовать стили в любых компонентах. За счёт универсальности атомарный подход используется в популярных фреймворках Tailwind и Bootstrap — это инструменты, которые упрощают работу с кодом за счёт готовых шаблонов и оформленного набора компонентов.
Кто и как работает с CSS-кодом
CSS в строгом смысле не является языком разработки, поэтому профессии «разработчик на языке CSS» не существует. Ещё в 2000-х, когда не существовало жёсткого разделения на фронтенд и бэкенд, программисты, писавшие на HTML и CSS, назывались «верстальщиками». Сейчас этот термин тоже используется — но намного чаще про таких специалистов говорят «веб-разработчик» или «фронтенд-разработчик».
Для веб-разработчика CSS — не единственный рабочий инструмент. Чтобы работать с фронтендом, нужно уметь строить каркас в HTML, писать на JavaScript, работать с фреймворками, понимать, как работает HTTP-протокол и браузерные API.
На практике эти знания могут пригодиться в таких проектах, как, например, интеграция платёжной системы, создание адаптивного сайта или интерфейса для сервиса. Звучит сложно, но в действительности веб-разработка считается одной из IT-профессий с комфортным порогом входа. Основам CSS можно научиться с нуля, не будучи техническим специалистом. Например, в Яндекс Практикуме есть 10-месячный курс веб-разработки, на котором можно разобраться в CSS, HTML и JavaScript, отработать навыки на практике, окончить обучение с пятью реальными проектами в портфолио, а возможно, и получить приглашение на работу.
Интернет развивается стремительно, поэтому у веб-разработчика, хорошо разбирающегося в CSS, большие перспективы. Несмотря на внешнюю простоту, в этом языке, как и во всей фронтенд-разработке, есть куда расти: можно изучать спецификации и адаптивную вёрстку, разбираться со смежными инструментами — Git, Webpack, Figma — или пополнять стек новыми технологиями. Веб-разработка — отличный способ войти в отрасль, попробовать себя — и развиваться дальше в том направлении, которое будет ближе и интереснее всего.
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
