CSS — это язык, который описывает внешний вид документа, определяя стиль и расположение элементов на веб-странице. Название CSS расшифровывается как Cascading Style Sheets, что означает каскадные таблицы стилей. Он работает вместе с HTML, который отвечает за размещение контента на странице.
HTML можно сравнить с чертежом планировки квартиры, который показывает расположение дверей, окон и комнат. В то же время CSS можно рассматривать как дизайн-проект, который добавляет цвет стен, мебель и декор, делая веб-страницу более детализированной и привлекательной.
Для чего нужен CSS
CSS является отдельным языком для стилевой разметки веб-страниц. Если HTML отвечает за структуру документа, то CSS отвечает за его внешний вид. Вместо использования тегов для форматирования текста, CSS позволяет задавать стили для элементов HTML, что упрощает и улучшает структуру исходного кода.
Например, с помощью CSS можно задать цвет, тип шрифта и его кегль, сделать текст жирным или выделить курсивом. Этот язык разметки также регулирует разделение заголовков, подзаголовков и основного текста, размер полей и отступов, отдельные цветовые фреймы для выделения текста, цвет основного фона, шапки и подвала.
Использование CSS значительно упрощает и улучшает разработку веб-страниц, так как позволяет создавать красивый и удобочитаемый дизайн без необходимости усложнять исходный код HTML-документа.
Как устроены каскадные таблицы стилей
CSS, как и любой другой язык программирования, имеет свой синтаксис, включающий в себя правила, которые задают внешний вид элементов. Каждое CSS-правило состоит из селектора, CSS-свойств и их значений.
Селекторы — это метки, которые помогают браузеру понять, к какой части HTML-кода нужно применять заданные параметры,
CSS-свойства — это определенные параметры оформления, например, цвет элемента или текста (color) или цвет фона (background),
Значение — это просто текстовое или числовое выражение, например, черный (black).
CSS-правила заключаются в фигурные скобки {…}, а перед открытием скобки обязательно нужно указать селектор, к которому относится это правило.
Например, в приведенном ниже примере селектором является <p>, и он выбирает все теги с именем <p>. Color — это CSS-свойство, а black — значение CSS-свойства.
селектор {
свойство: значение;
}
p {
color: black
}
Связка «свойство: значение» называется блоком объявления стилей. Внутри блока свойство отделяется от значения двоеточием, а один блок от другого отделяет точка с запятой.
Таблицы называются каскадными, потому что работают по принципу каскада — то есть правило, прописанное ниже, считается приоритетным. Например, если в нашем примере под значением фонового цвета мы пропишем еще одно значение 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 указывает, что применяются именно стили текста. Этот тег может использоваться еще во множестве разных значений.
2. Стили CSS можно прописать внутри конкретного тега с помощью атрибута style. Например,
<p style=»color: black; background: #eeeeee»> Добавление стиля с помощью атрибута style </p>.
В этом случае не нужно использовать фигурные скобки, поскольку браузеру будет понятно, к какому элементу относится правило.
Структура сайта
CSS float
Float — это свойство CSS, которое позволяет выравнивать элементы по левой или правой стороне. Чтобы выровнять элемент по левому краю, необходимо использовать свойство float: left. Раньше этот метод активно применялся для верстки сайтов, но сейчас он используется главным образом для обтекания картинок текстом. Однако, float до сих пор применяется для выстраивания элементов в линию, например, при верстке меню. Для того чтобы пункты меню располагались в одной линии, к каждому элементу присваивались значения float: left или float: right.
flexbox
В 2011 году Flexbox стал заменой float. Он обладает преимуществами, которых нет у float, так как блоки становятся более гибкими. Элементы могут сжиматься и растягиваться, заполняя пространство. Выравнивание элементов по вертикали и горизонтали также становится более простым. Например, для выравнивания элементов меню по центру достаточно добавить в код свойство justify-content: center. С помощью Flexbox можно растянуть один элемент, чтобы блоки занимали всю ширину страницы. Для этого необходимо добавить свойство flex-grow: 1 для блока child (селектор класса). Для изучения всех возможностей 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. На сегодняшний день не существует универсальной методологии, однако существуют несколько популярных подходов, таких как Atomic CSS и CSS-in-JS.
Atomic CSS представляет собой набор классов, которые унифицируют правила. Классы комбинируются в HTML-блоках, что упрощает задачу верстальщика. Например, можно унифицировать одинаковые значения отступов в $space-1: 5px, а значения отступов $space-2: 10px. Такой подход особенно полезен для больших проектов, когда нужно создать не единичный интерфейс, а целую дизайн-систему, которую можно будет использовать повторно.
CSS-in-JS, напротив, предлагает вместо подключения CSS-файлов подключить к HTML один JS-модуль, который позволяет использовать преимущества языка JavaScript. Это позволяет использовать все функции CSS без ограничений. Например, можно изменять цвета с помощью кода JS. Еще одно преимущество CSS-in-JS — это сокращение времени на загрузку страницы, так как все стили интегрированы в один файл.