CSS

Cascading Style Sheets – каскадные таблицы стилей.

Официальная спецификация – https://www.w3.org/Style/CSS/Overview.ru.html
MDN Web Docs (справочник) – https://developer.mozilla.org/ru/

Структура CSS-элемента

CSS


h1 {
	font-size: 32px;
	color: white;
}

h1 – селектор (по тегу);
font-size и color – свойства;
32px и white – значения свойств.

Шорткат (shortcut) – короткая запись свойства, содержащего несколько значений. Например: margin: 0 auto 20px 40px;.

Подключение стилей

Инлайновые стили (inline styles)

HTML. Вариант 1


<head></head>
<body>
	<h1 style="color: white">Заголовок</h1>
</body>

HTML. Вариант 2


<head>
	<style>
		h1 {
			font-size: 32px;
			color: white;
		}
	</style>
<head>
<body>
	<h1>Заголовок</h1>
</body>

Из отдельного файла

index.html


<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
	<h1 class="title">Заголовок</h1>
</body>

style.css


.title {
	font-size: 32px;
	color: white;
}

Названия CSS-классов

Категория	Названия класса
Блоки	`page`, `header`, `main`, `body`, `footer`, `section`, `content`, `sidebar`, `aside`, `article`, `widget`
Изображения	`image`, `img`, `picture`, `pic`, `illustration`, `icon`, `logo`, `avatar`, `userpic`, `thmbnail`, `thumb`
Контейнеры	`container`, `wrapper`, `wrap`, `overlay`, `inner`, `holder`, `box`, `grid`, `row`, `column`, `col`
Навигация	`button`, `btn`, `control`, `ctrl`, `dropdown`, `nav`, `navbar`, `sidebar`, `menu`, `topmenu`
Размеры	`tiny`, `small`, `medium`, `base`, `big`, `large`, `huge`, `narrow`, `wide`, `xs`, `sm`, `lg`, `xl`, `xxl`, `xxxl`
Разное	`search`, `socials`, `advertisement`, `adv`, `commercial`, `promo`, `features`, `feat`, `benefits`, `slider`, `carousel`, `card`, `pagination`, `user`, `author`, `meta`, `basket`, `breadcrmbs`, `more`, `all`, `modal`, `popup`, `tooltip`, `tip`, `preview`
Состояния	`active`, `current`, `visible`, `hidden`, `error`, `warning`, `success`, `pending`
Списки	`list`, `items`, `item`
Текст	`title`, `subtitle`, `heading`, `headline`, `lead`, `tagline`, `caption`, `slogan`, `text`, `description`, `desc`, `exerpt`, `quote`, `blockquote`, `snippet`, `link`, `copyright`

CSS-директивы

`@import`

Синтаксис:

CSS


@import url(main.css);

Особенности:

Каждая обрабатываемая директива @import загружается по очереди. Это может плохо отразиться на скорости загрузки сайта. Элемент <link> (в отличие от @import) позволяет загружать файлы параллельно.
@import работает, когда написана в начале файла. Внешние файлы загружаются первыми. Следующие за ними стили могут их перезаписать.

Шрифты и типографика

Подключение к странице

Шрифт подключают в два этапа:

Декларация шрифта.

CSS


@font-face {
    src: url(путь к файлу);
    font-family: 'Roboto'; 
}

Применение шрифта к элементу.

CSS


div {
    /* Если шрифт Roboto из файла не загрузится, 
		браузер применит Arial или Helvetica, 
		или любой шрифт без засечек в системе пользователя */
 
    font-family: 'Roboto', 'Arial', 'Helvetica', sans-serif;
    font-weight: bold;
    font-style: italic;
}

Особенности

Каждое начертание шрифта требуется декларировать (подключать) отдельно:

CSS


@font-face {
    src: url(путь к файлу обычного начертания);
    font-family: 'Roboto';
}
@font-face {
    src: url(путь к файлу курсива);
    font-family: 'Roboto';
    font-style: italic;
}
@font-face {
    src: url(путь к файлу полужирного начертания);
    font-family: 'Roboto';
    font-weight: bold;
}
@font-face {
    src: url(путь к файлу полужирного курсива);
    font-family: 'Roboto';
    font-style: italic;
    font-weight: bold;
}

Старые браузеры не умеют работать с WOFF2 и WOFF, поэтому нужно подключать список шрифтов в разных форматах. Для эго применяют параметр format. Браузер прочитает такой список и выберет первый найденный шрифт, с которым умеет работать.

CSS


@font-face {
    src: url(путь к файлу.woff2) format('woff2'),
             url(путь к файлу.woff) format('woff'),
             url(путь к файлу.ttf) format('truetype'),
             url(путь к файлу.eot) format('eot');
}

Функция local() запрещает браузеру скачивать шрифт из интернета, если в системе пользователя уже имеется шрифт с таким же именем.

CSS


@font-face {
    src: local('Best font ever'),
             local('BestFontEver'),
             local('best-font-ever'),
             url(путь к файлу.woff2) format('woff2'),
             url(путь к файлу.woff) format('woff'),
             url(путь к файлу.ttf) format('truetype'),
             url(путь к файлу.eot) format('eot');
}

Настройка .block {} позволяет браузеру отрисовать весь текст обычным шрифтом, пока скачивается основной.

CSS


@font-face {
    src: url(./Inter-regular.woff) format('woff');
    font-family: 'Inter';
}
 
.block {
    font-family:  'Inter', 'Arial', sans-serif;
}

Свойство font-display указывает браузеру, что делать, если шрифт не скачивается:

font-display: block; – отрисовать текст прозрачным альтернативным шрифтом, дождаться загрузки и перерисовать весь текст видимым скачанным шрифтом.
font-display: swap; – сразу отрисовать текст альтернативным шрифтом, дождаться загрузки и перерисовать весь текст скачанным шрифтом.

Подробнее см. в Доке – https://doka.guide/css/font-display/

Пример

styles/fonts.css. Декларируем шрифт


@font-face {
  font-family: 'IBM Plex Serif';
  src:
    local('IBM Plex Serif'), local('IBMPlexSerif'),
    local('IBM Plex Serif SemiBold'),
    url(https://___.woff2)
      format('woff2'),
    url(https://___.woff)
      format('woff'),
    url(https://___.ttf)
      format('truetype');
  font-weight: bold;
  font-display: swap;
}
 
@font-face {
  font-family: Ubuntu;
  src:
    local('Ubuntu'), local('ubuntu'),
    url(https://___.woff2) format('woff2'),
    url(https://___.woff) format('woff'),
    url(https://___.ttf) format('truetype');
  font-weight: normal;
  font-display: swap;
}
 
@font-face {
  font-family: 'Istok Web';
  src:
    local('Istok'), local('Istok Regular'), local('istok'),
    local('istokregular'), local('Istok Web'),
    url(https://___.woff2) format('woff2'),
    url(https://___.woff) format('woff'),
    url(https:/___.ttf)
      format('truetype');
  font-weight: normal;
  font-display: swap;
}

styles/style.css. Применяем шрифт к элементу


.title {
  font-family: 'Istok Web', serif;
}
 
.subtitle {
  font-family: Ubuntu, sans-serif;
}
 
.content {
  font-family: 'IBM Plex Serif', serif;
}

Оформление текста

text-transform: uppercase, lowercase, capitalize и др.
letter-spacing – межбуквенное расстояние.
line-height – межстрочное расстояние.
text-decoration– подчеркивание и пр. оформление.
font-family – название шрифта.
font-weight – насыщенность шрифта.
font-size – размер шрифта.
line-height – высота строки.
columns – шорткат для column-count и column-widht.

Переполнение блока

Обрезать текст, в конце отобразить многоточие:

CSS


.text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Перенести часть слова на новую строку:

CSS


.text {
	overflow-wrap: break-word;
}

Позиционирование

Все элементы на странице находятся в потоке. Блочные отрисовываются каждый с новой строки, строчные располагаются рядом друг с другом. Элемент с inline-block встаёт в строку с соседними строчными или строчно-блочными элементами, но при этом реагирует на свойства ширины и высоту.

Взаимное расположение элементов называется позиционированием и по умолчанию описывается правилом: position: static.

Подробнее про поток документа см. Доку – https://doka.guide/html/flow/ , про позиционирование – https://doka.guide/css/position/

Когда элемент остается в потоке, но смещается относительно самого себя, это называется относительным позиционированием и задается правилом:

CSS


div {
	position: relative;
	top: 10px;
	right: 20px;
	bottom: 40px;
	left: 20px;
}

При этом сдвигается только сам элемент, но выделенная под него область остается в потоке.

При абсолютном позиционировании (position: absolute) элемент вырывается из потока и располагается относительно другого спозиционированного элемента, начиная от своего родителя и вверх к body.

При фиксированном позиционировании (position: fixed) элемент также вырывается из потока. Но располагается относительно окна браузера (viewport).

При липком позиционировании (position: sticky) элемент фиксируется в заданном месте. При скроле не сдвигается.

Свойство z-index позволяет переопределить положение элементов, наложенных друг на друга, по оси Z.

z-index не работает с элементом, который не спозиционирован или спозиционирован статично (position: static), за одним исключением. Если элемент находится внутри flex или grid контейнера, то z-index будет работать во всех случаях.

Свойство inset – это шорткат для top, right, bottom и left. Например: inset: 0 равнозначно inset: 0 0 0 0. По аналогии с margin и padding.

Flexbox

Игра для изучения Флексбокс – https://flexboxfroggy.com/#ru

Теория

Флекс-контейнер – родительский элемент. Задается свойством display: flex.
Флекс-элементы – дочерние элементы флекс-контейнера.

Флекс-элементы подчиняются только своему родителю. Настройки флекс-контейнеров более высокого уровня ими не наследуются.

Внутри контейнера элементы выстраиваются по 2-м осям:

Основная ось.
Поперечная ось (перпендикулярна основной).

Изменить направление осей можно свойством flex-direction. Значения: raw, raw-reverse, column, column-reverse.

Для выравнивания элементов по основной оси используется свойство justify-content. Значения: start, end, center, space-between, space-around, space-evenly.

Для выравнивания элементов по поперечной оси используется свойство align-items. Значения: stretch, start, center, baseline.

Свойства justify-content и align-items управляют контекстом в целом, а, например, margin: auto – отдельным элементом. Управление контекстом – более универсально.

Для переноса элементов используется свойство flex-wrap: wrap. Однако при этом возникает проблема с равномерным распределением боковых отступов. Свойства justify-content: space-around, justify-content: space-between и margin для решения этой проблемы не подходят. Лучше применять row-gap, column-gap и align-content.

Свойство align-content отвечает за поведение элементов при включенном flex-wrap. Значения: stretch, start, end, center, space-between, space-around, space-evenly. При этом важно, чтобы высота флекс-контейнера была больше высоты вложенных в него элементов (чтобы оставалось свободное пространство для распределения).

Свойство flex-flow объединяет собой два свойства: flex-direction и flex-wrap. Например, flex-flow: column wrap.

Для управления порядком отображения элементов на странице можно применить свойство order (к каждому из них, к отдельным или к одному конкретному элементу). Управлять поведением отдельного элемента также можно через свойство align-self. Значения: stretch, start, center, baseline.

Практика

Прижать footer к низу страницы

CSS


.body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
 
.main {
	flex-grow: 1;
}

flex-grow: 1 отдает блоку .main всё оставшееся по высоте свободное пространство.

Если всем флекс-элементам задать flex-grow: 1, то свободное пространство равномерно распределится между ними. При этом, если одному элементу задать flex-grow: 2, то он заберёт себе в два раза больше свободного пространства, чем элементы с flex-grow: 1.

Есть 5 карточек. Нужно разместить 3 карточки в первой строке, а 2 растянуть по ширине во второй строке.

CSS


.cards {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	padding: 10px;
}
 
.card {
	flex-basis: 300px;
	flex-grow: 1;
	min-height: 200px;
	border: 2px solid #000;
	text-align: center;
}

Свойство flex-basis устанавлиет базовый размер элемента (до расширения). При нехватке ширины страницы карточки переносятся на новую строку и занимают свободное пространство, учитывая значение свойства flex-grow.

Свойство flex-shrink отвечает за сжатие элемента (от базового значения flex-basis). Оно выполняет роль, обратную flex-grow.

Значения по умолчанию: flex: 0 1 auto, что означает:

CSS


flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

Grid Layout

Онлайн-сервис для проверки исполнения кода – https://codepen.io Игра для изучения Grid Layout – https://cssgridgarden.com/#ru

По умолчанию грид-контейнер состоит из одной строки и одного столбца. Для каждого дочернего элемента создается новая строка. Grid ведет себя как блочный элемент, а inline-grid – как строчный, т.е. занимает лишь то пространство, которое необходимо для размещения вложенных в него элементов.

Треки

Грид-контейнер можно разделить на столбцы и строки (т.н. “треки”):

CSS


.container {
	display: grid;
	grid-template-columns: 120px 80px 340px;
	grid-template-rows: 160px 100px 160px;
	gap: 10px 20px;
}
 
/* Создает грид-контейнер, состоящий из трех строк и трех столбцов */

Для сокращения записи применяют свойство repeat():

CSS


grid-template-columns: 25% 25% 25% 25%;
/* или можно сократить: */
grid-template-columns: repeat(4, 25%);
 
/* Создает грид-контейнер, состоящий из 4-х колонок шириной по 25% от viewport */

Пример дизайнерской сетки из 12-ти колонок:

CSS


.grid {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  padding: 0 12px;
}
 
/* Дизайнеры обычно используют сетку из 6-ти или 12-ти колонок */

Грид-линии

Растянуть элементы можно при помощи грид-линий:

grid-column-start и grid-column-end – для вертикальных грид-линий;
grid-row-start и grid-row-end – для горизонтальных грид-линий.

Шорткат через /. Если указать только одно значение, второе по умолчанию будет auto:

grid-row: 1;
grid-column; 2/3;

Например, в сетке из шести элементов первый элемент занимает 2/3 столбцов и 5/5 строк:

HTML


<div class="container">
  <div class="block block_large">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
</div>

CSS


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 40px 5px;
}
 
.block {
  border: 1px solid black;
}
 
.block_large {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 6;
}

Также можно использовать отрицательные значения:

CSS


.block_large {
  grid-column-start: -1;
  grid-column-end: -3;
  grid-row-start: 1;
  grid-row-end: 6;
}

Грид-линиям можно назначать имена:

CSS


grid-template-rows: [aside-start] 300px [aside-end];

или

CSS


grid-row: aside-start / 4;

Ключевым словом span указывают количество строк или столбцов, которое должен занимать элемент до или после какой-то линии:

CSS


.block {
	grid-column-start: 2;
	grid-column-end: span 2;
	grid-row-start: span 2;
	grid-row-end: 3;
}

Грид-области

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

Грид-область должна быть прямоугольником. Каждой области нужно задать свое уникальное имя. Для одного имени можно создать только одну область. Точкой, как правило, обозначается пустая ячейка. Например:

CSS


.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-template-areas:
	"header header header"
	"news news aside"
	"promo promo aside"
	". footer footer";
}

Выравнивание элементов

Выравнивание сетки в грид-контейнере:

CSS


.container {
	align-content: center;
	justify-content: space-between;
}

или сокращенно:

CSS


.container {
	place-content: center space-between;
}

Если в place-content указать только одно значение, оно применится к обеим осям:

CSS


.container {
	place-content: space-evenly;
}

Выравнивание содержимого грид-областей:

Свойство justify-items выравнивает элементы по направлению колонок, align-items — по направлению строк.

CSS


.container {
	align-items: center;
	justify-items: space-between;
}

или сокращенно:

CSS


.container {
	place-items: center space-between;
}

Выравнивание содержимого внутри грид-области:

Свойство justify-self управляет горизонтальным выравниванием, align-self — вертикальным.

Наложение элементов

CSS


.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  width: 600px;
  height: 400px;
}
 
.grid__overlay {
  z-index: 1;
  grid-column: 1/5;
  grid-row: -1/-6;
  width: 100%;
  height: 100%;
}

`subgrid`

Применяется в качестве значения свойств grid-template-columns и grid-template-rows. Позволяет вложенным элементам наследовать значение gap от родителя, а также свойства выравнивания грид-контейнера.