Skip to Content
⚙️ Активно работаю над созданием контента и документами для портфолио
База знанийТехнологииCSS

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;.

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

  1. Инлайновые стили (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>
  1. Из отдельного файла
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 работает, когда написана в начале файла. Внешние файлы загружаются первыми. Следующие за ними стили могут их перезаписать.

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

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

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

  1. Декларация шрифта.
CSS
@font-face {
    src: url(путь к файлу);
    font-family: 'Roboto'; 
}
  1. Применение шрифта к элементу.
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.

Практика

  1. Прижать 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.

  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";
}

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

  1. Выравнивание сетки в грид-контейнере:
CSS
.container {
	align-content: center;
	justify-content: space-between;
}

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

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

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

CSS
.container {
	place-content: space-evenly;
}
  1. Выравнивание содержимого грид-областей:

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

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

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

CSS
.container {
	place-items: center space-between;
}
  1. Выравнивание содержимого внутри грид-области:

Свойство 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 от родителя, а также свойства выравнивания грид-контейнера.

Обновлено
ConfluenceExpress.js