Компьютерная Академия IT Step - полноценное IT-образование‎ для взрослых и детей. Мы обучаем с 1999 года. Авторские методики, преподаватели-практики, 100% практических занятий.

Ваш браузер устарел!

Вы пользуетесь устаревшим браузером Internet Explorer. Данная версия браузера не поддерживает многие современные технологии, из-за чего многие страницы сайта отображаются некорректно, и могут работать не все функции. Рекомендуем просматривать сайт с помощью актуальных версий браузеров Google Chrome, Safari, Mozilla Firefox, Opera, Microsoft Edge

ШАГ логотип

Что такое CSS и для чего нужен веб-разработчику

ITSTEP Academy

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

20.03.2023

11101 просмотр

Написать HTML-разметку документа — это лишь малая часть ежедневных задач веб-разработчика в конкретном проекте. Если вы знаете, что такое HTML, какие теги используются в разметке и как правильно писать документ — переходите к следующему этапу. 

Расскажем, что такое CSS с нуля: как устроен его код и как прописать стили в духе гуру-разработчика, а не новичка после бесплатных интенсивов.

Что такое CSS

Каждый HTML-документ имеет базовые параметры для тегов. Например, расположение параграфов для тега [p], точки для ненумерованных списков и линии разметки для табличек. Но сегодня этого недостаточно. Сайт должен быть привлекательным, красиво оформленным и наполненный графическими элементами.

Так выглядит чистый HTML блога ITSTEP

За визуальное оформление 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. Разметка увеличивается, читать трудно.

Третий вариант: стили веб-страниц прописывают в отдельном документе. Для этого в папке проекта создают текстовый документ с расширением .css. 

К HTML стили подключают с помощью тега link и свойства href внутри разметки документа, чтобы установить расположение файла. Это самый распространенный способ. Если файл подключен к нескольким страницам сайта, то вносить в них правки можно одновременно.

В теге head подключают ссылки на файлы со стилями. А в body идёт разметка документа. Вместо дополнительного CSS внутри HTML получаем аккуратную ссылку

При этом код CSS можно установить как по файлу проекта, так и по ссылке из Интернета. Так, например, делают для готовых элементов: разработчик переходит на сайт с шаблонами и копирует код разметки. Если стили его устраивают — просто копирует и вставляет ссылку со стилями в свой документ.

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

Лучше — создавать отдельный файл и прикреплять его ссылкой в разметку. Мы не засоряем документ. А ещё стили так удобно читать и исправлять — лишняя разметка не мешает. 

👉 Последний подход используют все профессиональные разработчики.

Правила построения кода CSS

CSS — это не язык программирования, а набор правил. Эти правила задают визуальное расположение и отображение элемента в документе. 

Правила делят на две категории:

  • Выбор селектора — это то, что нужно стилизовать. Например, нужно добавить цвет параграфам текста. Тогда используем обобщенный для параграфов тег [p].

  • Блоки объявлений (Declare) — то, как будем стилизовать селектор.

Чтобы работать с CSS, нужно знать свойства языка. Например, чтобы изменить цвет текста, используют свойство color, а размер шрифта определяет свойство font-size.

Программисты придумали правила для свойств CSS. Они почти не меняются, поэтому хороший веб-разработчик их знает. Или может подсмотреть в справочнике.

👉  Ссылка на справочник, где расписаны все свойства CSS.

Что такое селекторы

Чтобы изменить элемент в разметке документа, его нужно найти и привязать к нему стили. Стили — это блоки объявлений, их рассмотрели выше. А сейчас нужно найти или создать свой селектор.

Селектор — это значок, отвечающий за конкретный элемент. Что-то вроде идентификационного кода элемента разметки. Различают селекторы по тегу, классу и идентификатору.

👉 Селектор тега определяет все элементы указанного типа на странице проекта. Например, селектор для абзацев отвечает его названию в HTML — [р]. А для заголовков селектор — [h].

По тегу стилизуются все элементы: например, на сайте все абзацы имеют шрифт 10 пикселей и красный цвет. Добавляем тег и блоки объявлений. Стиль применится к каждому абзацу.

👉 Селекторы класса обозначают конкретный элемент или часть сайта. Классам нет конкретных названий, поэтому разработчик создаёт их под своё предпочтение. Но чтобы было удобно читать другим — есть определённые правила, вроде кодстайла и методологии. Об этом позже.

Класс прописывается внутри нужного тега атрибутом Class. Если написать внутри одного абзаца класс — он будет принадлежать только этому абзацу. Если дописать во второй абзац — это общий класс для двух абзацев. Их паспорт.

Если к классу применить стиль — визуально обновится только часть сайта или элемент с этим классом. Других стиль не тронет. Поэтому разработку на CSS делают не по тегам, а по уникальным классам.

👉 Селекторы-идентификаторы (ID) — класс, который можно использовать только для одного элемента. Идентификатор (ID) — это название элемента сайта, которое не должно повторяться на странице. Например, если возле списка написать id=”style”, то в другом месте айди использовать нельзя. Поэтому ID почти не используют, а стилизуют классами (class).

Как работает код CSS

Внутри каждого элемента может быть несколько классов. А у каждого класса — свой набор стилей. Чтобы не запутаться — в CSS придумали несколько правил. Они помогают правильно стилизовать элемент и не запутаться.

Селектор — это справочник для браузера. Он рассказывает, к какому элементу CSS применяет свойство. Например, это заголовок, абзац или кубики на сайте.

У каждого селектора должно быть свойство. На примере — свойство «Изменить цвет фона», а значение — на какой цвет нужно изменить.

Свойство не работает без значения — это то, как изменится элемент, когда его прочитает браузер. Если у абзаца цвет шрифта изменится на красный, то к нему применили значение «красный».

CSS — это каскадная таблица стилей.

Общее правило — к селектору можно сколько угодно применять свойств и значений. Например, к нашему параграфу [p] можно поставить три цвета шрифта, два варианта размеров, курсив, жирное начертание, размер в 20 пикселей и расположение по центру. 

Но есть нюанс — если использовать три цвета или два варианта шрифтов, то работать будет один вариант. Это называется каскадностью стилей.

Например, в начале документа написали — цвет абзаца красный. Где-то в середине обратились к абзацу с классом и написали — изменим цвет на зелёный. Если перейти в документ и посмотреть — весь текст будет красным, а абзац — зелёным. Почему так?

Таков порядок в коде: правило, записанное ниже «перебивает» остальные. Если сверху написать для всех заголовков размер в 18 пикселей, а ниже для тех же заголовков написать 20 пикселей — браузер прочитает последнее. Все заголовки будут 20 пикселей.

В примере с цветом абзаца есть ещё одно правило — исключение по специфике кода. Специфичность может быть одинаковой у всех, а может «весить» по-разному: допустим, обращение к классу «перебивает» обращение по тегу. Как это работает.

Если для тега написать размер в 18 пикселей, а для класса 20, то сработает размер в 20 пикселей по классу. Неважно, где находится класс: выше или ниже нового значения. 

🟢 Класс важнее тега. То же самое с идентификатором — он важнее всех остальных. Поэтому идентификаторы используют в крайних ситуациях: например, когда стилей к одному элементу много, а нужны конкретные — «перебить остальные». А элементу пишут класс и уникальные значения стилей.

Так создают стили для веб-страницы: разработчик обращается к элементам документа и набирает свойства и значения, как слоёный пирог.

Для чего нужны методологии

Ранее мы рассматривали, что для класса и идентификатора можно написать любое слово. Но если писать что-попало — другим разработчикам будет неудобно читать и менять код.

Поэтому в обществе программистов придумали правила написания классов. Это называется стилем кода, или кодстайл. 

У каждой компании, группы разработчиков может быть свой кодстайл. Это как алфавит и корпоративный сленг. Если работать в одной компании, а после стажироваться в другой — кодстайл может отличаться, и к нему нужно адаптироваться.

В основном для обозначения класса (селектора) используют английские слова, которые максимально точно передают значение блока. 

 

Но назвать класс по ассоциации недостаточно. Внутри элемента может быть ещё с десяток других маленьких деталек. А всех одним классом не назовёшь.

Поэтому придумали список правил, вроде словаря для веб-разработчика. Это называется методологией.

Широкое распространение получила БЭМ-методология (расшифровывается как «Блок, Элемент, Модификатор») — это подход, основанный на простом правиле. Каждый элемент документа — самостоятельная часть. Если из документа нельзя взять блок и применить на этой же странице, но в другом месте — это не очень хорошо для работы веб-проекта.

Управляя блоками, как конструктором, разработчик может маневрировать в проекте: убирать одни блоки, добавлять другие и переиспользовать в других местах. Это ускоряет разработку. А документ легко читать.

Есть другая методология — атомарный CSS. У неё те же цели, как и у БЭМ — сократить код и сделать «человекопонятным». 

В атомарной методологии используют не смысловые блоки, а отдельные правила. Например, если мы хотим изменить размер текста с 20 на 40 пикселей, цвет на жёлтый, то добавляем тегу с текстом классы font-size-40, и color-yellow. Фишка в том, что свойства заранее написали разработчики. Программисту осталось вставить нужный класс и свойство применяется к блоку.

Атомарный подход используют на автономных проектах. Например, на фреймворке Bootstrap используют Atomic CSS, чтобы верстать страницы можно было без профессионального разработчика. Вставил класс — значение и свойство подтянулось к классу.

Кто и как работает с CSS-кодом

В начале 2000-х жёсткого разделения на Front-end и Back-end не было. Программистов на HTML и CSS называли «верстальщиками». Слово оставили в обиходе, но разработчики прокачались дальше. Теперь их называют «веб-разработчик» или «фронтенд-разработчик».

А верстальщики занимаются рядовыми задачами. Например, пишут HTML-документы и прикрепляют стили. В другие языки они не суются.

На практике знания HTML и CSS пригодятся в любом сайтостроении и приложениях: от сложных платёжных систем до одностраничных сайтов. Основам CSS можно научиться с нуля, не будучи техническим специалистом. Например, в ITSTEP есть курс «Front-end разработка», на котором можно разобраться с CSS, HTML. А ещё перейти на третью ступеньку и прокачаться в JavaScript.



АВТОР:

Редакция Академиии ITSTEP

Образование для взрослых

Эмоциональное выгорание на работе: что делать если не хочется работать

Почему эмоциональное выгорание стало новой нормой в эпоху онлайн-работы. Как избежать в условиях дистанционной работы: признаки, эффективные методы профилактики и психического благополучия

Причины и последствия выгорания на работе в эпоху удаленной занятости В последние годы формат труда претерпел существенные изменения. Пандемия COVID-19 ускорила массовый переход к удаленной занятости, который ранее считался преимуществом только для избранных отраслей, таких как IT. Сегодня миллионы людей по всему миру работают из дома, не выходя из собственной квартиры. Такая трансформация рынка труда создала новые вызовы - в частности, увеличение уровня стресса, потерю баланса между работой и личной жизнью и рост количества случаев эмоцио

ШАГ логотип

Дизайн

Основы графического дизайна: 10 ключевых принципов

10 главных принципов графического дизайна, которые помогут вам создавать стильные, удобные и эффективные визуальные решения для веба, печати и брендинга | Блог ITSTEP Academy

10 основных принципов графического дизайна Графический дизайн — это искусство визуальной коммуникации, которое сочетает в себе текст, изображения, цвета и формы для передачи информации или создания определённого настроения. Он используется в различных сферах: от рекламы и веб-дизайна до упаковки продуктов и мобильных приложений. Принципы графического дизайна — это основные правила, которые помогают создавать гармоничные и эффективные визуальные композиции. Без их понимания даже самые талантливые художники и дизайнеры могут столкн

ШАГ логотип

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

Какая зарплата у QA Engineer в Украине | Cколько зарабатывает тестировщик

Средние зарплаты тестировщиков в Украине: сравнение Manual и Automation QA, обзор доходов в крупных IT-компаниях и советы, как увеличить свою зарплату | Блог ITSTEP Academy

Зарплата тестировщика в Украине: сколько можно заработать? Тестировщик программного обеспечения (QA-инженер) — это специалист, который отвечает за проверку работы приложений, поиск ошибок и контроль качества продукта. Его основная цель — обеспечить стабильную и безопасную работу программных решений перед их выпуском. Профессия тестировщика стала особенно популярной благодаря низкому порогу входа. В отличие от разработчиков, которые должны досконально знать языки программирования, тестировщики могут начать карьеру с базового поним

ШАГ логотип

Soft-skills

Синдром самозванца в IT - прокачай уверенность для успешной карьеры

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

Синдром самозванца у начинающих программистов: первые шаги к уверенности Синдром самозванца (Imposter Phenomenon)— это психологическое явление, при котором человек убежден в собственной некомпетентности и в том, что его успехи достигнуты случайно. Для начинающих программистов это может стать серьезным препятствием на старте карьеры. В условиях быстро развивающейся IT-индустрии чувство неуверенности может негативно сказаться на профессиональном развитии, препятствуя проявлению инициативы и разрушая мотивацию. Тематика синдрома самозванца

ШАГ логотип

Успейте 🔥

Забронировать место в Малой Компьютерной Академии для детей 7-14 лет!

Узнать больше

Этот сайт использует Cookies

Политика конфиденциальности