Написать HTML-разметку документа — это лишь малая часть ежедневных задач веб-разработчика в конкретном проекте. Если вы знаете, что такое HTML, какие теги используются в разметке и как правильно писать документ — переходите к следующему этапу.
Расскажем, что такое CSS с нуля: как устроен его код и как прописать стили в духе гуру-разработчика, а не новичка после бесплатных интенсивов.
Что такое CSS
Каждый HTML-документ имеет базовые параметры для тегов. Например, расположение параграфов для тега [p], точки для ненумерованных списков и линии разметки для табличек. Но сегодня этого недостаточно. Сайт должен быть привлекательным, красиво оформленным и наполненный графическими элементами.
Так выглядит чистый HTML блога IT STEP
За визуальное оформление Web-страницы отвечает следующая ступенька — CSS. Переводится как «Каскадные таблицы стилей».
CSS — это набор команд, которые отвечают за визуализацию страницы. Например, добавить цвет тексту, разместить параграфы в строчку или колонками, изменить размер картинок. Задача CSS — украсить сайт, придать проекту завершённый вид.
А так выглядит блог в связке разметки веб-страницы и продуманных стилей.
Таблицы стилей не создают новые элементы, а работают с документом. Без HTML–документа, CSS не нужен. Код не будет работать, потому что визуализировать нечего.
Если представить веб-страницу в виде строительства домика, то HTML — это голые стены, рамы для окон, незаурядный шифер и дверные проёмы. А CSS — это обои, цвет краски, стеклянные панели, побелка потолка и куча декораций.
HTML задаёт элементы на веб-странице. CSS их украшает, размещает и придаёт вид готового проекта. Ещё есть анимации, но об этом в другой статье.
Зачем нужны команды CSS
В 90-х разделения на HTML и CSS не было. Существовали сайты в виде разметок – работа чистого ХТМЛ-документа.
Так выглядело создание сайтов 30 лет назад на примере персонального блога.
В начале 2000-х появились первые CSS-стили, с которыми сайт обрёл новый вид. Простая разметка стала моветоном — способ разработки морально и технологически устарел.
Так появились первые веб-ресурсы со стилями. Смотреть сайт интереснее и проще, потому что каждый элемент отделён свойствами — размер текста, цвет, шрифт, размещение на странице
Сейчас без CSS-стилей невозможно создать полноценный сайт. С развитием CSS он стал универсальным — его теги не нужно настраивать под браузер. Также он кэшируется после первого запуска и запоминается браузером. Это позволяет быстрее загружать страницы.
И разработка на CSS сейчас смотрится лучше проектов прошлой эпохи
Рассмотрим, как работают команды CSS на веб-странице.
HTML формирует структуру веб-документов — текст, таблицы, гиперссылки. CSS — создает разметку, оформление и стиль. Поэтому ХТМЛ загружается первым, а стили за ним. Нашему глазу процесс незаметен — браузер обрабатывает информацию параллельно. Процесс занимает доли секунды.
Но если сайт плохо свёрстан или есть проблемы в DOM-дереве, то возникают ошибки. Например, браузер первым показывает HTML-документ, а через 3-5 секунд после загрузки— стили. Это плохая вёрстка.
Хорошая вёрстка — это когда HTML и CSS работают в синергии.
Как работает CSS
Начнём от простого к сложному: сначала рассмотрим подключение стилей, а после — устройство кода. Вариантов, как подключать код CSS, минимум три. Рассмотрим варианты по росту эффективности.
Внутри тега стили CSS добавляют через атрибут Style
Первый вариант: CSS-код можно написать внутри одного тега. Например, прописать цвет и размер шрифта для конкретного параграфа. Этот способ называется инлайн (inline) записью.
Но у этого способа больше минусов — его невозможно читать и переиспользовать в других местах. Приходится писать больше кода, например, для каждого абзаца писать красный цвет. А чем больше кода — тем медленнее грузится веб-страница. Поэтому приём не используют в современной веб-разработке.
В таком способе нужно ссылаться на тот элемент, который стилизуем. Пример с параграфом — указать тег [p].
Второй вариант — CSS-код вносят с помощью тега style в сам документ. Он применяется к любым тегам HTML: от параграфов до элементов таблицы. Стили подключают внутри разметки head.
Получается, что стили находятся внутри документа HTML. Разметка увеличивается, читать трудно.
Внутри проектной папки HTML-документ и папка со стилями. Как создать файл CSS — создайте текстовый документ и вместо расширения .txt установите .css.
Третий вариант: стили веб-страниц прописывают в отдельном документе. Для этого в папке проекта создают текстовый документ с расширением .css.
К HTML стили подключают с помощью тега link и свойства href внутри разметки документа, чтобы установить расположение файла. Это самый распространенный способ. Если файл подключен к нескольким страницам сайта, то вносить в них правки можно одновременно.
В теге head подключают ссылки на файлы со стилями. А в body идёт разметка документа. Вместо дополнительного CSS внутри HTML получаем аккуратную ссылку
При этом код CSS можно установить как по файлу проекта, так и по ссылке из Интернета. Так, например, делают для готовых элементов: разработчик переходит на сайт с шаблонами и копирует код разметки. Если стили его устраивают — просто копирует и вставляет ссылку со стилями в свой документ.
Для готовых элементов, например, анимаций стили придумали сторонние разработчики. Поэтому можно прикрепить ссылку из Интернета, а не создавать новый файл CSS под анимацию
Лучше — создавать отдельный файл и прикреплять его ссылкой в разметку. Мы не засоряем документ. А ещё стили так удобно читать и исправлять — лишняя разметка не мешает.
👉 Последний подход используют все профессиональные разработчики.
Правила построения кода CSS
Синим выделили селектор, а зелёным — блок объявления. Для удобства чтения и работы CSS все объявления пишут внутри фигурных скобок.
CSS — это не язык программирования, а набор правил. Эти правила задают визуальное расположение и отображение элемента в документе.
Правила делят на две категории:
-
Выбор селектора — это то, что нужно стилизовать. Например, нужно добавить цвет параграфам текста. Тогда используем обобщенный для параграфов тег [p].
-
Блоки объявлений (Declare) — то, как будем стилизовать селектор.
Чтобы работать с CSS, нужно знать свойства языка. Например, чтобы изменить цвет текста, используют свойство color, а размер шрифта определяет свойство font-size.
Программисты придумали правила для свойств CSS. Они почти не меняются, поэтому хороший веб-разработчик их знает. Или может подсмотреть в справочнике.
👉 Ссылка на справочник, где расписаны все свойства CSS.
Что такое селекторы
Чтобы изменить элемент в разметке документа, его нужно найти и привязать к нему стили. Стили — это блоки объявлений, их рассмотрели выше. А сейчас нужно найти или создать свой селектор.
В примере Span — это селектор. А всё, что в скобках — блок объявления стиля: изменение цвета фона и общего цвета.
Селектор — это значок, отвечающий за конкретный элемент. Что-то вроде идентификационного кода элемента разметки. Различают селекторы по тегу, классу и идентификатору.
Описание тегов, классов, идентификаторов и их селекторов в коде
👉 Селектор тега определяет все элементы указанного типа на странице проекта. Например, селектор для абзацев отвечает его названию в HTML — [р]. А для заголовков селектор — [h].
По тегу стилизуются все элементы: например, на сайте все абзацы имеют шрифт 10 пикселей и красный цвет. Добавляем тег и блоки объявлений. Стиль применится к каждому абзацу.
👉 Селекторы класса обозначают конкретный элемент или часть сайта. Классам нет конкретных названий, поэтому разработчик создаёт их под своё предпочтение. Но чтобы было удобно читать другим — есть определённые правила, вроде кодстайла и методологии. Об этом позже.
Класс прописывается внутри нужного тега атрибутом Class. Если написать внутри одного абзаца класс — он будет принадлежать только этому абзацу. Если дописать во второй абзац — это общий класс для двух абзацев. Их паспорт.
Если к классу применить стиль — визуально обновится только часть сайта или элемент с этим классом. Других стиль не тронет. Поэтому разработку на CSS делают не по тегам, а по уникальным классам.
👉 Селекторы-идентификаторы (ID) — класс, который можно использовать только для одного элемента. Идентификатор (ID) — это название элемента сайта, которое не должно повторяться на странице. Например, если возле списка написать id=”style”, то в другом месте айди использовать нельзя. Поэтому ID почти не используют, а стилизуют классами (class).
Как работает код CSS
Внутри каждого элемента может быть несколько классов. А у каждого класса — свой набор стилей. Чтобы не запутаться — в CSS придумали несколько правил. Они помогают правильно стилизовать элемент и не запутаться.
Селектор — это справочник для браузера. Он рассказывает, к какому элементу CSS применяет свойство. Например, это заголовок, абзац или кубики на сайте.
У каждого селектора должно быть свойство. На примере — свойство «Изменить цвет фона», а значение — на какой цвет нужно изменить.
Свойство не работает без значения — это то, как изменится элемент, когда его прочитает браузер. Если у абзаца цвет шрифта изменится на красный, то к нему применили значение «красный».
CSS — это каскадная таблица стилей.
Общее правило — к селектору можно сколько угодно применять свойств и значений. Например, к нашему параграфу [p] можно поставить три цвета шрифта, два варианта размеров, курсив, жирное начертание, размер в 20 пикселей и расположение по центру.
Если к одному элементу применить три одинаковых свойства, но разных значения — используется нижнее. Так работает правило каскада.
Но есть нюанс — если использовать три цвета или два варианта шрифтов, то работать будет один вариант. Это называется каскадностью стилей.
Например, в начале документа написали — цвет абзаца красный. Где-то в середине обратились к абзацу с классом и написали — изменим цвет на зелёный. Если перейти в документ и посмотреть — весь текст будет красным, а абзац — зелёным. Почему так?
Таков порядок в коде: правило, записанное ниже «перебивает» остальные. Если сверху написать для всех заголовков размер в 18 пикселей, а ниже для тех же заголовков написать 20 пикселей — браузер прочитает последнее. Все заголовки будут 20 пикселей.
Свойства параграфа ниже, но они не работают. Всё потому, что селектор по классу «сильнее» селектора по тегу
В примере с цветом абзаца есть ещё одно правило — исключение по специфике кода. Специфичность может быть одинаковой у всех, а может «весить» по-разному: допустим, обращение к классу «перебивает» обращение по тегу. Как это работает.
Если для тега написать размер в 18 пикселей, а для класса 20, то сработает размер в 20 пикселей по классу. Неважно, где находится класс: выше или ниже нового значения.
🟢 Класс важнее тега. То же самое с идентификатором — он важнее всех остальных. Поэтому идентификаторы используют в крайних ситуациях: например, когда стилей к одному элементу много, а нужны конкретные — «перебить остальные». А элементу пишут класс и уникальные значения стилей.
Так создают стили для веб-страницы: разработчик обращается к элементам документа и набирает свойства и значения, как слоёный пирог.
Для чего нужны методологии
Ранее мы рассматривали, что для класса и идентификатора можно написать любое слово. Но если писать что-попало — другим разработчикам будет неудобно читать и менять код.
Поэтому в обществе программистов придумали правила написания классов. Это называется стилем кода, или кодстайл.
У каждой компании, группы разработчиков может быть свой кодстайл. Это как алфавит и корпоративный сленг. Если работать в одной компании, а после стажироваться в другой — кодстайл может отличаться, и к нему нужно адаптироваться.
В основном для обозначения класса (селектора) используют английские слова, которые максимально точно передают значение блока.
Но назвать класс по ассоциации недостаточно. Внутри элемента может быть ещё с десяток других маленьких деталек. А всех одним классом не назовёшь.
Поэтому придумали список правил, вроде словаря для веб-разработчика. Это называется методологией.
На примере БЭМ-методологии: верхний класс написали как menu, а следующие (вложенные) написали как menu__link и menu__item. Разделение чёрточками обозначает основной класс и особый элемент.
Широкое распространение получила БЭМ-методология (расшифровывается как «Блок, Элемент, Модификатор») — это подход, основанный на простом правиле. Каждый элемент документа — самостоятельная часть. Если из документа нельзя взять блок и применить на этой же странице, но в другом месте — это не очень хорошо для работы веб-проекта.
Управляя блоками, как конструктором, разработчик может маневрировать в проекте: убирать одни блоки, добавлять другие и переиспользовать в других местах. Это ускоряет разработку. А документ легко читать.
Есть другая методология — атомарный CSS. У неё те же цели, как и у БЭМ — сократить код и сделать «человекопонятным».
В атомарной методологии используют не смысловые блоки, а отдельные правила. Например, если мы хотим изменить размер текста с 20 на 40 пикселей, цвет на жёлтый, то добавляем тегу с текстом классы font-size-40, и color-yellow. Фишка в том, что свойства заранее написали разработчики. Программисту осталось вставить нужный класс и свойство применяется к блоку.
Атомарный подход используют на автономных проектах. Например, на фреймворке Bootstrap используют Atomic CSS, чтобы верстать страницы можно было без профессионального разработчика. Вставил класс — значение и свойство подтянулось к классу.
Кто и как работает с CSS-кодом
В начале 2000-х жёсткого разделения на Front-end и Back-end не было. Программистов на HTML и CSS называли «верстальщиками». Слово оставили в обиходе, но разработчики прокачались дальше. Теперь их называют «веб-разработчик» или «фронтенд-разработчик».
А верстальщики занимаются рядовыми задачами. Например, пишут HTML-документы и прикрепляют стили. В другие языки они не суются.
На практике знания HTML и CSS пригодятся в любом сайтостроении и приложениях: от сложных платёжных систем до одностраничных сайтов. Основам CSS можно научиться с нуля, не будучи техническим специалистом. Например, в IT STEP есть курс «Front-end разработка», на котором можно разобраться с CSS, HTML. А ещё перейти на третью ступеньку и прокачаться в JavaScript.