CSS
CSS — это язык описания внешнего вида документа, то есть он отвечает за то, как выглядят веб-страницы: цвет фона и декоративных элементов, размер и стиль шрифтов. Термин расшифровывается как Cascading Style Sheets (каскадные таблицы стилей). CSS взаимодействует с другим языком разметки — HTML, который отвечает за размещение элементов на странице.
Можно представить, что HTML — это такая общая, условная схема, как грубый чертеж планировки квартиры, из которого можно узнать, где находятся двери и окна, а с какой стороны кухня или коридор. В таком случае CSS для сайта — это дизайн-проект, который помогает увидеть более детальную планировку с цветом стен, мебелью и декором.
Для чего нужен CSS
Допустим, с помощью HTML текст уже расположен в верхней части документа. Задать для него цвет, тип шрифта и его кегль, сделать текст жирным или выделить курсивом можно и без использования CSS. Для этого в исходный код нужно добавить тег, который определяет начертание текста. Например, в этом тексте с помощью тега <b> фрагмент выделен жирным шрифтом:
Первая часть текста набрана обычным шрифтом. А вот эта часть будет выделена жирным.
<!DOCTYPE html> <html> <head> <title>Жирный текст с помощью тега b</title> </head> <body> <p>Первая часть текста набрана обычным шрифтом. <b>А вот эта часть будет выделена жирным.</b></p> </body> </html>
Использование тегов для форматирования текста в HTML загромождает исходный код, усложняет его, а значит, вероятность допустить в нем ошибку становится выше. Для того чтобы этого избежать, создали отдельный язык для стилевой разметки — CSS. Кроме размера и цвета шрифтов, этот язык разметки регулирует разделение заголовков, подзаголовков и основного текста, размер полей и отступов, отдельные цветовые фреймы для выделения текста, цвет основного фона, шапки и подвала.
Как устроены таблицы стилей
CSS, как и любой язык, имеет свой синтаксис. В нем есть правила — значения, которые определяют внешний вид элементов. CSS-правило состоит из селектора, CSS-свойств и их значений:
Селекторы — это метки, которые помогают браузеру понять, к какой части HTML-кода нужно применить заданные параметры.
CSS-свойства — это определенные параметры оформления, например цвет элемента или текста (color) или цвет фона (background).
Значение — это просто значение, оно выражается текстом или числом, например черный (black).
селектор { свойство: значение; }
p { color: black }
CSS-правила в коде заключаются в фигурные скобки {…}. Перед открытием скобки обязательно нужно указать селектор, к которому относится это правило.
В примере селектором является <p>, и он выбирает все теги с именем <p>, color — это CSS-свойство а black — значение CSS-свойства. Связка «свойство: значение» называется блоком объявления стилей. Внутри него свойство отделяется от значения двоеточием, а один блок от другого отделяет точка с запятой.
Таблицы называются каскадными, потому что работают по принципу каскада — то есть правило, прописанное ниже, считается приоритетным. Например, если в нашем примере под значением фонового цвета мы пропишем еще одно значение color: red, то цвет текста будет красным, а не черным.
p { color: black background: #eeeeee color: red }
Подключение стилей CSS
Чтобы использовать CSS совместно с HTML, можно выбрать один из способов:
1. Весь код, написанный на CSS, прописывается в отдельном внешнем файле с расширением .css. Его подключают к HTML-странице при помощи тега <link href> — это служебный тег, который на странице не будет видно:
<head> <link href=”style.css” rel=”stylesheet”> </head> Атрибут rel со значением stylesheet указывает, что в документе применяются именно стили текста. Это важно, так как, кроме применения стилей, тег <link> используется еще во множестве разных значений.
2. Прописать стили CSS внутри конкретного тега с помощью атрибута style:
<p style=»color: black; background: #eeeeee»> Добавление стиля с помощью атрибута style</p>
В этом случае можно не использовать фигурные скобки, потому что и без них браузеру будет понятно, к какому элементу относится правило.
Структура сайта
Свойства CSS float
Float — это свойство, которое определяет, по какой стороне будет выравниваться элемент: по правой или по левой. Например, чтобы выровнять элемент по левому краю, подписываем CSS-свойство:
float: left;
Этот способ удобно использовать, например, для обтекания картинок текстом, но некоторое время назад с помощью float верстали практически все. Например, это был распространенный метод верстки меню. Чтобы пункты меню образовывали линию, каждому элементу присваивался float: left или float: right, чтобы они выстраивались друг за другом:
Выстраивание элементов в линию с помощью float: left
flexbox
Flexbox пришел на смену float в 2011 году. Его преимущество заключалось в том, что блоки стали более гибкими. Элементы сжимались и растягивались, заполняя пространство, их без проблем можно было выровнять по вертикали и горизонтали. Например, чтобы выстроить элементы меню по центру, достаточно прописать в коде:
justify-content: center;
Расположение элементов по центру с помощью CSS flexbox
Один элемент можно растянуть так, чтобы блоки заняли всю ширину страницы. Для этого для блока child (селектор класса) прописывается CSS-свойство:
flex-grow: 1;
Растягивание элементов на ширину страницы с помощью CSS flexbox
grid
Grid появился в … году, он помогал решать многие задачи, с которыми сталкивались разработчики на протяжении долгого времени. Задачи решались методами, которые изначально для этого не предназначались. Главным нововведением стало расположение элементов относительно нескольких осей — по вертикали и по горизонтали. Растянуть элементы не несколько строк или несколько столбцов можно, присвоив каждому значения a, b, c, d и так далее. Затем прописываем в CSS-коде:
grid-template-areas: “a b c d d” “f f g d d”
В разметке значение «a» — это элемент 1, «b» — элемент 2, «c» — это элемент 3, а «d» повторяется дважды, так как занимает две колонки.
CSS3
CSS3 — это новое поколение CSS, которое до сих пор находится в доработке. С его помощью можно анимировать элементы без использования JavaScript, создавать тени и градиенты, скруглять углы блоков.
Например, для скругления элемента header используется свойство border-radius:
header { background-color:#7695FE; border: thin #336699 solid; padding: 10px; margin: 10px; text-align: center; border-radius: 25px; }
Проблема заключается в том, что не все браузеры одновременно начинают поддерживать нововведения CSS3, поэтому в браузере, который поддерживает свойство border-radius, кнопка будет выглядеть так:
А другой может проигнорировать это свойство:
Из-за этих нестыковок верстальщики, которые работают с CSS3, установили правило: «Веб-сайты не должны выглядеть одинаково на всех браузерах, и это нормально».
Методология CSS
Методология — это стандарт написания CSS таким образом, чтобы его можно было поддерживать и читать другим членам команды или сторонним разработчикам.Другими словами, это правила, которые будут понятны человеку со стороны, чтобы он мог разобраться в коде без автора и внести правки. Рекомендации по написанию и называются методологиями CSS.
Универсальной методологии на сегодняшний день не существует. Некоторые из них устарели, некоторые используются активнее других, а в ближайшее время могут появиться новые, более совершенные методологии. Самыми популярными являются две.
Atomic CSS. В этой методологии создается набор классов — инструментов, которые унифицируют правила. Классы комбинируются непосредственно в блоке HTML, то есть стили элементов задаются не в CSS. Таким образом облегчается задача верстальщика, так как ему не нужно переключаться между контекстами.
Например, в любом проекте есть значения:
padding — внутренние отступы со всех сторон элемента;
margin — внешние отступы со всех сторон элемента.
Одинаковые значения { padding: 5px; } и { margin: 5px; } можно унифицировать в $space-1: 5px, а значения { padding: 10px; } и { margin: 10px; } преобразовать в универсальное значение $space-2: 10px:
Такая методология полезна для больших проектов, так как можно создать не единичный интерфейс, а целую дизайн-систему, которую можно будет использовать повторно.
CSS-in-JS. Эта методология предлагает вместо подключения CSS-файлов подключить к HTML один JS-модуль, в котором можно будет использовать преимущества языка JavaScript. Преимущество такого подхода — это более мощный CSS, так как можно использовать абсолютно все его функции без ограничений. Например, выбранные цвета из дизайн-проекта можно осветлять или затемнять с помощью кода JS:
import color from ‘color’ const red = Color (‘red’) const styles = { color: red.lighten(10).toHex() }
Еще одно преимущество CSS-in-JS — это сокращение объема кода и числа файлов. Например, в этой методологии точно не придется создавать отдельный CSS-файл для одного маленького компонента, в котором прописано 2–3 правила. А в других методологиях таких файлов бывает много.
Методология CSS-in-JS в первую очередь создана для удобства разработчиков и повышения качества DX (Developer Experience), который, в свою очередь, повлияет и на удобство пользователей — UX (User Experience). А эти явления действительно связаны напрямую, так как чем комфортнее работать разработчику — без багов и костылей, — тем более качественным получается функционал интерфейса
Last updated
