CSS (от английского Cascading Style Sheets) — это «каскадные таблицы стилей». Являются формальным языком для задания дизайна документа на HTML или в других веб-форматах (XHTML, XML). Другими словами, этот язык описывает, как именно HTML-компоненты страницы должны отображаться на экране или других носителях, например, бумажных.
Сегодня большая часть сайтов в глобальном интернете работает именно благодаря каскадным таблицам стилей. Также термин CSS используется для обозначения файла «стилей» сайта — такой файл не может использоваться отдельно от HTML-файла сайта. CSS-файл экономит время веб-программиста и верстальщика, так как позволяет оптимизировать управление дизайном для всех страниц сайта. Внешние таблицы стилей хранятся в CSS-файле, обычно он один для всего сайта.
Простыми словами, CSS — это язык описания внешнего вида веб-страницы, который используется для настройки: цветов, типографики, местоположения компонентов страницы, стилей элементов и любого другого дизайна компонентов страницы.
Что такое CSS?
Как работает CSS
В HTML-документе находятся данные только о структуре веб-страницы. Чтобы правильно вывести её на экран, с учётом дизайна сайта и особенности экрана пользовательского устройства, браузер объединяет HTML-документ с файлом стилей, который есть у любого сайта. Такое объединение происходит поэтапно. Вот основные шаги, как работает CSS:
- Пользователь открывает сайт, например, переходя на него со страницы результатов поиска.
- Браузер начинает загрузку HTML-документа.
- Файл преобразуется в DOM (объектная модель документа в оперативной памяти).
- Браузер анализирует все компоненты, на которые в HTML-документе есть URL, и которые связаны с этим документом. К таким ресурсам и компонентам как раз и относятся стили (а также, например, любые медиафайлы: картинки, GIF, видеофайлы).
Внимание: если в HTML-документе ссылки на стили нет, то браузер не сможет получить к ним доступ. JS-код обрабатывается далее, но не на этом этапе. - Браузер начинает проверять файл стилей. В частности, он пытается отсортировать правила, содержащиеся в нём (по их типу селектора). Каждое правило определяется в свою категорию (например, ID, элемент, класс). Далее, на этом промежуточном шаге, также происходит связывание обнаруженных селекторов с правилами. Правила применяются к определенным DOM-узлам, а затем к каждому из них привязывается определённый стиль. Всё, теперь браузер знает, как именно нужно отрисовывать страницу.
- Происходит отрисовка страницы уже с настроенным дизайном её элементов.
Если вышеуказанная последовательность работы CSS показалась для вас слишком сложный, посмотрите на эту схему:
Последовательность работы со стилями элементов в браузере
Учим CSS за 1 час! #От Профессионала
Вообще существует не один, а несколько методов сформировать правила «стилей». Это не только задание набора свойств с фиксированными значениями, но и метод при помощи селекторов, например.
Основы: синтаксис CSS
Начнём с подключения стилей к веб-странице. Файл стилей может публиковаться разными способами, внутренними и внешними. Самый частый сценарий подключения CSS — самостоятельный файл, который затем подключается к веб-странице через тег link:
Другой способ подключения стилей к сайту — самостоятельный, без файла-родителя. Для этого можно использовать директиву import в контейнере style:
При этом CSS может быть указан непосредственно внутри документа: (опять же, обратите внимание на тег style внутри head)
. body .
Наконец, CSS может быть указан в атрибуте style:
Теперь давайте посмотрим на важные особенности синтаксиса CSS. Напомним, главная цель CSS — передать браузеру инструкции, согласно которым он будет отрисовывать страницу. Согласно этой идее главными будут являться два элемента: property и value.
- Первый элемент (property) — это непосредственное свойство, которое и будет изменено.
- Второй элемент (value) — это значение, которым движок браузера будет обрабатывать свойство. Вот от этих двух блоков и строится дальнейший синтаксис «стилей».
Объявления. Два вышеуказанных блока (property and value) используются в качестве объявлений.
Так работает объявление или declaration в CSS
Поиск совпадений между такими объявлениями и элементами — основная задача движка «стилей». Посмотрите на этот пример синтаксиса CSS:
selectorlist
Как видим для списка селекторов указываются: свойство, затем его значение, затем — добавляются аналогичные пары. Здесь всё просто. Но большое разнообразие свойств и огромное количество допустимых значений, часто приводят к тому, что новички допускают ошибки в синтаксисе (и не только). А если выбрано некорректное значение для какого-либо элемента, то браузер не будет выполнять такое объявление.
Ещё один простой пример синтаксиса CSS:
strong < color: red; >div.menu-bar li:hover > ul
Важно: данные внутри пары свойство / значение всегда зависимы от регистра. Пробелы, при этом, игнорируется (в любых местах). Сама пара всегда отделяется при помощи знака «:» (двоеточие).
Блоки. Традиционно объявления в CSS объединяются в блоки. Их синтаксис подразумевает открывающую и закрывающую фигурную скобку. Схематично вышесказанное можно представить вот так:
Между фигурными скобками располагается содержимое
Блок объявлений. Подразумевает отделение самих объявлений внутри при помощи знака ;
Вот как работают объявления, блоки и блоки объявлений друг с другом:
Первым указываются объявления. Точка с запятой — используется для разделения двух объявлений
Операторы CSCS (они же statements)
Наборы правил — своего рода кирпичики для постройки финального файла стиля для сайта. Обычно — это длинный-длинный список из разных параметров.
Пример пересечения действия операторов at-rules и rulesets
Но не только данные о внешнем виде элементов страницы передают в «стилях». Также есть технические сведения, которые должны передаваться движку браузера (например, данные о счетчиках веб-аналитики, наборах, настройках типографики и другое). Для таких данных задействуются иные, специфические виды утверждений. Это, в первую очередь, at-rules и rulesets (наборы правил).
Rulesets (наборы правил). Применяемость CSS файла по отдельности к каждому элементу на странице — это хорошо, но неудобно. Именно поэтому в «стиле» подразумевают применение любых объявлений к любым частям веб-страницы. В «стилях» вы можете объединить наборы правил с конкретными блоками объявлений.
Чтобы соединить наборы правил с блоками объявлений, каждому блоку должен предшествовать селектор
Парные селекторы объявления — это и есть набор правил CSS. Но здесь есть некоторые сложности, например: часто определённому элементу в документе релевантны сразу несколько селекторов. Для определения приоритета иерархичности используется каскадный алгоритм. Именно он уточнит иерархию какого-либо свойства, если оно упоминается с различными значениями.
О селекторах, комбинаторах и псевдоэлементах CSS
Селектор устанавливает точное правило, которое будет использоваться для конкретного элемента веб-страницы.
В стилях CSS распространено большое количество контейнеров: по атрибуту, универсальный, по ID, по типу элемента, по классу. Также для работы с селекторами предусмотрены комбинаторы и псевдоэлементы (используются для выбора того, что отсутствует в HTML-коде). Что касается комбинаторов, то они упрощают выбор элементов. Например, комбинатор adjacent sibling — позволяет выбирать последующие соседние элементы, но только если у них имеется общий родитель.
Комбинатор comma (в качестве него используется знак запятой). Он позволяет сгруппировать и выделить все идентичные узлы следующего соседнего элемента. Также есть отдельные комбинаторы для всех соседних элементов, для потомков, дочерних элементов.
Важно: при помощи селекторов вы не сможете выбрать родительский элемент с контейнером внутри.
Что такое CSS и как с ним работать
С помощью CSS задают цвет, размеры, анимацию, адаптируют сайт под устройства.
Виктория Дербенченко
Автор статьи
16 марта 2022 в 14:40
Когда-то сайты были не такими красивыми, какими мы их видим сейчас. Раньше, чтобы отображать элементы, разработчики использовали разные хаки. Например, для отступов применяли прозрачные гифки, а чтобы разделить текст — специальные символы пробела. Но всё изменилось: в 1996 году опубликовали первую версию CSS (англ. Cascading Style Sheets — каскадные таблицы стилей).
Основы верстки
CSS — это технология, которая описывает форматирование элементов веб-страницы. С 1996 года она менялась, и сейчас разработчики используют уже третью версию.
Сайт пишут с помощью HTML-кода, но он задает только сами элементы — их логическую структуру. А специальный язык стилей CSS придает им визуальные характеристики: цвет, шрифт, размеры.
Главная страница Google 1996 года
Виды таблиц стилей
Правильный способ применять стили — подключить внешние файлы. Но задать формат отображения можно и по-другому: применить внутренние или встроенные стили.
Внешние файлы
Файлу стилей «style.css» задают любое имя. Иногда в проекте используют несколько таких файлов. Это помогает уменьшать их объем и делать файлы более читаемыми, разделять логику. Чтобы подключить к странице файл со стилями, в HTML-документе в блоке добавьте тег . Общий вид конструкции:
Инженер-тестировщик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Что означает каждый атрибут:
- rel отвечает за отношение между документом и указанным файлом — с его помощью браузер понимает, как воспринимать файл, и правильно его применяет;
- type указывает тип файла, используя спецификацию MIME — стандарт для форматирования и кодировки;
- href указывает, где находится файл; используют абсолютный и относительный пути расположения на хосте — вашем компьютере или компьютере в дата-центре, на котором находится сайт.
Встроенный CSS
Такой формат подключения — описание стилей внутри тега перед закрывающим тегом HTML-документа. Этот способ применения стилей считают некорректным, так как их трудно читать и изменять. Но такой подход полезен для быстрой проверки нескольких изменений. Так используют встроенные стили:
Внутренние стили
Последний способ задать элементу оформление — указать стиль, добавив внутри тега атрибут style. Внутренние стили применяйте только к единичным элементам, так как они затрудняют изменения. Пример такого способа:
фиксированный размер 150 пикселей в ширину
и 200 пикселей в высоту —>
Приоритеты
Несколько вариантов форматирования будут конфликтовать между собой. Например, указание внутреннего стиля для элемента перепишет пересекающееся форматирование из подключенного файла. Чтобы решать такие проблемы, в CSS разработали специальную систему приоритетов:
- Внутренний стиль.
- Встроенный стиль.
- Внешний стиль.
В HTML-документе подключите только основной файл, так как в него уже будет встроен CSS-код из дополнительных.
Селекторы
Их используют, чтобы выбрать, к каким элементам применять стили. Это могут быть id, классы, названия тегов, селекторы атрибутов и псевдоклассов.
Селектор id
Например, внутри HTML-файла есть блок div с атрибутом «id». Ему задано значение «unique_row»:
Для обращения к элементам по id используйте решетку + название идентификатора. Чтобы задать размер и границу контейнеру из примера, добавьте в файле стилей:
#unique_row < width: 400px; height: 200px; border: 1px solid black; /* граница толщиной 1 пиксель, сплошная, черного цвета */ >
Id должен быть уникальным, поэтому не получится применить стиль к нескольким элементам.
Селектор класса
Классы применяют к нескольким элементам сразу. А у элемента может быть несколько классов одновременно. Задают их через атрибут «class»:
Это три контейнера с классом «block». Чтобы обратиться к этим элементам в CSS-файле, используйте точку + имя класса. Задайте стили блокам:
.block
Селектор атрибута
Он позволяет выбирать элементы с указанным атрибутом:
img[alt] — выберет , но пропустит
или
Селектор псевдокласса
Он нужен, чтобы задавать стили элементам, над которыми находится курсор. Или тем, по которым кликнули. Полный список псевдоклассов смотрите на платформе для обучения MDN.
Шрифты
Есть несколько классов шрифтов:
- без засечек (sans-serif);
- с засечками (serif);
- фиксированной ширины (monospace);
- курсив (cursive);
- декоративные шрифты (fantasy).
Шрифт задают с помощью свойства font-family. Например:
font-family: “Helvetica”, sans-serif;
Браузер считывает файл стилей. Видит, что установлен шрифт Helvetica. Если браузер не находит его, он берет первый шрифт без засечек (sans-serif).
Задайте этот шрифт всей странице сразу:
body
Чтобы не искать файлы шрифтов и упростить подключение, воспользуйтесь сервисом Google Fonts. Найдите подходящий шрифт и откройте его страницу. Выберите необходимые стили, скопируйте код добавления шрифта в правом модальном окне.
Свойства
С помощью свойств в CSS задают условия отрисовки и позиционирования HTML-элементов. Полный список свойств — в справочнике HTML5Book. Рассмотрим несколько популярных примеров.
Свойства текста
Такие свойства задают тексту шрифт, размер, толщину, цвет, межстрочный интервал, тени. Делают его подчеркнутым или зачеркнутым, курсивным или жирным. Приводят слова к нижнему или верхнему регистру. Делают отступы в начале абзаца, выравнивание, перенос.
Рассмотрим свойство writing-mode — эта технология еще на стадии разработки. Свойство позволяет указать направление текста:
- lr-tb — слева направо и сверху вниз;
- rl-tb — справа налево и сверху вниз;
- tb-rl — сверху вниз и справа налево;
- bt-rl — снизу вверх и справа налево.
Полный список значений и поддержка браузерами на MDN
Цвет и фон
Чтобы установить в качестве фона изображение или цвет, используйте свойство background для выбранного селектора. Например,
установит зеленый цвет, а
задаст фону изображение image1.png из папки img.
Анимация
В CSS создают анимации для элементов. Например, делают так, чтобы текст менял цвет, кнопка увеличивалась, картинка уменьшалась или вращалась.
Этот код заставит параграфы переливаться:
Результат CSS-кода из примера
Медиазапросы
Нужны, чтобы применять стили для разных устройств и сохранять адаптивность веб-страницы. Указывайте с их помощью альбомную или книжную ориентацию, тип устройства — принтер, телевизор или монитор, минимальную и максимальную ширину экрана. Например, чтобы задать стили для устройств с шириной экрана до 600 пикселей, напишите:
Методологии
Они позволяют придерживаться определенной структуры кода. Так фронтендеру легче ориентироваться внутри файлов стилей и в HTML-разметке, создавать структуру.
Атомарный CSS — это подход к организации кода, при котором каждому свойству или группе выделяют свой класс. Так вы сможете повторно использовать код, применять нужные классы к элементам в HTML-разметке.
Методологию «Блок, элемент, модификатор» придумал «Яндекс». Идея в том, чтобы разбивать страницу на блоки — независимые части, которые можно применять повторно.
Как изучать
Курсы
CSS изучают на курсах по верстке и созданию сайтов с нуля. Или в рамках обучения на веб- или frontend-разработчиков.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Изучать веб-разработку приходите в онлайн-университет Skypro. Вы будете работать с фронтенд и бэкенд: научитесь верстать и стилизовать сайты с помощью HTML и CSS,
освоите базовый синтаксис JavaScript, познакомитесь с инструментами разработчика и прокачаете навыки работы в команде. Сделаете 7 проектов, из которых соберете портфолио: лендинг с играми на JavaScript, приложение для карточной игры, браузерную игру «Камень, ножницы, бумага», музыкальный сервис.
- «Новая большая книга CSS», Дэвид Сойер Макфарланд.
- «CSS для профи», Кит Грант.
- «CSS — каскадные таблицы стилей», Эрик Мейер.
- «HTML и CSS. 25 уроков для начинающих», Владимир Дронов.
- «HTML и CSS. Разработка и дизайн веб-сайтов», Джон Дакетт.
Источник: sky.pro
Что такое CSS и зачем нужны каскадные таблицы стилей
Рассказываем о языке, благодаря которому интернет стал красивым.
Основы CSS
Аббревиатура CSS расшифровывается как Cascading Style Sheets, что в переводе означает «каскадные таблицы стилей». Это язык разметки, используемый для визуального оформления веб-сайтов.
Объекты, расположенные на странице, размещаются с помощью HTML. А вот CSS отвечает за то, как эти объекты выглядят. Их размер, цвет, фоновое изображение, степень прозрачности, расположение относительно других элементов, поведение при наведении курсора, визуальное изменение кнопок при нажатии и т.п.
Вот сайт, сделанный с помощью одного лишь HTML:
А вот как выглядит та же страница после добавления CSS-разметки и оформления блоков с помощью каскадных таблиц стилей:
Практически любые «внешние проявления» сайта создаются с помощью CSS. Это стиль ваших страниц.
Синтаксис разметки
Язык CSS быстро стал стандартом в веб-разработке, потому что он позволяет быстро изменить визуальное оформление сайта, не прибегая к использованию более сложных языков программирования.
Достаточно ознакомиться с простейшими правилами CSS, и можно легко собрать вполне симпатичный сайт со всем необходимым контентом. «Простота» обеспечивается за счет понятного синтаксиса.
Синтаксис CSS в отдельном файле в соответствующем формате (.css) выглядит так:
селектор
- Селектор – это ссылка на элемент в HTML, над которым будет вестись работа (оформление).
- Свойство – определенная характеристика элемента, которую нужно изменить. Например, размер или цвет.
- Значение – цифровое или текстовое обозначение для выбранного свойства.
Попробуем поменять цвет текста в блоке section на красный:
section
Как видите, все понятно даже без знания разметки. Даже далекий от программирования человек поймет, что происходит в вышеописанном коде. Это самое лучшее в CSS. Все логично.
Медиазапросы и тег
Такой код изменит цвет текста на красный в разделе section только для экранов с разрешением меньше 768 пикселей.
А еще CSS-разметку можно использовать прямо в HTML-файлах для тестирования стилей и внесения мелких изменений.
С другими примерами оформления CSS можно ознакомиться в официальном руководстве MDN.
Что еще может CSS
Выше я уже сказал, что CSS используется для всего визуального оформления документов. Но чтобы стало яснее, посмотрим на примеры использования разметки в коде. Так вы поймете, что возможностей у CSS куда больше, чем кажется.
Например, с помощью CSS можно задать параметры для SVG-изображения:
Или создать блоки div любых размеров с SVG-изображением в качестве фона:
.block < width: 220px; height: 192px; background-image: url(«../path-to-image/image.svg»); >
Или же вовсе добавить в блок информацию, которой изначально нет в HTML-документе:
.block:after
Также можно добавлять контент или CSS-разметку на новые объекты, созданные вне HTML. Для этого в CSS есть псевдоселекторы :after и :before (они позволяют разместить новые элементы до или после выбранного объекта).
И даже это мелочи. С помощью CSS можно рисовать, создавать объекты любых форм, анимировать их и т.п.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Препроцессоры и другие варианты реализации CSS
По умолчанию стили прописываются в текстовом файле, но это не единственный вариант. Базовый CSS не обладает преимуществами сложных языков программирования, переменными или вложением свойств.
Поэтому разработчики создали препроцессоры наподобие LESS. Это механизм на базе JavaScript, позволяющий внедрить в работу со стилями синтаксис и некоторые примитивные функции из JavaScript. Если вам кажется, что у CSS недостаточно функциональности, то следует ознакомиться с препроцессорами.
Также CSS часто реализуется внутри фреймворков. Например, технология react-styled-components перенасыщает всю функциональность каскадных стилей напрямую в код на базе React. То есть можно в одном файле прописывать стили, структуру приложения и его логику.
Правда, такой стиль взаимодействия со стилями противоречит первоначальной идее CSS.
О концепции деления контента и его оформления
Сама идея разделить контент и его оформление на две части появилась в связи с необходимостью создавать сайты более сложных форматов – с уникальными стилевыми решениями, красивыми шрифтами, анимациями, произвольным порядком блоков и кучей других деталей, вынуждающих верстальщиков искать новые пути взаимодействия с HTML-документами.
Постепенно вебмастеры и разработчики отказались от стандартного оформления страниц с помощью таблиц (это встроенный в HTML синтаксис, не требующий дополнительных инструментов для оформления), потому что это усложняло структуру страниц. HTML-файлы сильно раздувались, ими было сложно управлять, а способов оформить хотя бы текст больше не становилось. Но всех спас CSS.
Правда, даже CSS может заметно увеличить размеры HTML и сделать его трудночитаемым, если применять каскадные таблицы прямо в основном документе. Поэтому за правило взято оформление CSS-разметки в отдельном файле, который затем подключается к условному index.html, а тот уже подтягивает нужные стили.
Т.е. файлы HTML и CSS живут раздельно.
Основные принципы построения макетов с помощью CSS
Одна из ключевых задач CSS в современной верстке – создание макетов сайта. HTML уже не играет такой важной роли в том, как будут размещены объекты. HTML-документ отвечает за структуру и вложенность элементов, что упрощает чтение сайтов скринридерами и дальнейшую разметку с использованием каскадных стилей.
Для расположения элементов на «полотне» сайта используются две основные методики:
- Flex – позволяет автоматически распределить объекты в блоке за счет создания блоков-оберток со свойством flex.
- Grid – позволяет отказаться от оберток и размещать объекты по сетке.
Оба метода позволяют создавать сайты, элементы которых всегда занимают корректную позицию и адаптируются под меняющееся разрешение экрана.
Как изучить и начать использовать CSS?
Каскадные таблицы стилей – на удивление интуитивная вещь. Даже новички успешно справляют с самостоятельным изучением разметки без обращения за помощью к профессиональным разработчикам и дизайнерам. Достаточно обращаться в Google за описанием свойств стилей и запоминать их.
Но есть загвоздки. В частности, они касаются методик создания макетов. С ходу понять их тяжело, поэтому нужно хорошее руководство.
Ну и нельзя забывать про великое множество курсов для веб-разработчиков. Они всегда покрывают углубленное знакомство с HTML, CSS и JavaScript, причем качество изучения стилей почти везде находится на одному уровне. Не нужно отдавать сумасшедшие деньги за дорогие курсы, можно выбрать какой-нибудь бюджетный вариант (если интересует именно CSS).
Где и как редактировать разметку?
Если вы уже сейчас хотите опробовать свои силы, то можно создать стили с помощью любого текстового редактора. Создаем файл в формате .css, а потом вписываем туда свойства и их значения в соответствии с синтаксисом разметки.
Лучше использовать специализированные редакторы и IDE. Они автоматически дополнят код, подскажут свойства и их значения, сообщат об обнаруженных ошибках, упростят выбор цветов и так далее. Рекомендую использовать редактор VS Code (своего рода стандарт). Он бесплатный и функциональный. Но есть и другие варианты.
Чтобы внесенные в CSS-файл изменения возымели эффект над HTML-документом, первый нужно подключить ко второму. Для этого в head-тег HTML-файла нужно добавить ссылку в формате:
Вместо заключения
На этом все. Как видите, CSS – это мощный инструмент для оформления сайтов, без которого невозможно сделать красивую страницу (даже если использовать какие-либо фреймворки типа React).
Глубокое изучение каскадных таблиц поможет сделать ваши сайты более стильными, при этом не перебарщивая с количеством JS-кода, что положительно скажется на производительности ресурса.
Источник: timeweb.com