Шпаргалка по CSS

Таблица html-цветов и ещё цвета. Конвертер цветов из одной цветовой модели в другую. А также сочетаемость цветов.

Оглавление

Раздел

Фон элемента: цвет, картинка, положение, повтор, размер, прокрутка, границы (background, background-color, background-image, background-position, background-repeat, background-size, background-attachment, background-clip)

// универсальное свойство для фона
// background: [background-attachment || background-color || background-image || background-position || background-repeat]
// значения можно указывать в произвольном порядке, ни одно из них не является обязательным
background: url(images/pic.png) repeat-y #fff; // путь к фоновому изображению, повторение фона по вертикали, цвет фона
background: inherit; // наследует значение родителя

// цвет фона
background-color: #fff; // цвет фона
background-color: transparent; // прозрачный цвет фона

// картинка для фона
background-image: url(images/pic.png); // путь к фоновому изображению элемента
background-image: url(images/pic1.png), url(images/pic2.png); // 2 фоновых изображения для элемента
background-image: none; // отменяет фоновое изображение у элемента

// позиция фона; значения по горизонтали: left, center, right; значения по вертикали: top, center, bottom;
background-position: top left; // фоновое изображение в левом верхнем углу контейнера (top left = left top = 0% 0%)
background-position: top center; // фоновое изображение по центру вверху контейнера (top = top center = center top = 50% 0%)

// повторение фонового рисунка
background-repeat: no-repeat; // не повторять
background-repeat: repeat; // повторять по горизонтали и вертикали
background-repeat: repeat-x; // повторить только по горизонтали
background-repeat: repeat-y; // повторить только по вертикали
background-repeat: space; // повторять столько раз, чтобы полностью заполнить контейнер, если это не удаётся, между картинками добавляется пустое пространство
background-repeat: round; // повторять так, чтобы в контейнере поместилось целое число рисунков, если это не удаётся, то фоновые рисунки масштабируются

// масштабирование фонового изображения 
background-size: cover; // сохраняет пропорций фона так, чтобы его ширина или высота равнялась ширине или высоте блока
background-size: contain; // сохраняет пропорций фона так, чтобы картинка целиком поместилась внутрь блока
background-size: auto 100%; // ширина вычисляется по пропорции; высота 100% высоты контейнера
background-size: 100% auto; // высота вычисляется по пропорции; ширина 100% ширины контейнера

// режим прокрутки фонового изображения вместе с содержимым элемента
background-attachment: fixed; // при прокрутке фоновое изображение элемента неподвижно
background-attachment: scroll; // при прокрутке фон перемещается вместе с содержимым
background-attachment: fixed, scroll; // одно фоновое изображение фиксированное, второе перемещается
background-attachment: local; // фон фиксируется с учётом поведения элемента, если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, при этом фон выходящий за рамки элемента остаётся на месте

// режим показа фона под границей контейнера
background-clip: padding-box; // фон отображается внутри границ
background-clip: border-box; // фон выводится под границами
background-clip: content-box; // фон отображается только внутри контента
background-clip: padding-box, border-box; // для первого фона отображение внутри границ, для второго фона отображение под границами

Селектор по атрибуту

h1[class=ttt] {}
input[name=rrr] {}

Селектор по непосредственным детям (>)

#menu > span {} // задаст стиль для всех span - непосредственных детей menu

Задать ширину блоку с абсолютным позиционированием по ширине родителя

.mdiv {position:absolute; left:0; raght:0;}

Устранить полосу прокрутки для узких устройств (html, body, overflow-x)

// бывает, что на смартфонах какой-нибудь неустановленный элемент страницы создаёт отступ справа для всей страницы, хотя визуально ничего не вылазит, следующий код устранит горизонтальную полосу прокрутки и отступ справа для html и body

html, body {width:100%; margin:0; overflow-x:hidden;}

Уменьшать картинки при уменьшении ширины окна браузера

img {display: block; max-width: 100%;}

Сделать полосу прокрутки слева, а не справа (direction)

// у родительского элемента: направление справа налево
#scroll {direction:rtl; overflow:auto; height:50px; width:50px;}
// у дочернего элемента: направление слева направо
#scroll div {direction:ltr;}

Создать горизонтальную полосу прокрутки для отдельной таблицы или элемента при уменьшении ширины окна браузера

.adapt {display: block; overflow-x: auto; white-space: nowrap;} /* присваивается таблице или контейнеру широкого блока для адаптации под смартфоны  */
#mydiv {position: relative; width:500px;} /* присваивается вложенному блоку, ему необходимо задать ширину, таблице ширину задавать не нужно */

Стилизация чекбокса -> см пример

HTML-код:
<input class="chk chk1" id="a1" type="checkbox"><label for="a1"></label>
<input class="chk chk2" id="b1" type="checkbox"><label class="labl" for="b1">бег</label>

CSS-код:
/* для элемента input c type="checkbox" */
.chk {
position: absolute;
z-index: -1;
opacity: 0;
z-index: 100;
}

/* для элемента label, связанного с .chk */
.chk+label {
display: inline-flex;
align-items: center;
user-select: none;
}

/* создание в label псевдоэлемента before со следующими стилями */
.chk+label::before {
content: '';
display: inline-block;
width: 13px;
height: 13px;
flex-shrink: 0;
flex-grow: 0;
border: 1px solid #adb5bd;
border-radius: 0.25em;
margin-right: 0.5em;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}

/* стили при наведении курсора на checkbox */
.chk:not(:disabled):not(:checked)+label:hover::before {
border-color: #b3d7ff;
}

/* стили для активного чекбокса (при нажатии на него) */
.chk:not(:disabled):active+label::before {
background-color: #b3d7ff;
border-color: #b3d7ff;
}

/* стили для чекбокса, находящегося в фокусе */
.chk:focus+label::before {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.chk:focus:not(:checked)+label::before {
border-color: #80bdff;
}

/* стили для чекбокса, находящегося в состоянии checked */
.chk:checked+label::before {
border-color: #0b76ef;
background-color: #0b76ef;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.chk1:not(:checked)+label::before {background-color: #fff1b2;}
.chk2:not(:checked)+label::before {background-color: #cfcfcf;}

Стиль для первого и последнего элемента в наборе (для детей первого уровня) (first-child, last-child)

.aaa > span:first-child {} // первый элемент
.aaa > span:last-child {} // последний элемент

Стиль для элемента в наборе по номеру (для детей первого уровня) (nth-child)

.aaa > span:nth-child(1) {} // первый элемент
.aaa > span:nth-child(3) {} // третий элемент
.aaa > span:nth-child(2n) {} // все чётные элементы
.aaa > span:nth-child(2n+1) {} // все нечётные элементы
.aaa > span:nth-child(-n+5) {} // элементы 1,2,3,4,5

Стиль для элементов в наборе с исключением (not)

#tstat tbody tr td:not(:nth-child(1)) {} // для всех td в строке tr, кроме первого
#menu span:not(#logo) {} // для всех span внутри menu кроме того, у которого id="logo"
#menu > span:not(#logo, #logo2) {} // для всех span - непосредственных детей menu кроме тех, у которых id="logo" или id="logo2"
ol:not([class]) li {} // для всех li, которые принадлежат любым ol, кроме тех, что имеют атрибут class

Сайдбар на всю высоту контента с помощью (flex)

.layout {display: flex; flex-direction: row;}
.sidebar {padding: 5px; width:100px; background-color:#464a62;}
.content {padding: 10px;}

<div class="layout">
<div class="sidebar"></div>
<div class="content"></div>
</div>

Сбросить свойства CSS в умолчания (all, *, initial, inherit, unset)

all: initial /*  */
all: inherit; /* сбросить все свойства элемента к их первоначальному или унаследованному значению */
all: unset; /*  */

div {margin: unset; padding: unset;} /*  */
div {all: unset;} /*  */
* {all: unset;} /*  */

Повысить приоритет стиля (!important)

color: #000 !important; /* директива !important применит указанный цвет, даже если он снова будет изменен ниже */

Определить, как элемент должен быть показан в документе (display)

display: block; /* отобразить элемент как блочный */
display: inline; /* отобразить элемент как строчный */
display: inline-block; /* отобразить элемент как блочный внутри, строчный снаружи (ширина блока при этом устанавливается по содержимому) */
display: list-item; /* отобразить элемент как блочный с добавлением к нему маркера списка */
display: none; /* элемент невидим, занимаемое им место освобождается */

Отображение или скрытие элемента (visibility)

visibility

Управление отображением содержимого, когда оно не помещается внутри элемента целиком (overflow)

overflow

Управление видимостью текста, когда он не помещается внутри элемента целиком (text-overflow)

text-overflow

Установить способ позиционирования элемента относительно окна браузера или других объектов на веб-странице (position)

position: relative; /*  */
position: absolute; /*  */
position: fixed; /*  */
position: static; /*  */

Задание расстояний от краёв родительского элемента для элемента (left, top, right, bottom)

// значение position у элемента д. б. задано как absolute, fixed или relative
left: 4px; /* расстояние от левого края родительского элемента */
top: 4px; /* расстояние от верхнего края родительского элемента */
right: 4px; /* расстояние от правого края родительского элемента */
bottom: 4px; /* расстояние от нижнего края родительского элемента */

Отцентрировать элемент по горизонтали относительно своего родителя

margin: 0 auto; // для блочного элемента

Выровнять элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы - пример (vertical-align)

Свойство нужно применять к inline-элементу, находящемуся внутри block-элемента
vertical-align: baseline; /*  */
vertical-align: bottom; /*  */
vertical-align: middle; /*  */
vertical-align: top; /*  */
vertical-align: 10px | 80%; /*  */
vertical-align: sub; /*  */
vertical-align: super; /*  */
vertical-align: text-bottom; /*  */
vertical-align: text-top; /*  */

Вертикальное выравнивание во flexbox (flex, flex-direction, flex-basis, align-items)

<div id="cont">
<div class="itm"><span>A</span>aaa</div>
<div class="itm"><span>B</span>bbb</div>
<div class="itm"><span>C</span>ccc</div>
</div>

#cont {
 display: flex; // элемент flex-контейнер
 flex-direction: column; // дочерние блоки располагаются столбцом, то есть один под другим
}
.itm {
 display: flex; // элемент flex-контейнер - дочерний тоже может быть flex-контейнером
 flex-basis: 100%; // ширина блока 100% от родительского
 align-items: baseline; // элементы внутри вертикально выравниваются по базовой линии
}

Отцентрировать - выровнять элемент по вертикали и по горизонтали относительно своего родителя (transform)

// размеры элемента при этом могут быть не заданы

.outer {position:relative;} // контейнер родитель

.inner1 {position:fixed; top:50%; transform:translateY(-50%); background:#d5d5d5;} // отцентрирует элемент только по вертикали с учётом 50% высоты элемента

.inner2 {position:fixed; top:30%; left: 50%; transform: translateX(-50%); background:#d5d5d5;} // отцентрирует элемент по горизонтали с учётом 50% ширины элемента и сдвинет на 30% от верха по вертикали

Наложение элементов друг на друга (z-index)

// значение position у элемента обязательно д. б. задано как absolute, fixed или relative

z-index: 100; /* элемент с большим числом, будет показан выше других */
z-index: auto; /* наложение происходит в порядке объявления элементов в документе */

Размеры элемента (width, height)

width: 150px; /* ширина */
width: auto; /* ширина задана автоматически */
height: 150px; /* высота */
height: auto; /* высота задана автоматически */

Максимальные и минимальные размеры элемента (max-height, max-width, min-height, min-width)

max-height
max-width
min-height
min-width

Отображение границы элемента (border)

border: 1px solid #aaa; /* сплошная граница вокруг элемента шириной 1px цветом #aaa */
solid | dashed | dotted | double | groove | ridge | inset | outset; /* задание вида границы */
border-top: 1px solid #aaa; /* верхняя граница элемента */
border-bottom: 1px solid #aaa; /* нижняя граница элемента */
border-left: 1px solid #aaa; /* левая граница элемента */
border-right: 1px solid #aaa; /* правая граница элемента */
border: none; /* граница не отображается */

Закруглить границу элемента (border-radius)

border-radius: 10px; // закруглить все уголки элемента на 10px

border-radius: 7px 4px 5px 0; // закруглить уголки элемента: левый верхний - 7px, правый верхний - 4px, правый нижний - 5px, левый нижний - 0px

Граница элемента не влияющая на его положение и ширину (outline)

outline

Изменить масштаб элемента (zoom, transform)

zoom
transform

Прозрачность элемента (opacity)

opacity: 0.5; // сделает элемент полупрозрачным
opacity: 0; // сделает элемент невидимым, полностью прозрачным
opacity: 1; // сделает элемент полностью не прозрачным

Обтекание элемента (float, clear)

float: left | right | none
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

clear: none | left | right | both
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон

Работает для строчных элементов типа display:inline; или display:inline-block;

Маркеры в маркированном списке (list-style)

li {list-style-type: none;} /* убрать маркеры для элемента списка*/
ul {margin-left: 0; padding-left: 0;} /* убрать отступы слева для списка */
list-style-type: circle | disc | square | decimal; /* кружок, точка, квадрат, число - изменить вид маркера для элемента списка */
list-style

Текст с тенью (text-shadow)

<сдвиг вправо> <сдвиг вниз> <радиус размытия> <цвет> /* формат для задания тени, обязательными параметрами являются только сдвиг вправо и сдвиг вниз */
text-shadow: 1px 1px 2px black; /* пример задания тени */
text-shadow: 1px 1px 2px black, 0 0 1em red; /* задание двух теней, первая тень в списке размещается наверху для CSS3 */
text-shadow: none; /* отмена добавления тени */

Блок с тенью (box-shadow)

inset <сдвиг вправо> <сдвиг вниз> <радиус размытия> <растяжение> <цвет> /* формат для задания тени, обязательными параметрами являются только сдвиг вправо и сдвиг вниз */
box-shadow: 0 0 10px red; /* красная тень без сдвигов с радиусом 10px */
box-shadow: 0 0 10px red, 0 0 10px #555; /* задание двух теней, первая тень в списке размещается наверху */
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); /* тень с прозрачностью */
box-shadow: inset 0 0 10px red; /* тень внутри блока */
box-shadow: none; /* отмена добавления тени */

Цвет (color, background-color, rgb(), rgba(), hsl(), hsla)

color: #000; /* установить цвет шрифта элемента */
background-color: #fff; /* установить цвет фона элемента */

#000 | #a41b5c | rgb(255,0,0) | hsl(0,100%,50%); /* числовые способы задать цвет */
white | silver | gray | black | maroon | red | orange | yellow | olive | lime | green | aqua | blue | navy | teal | fuchsia | purple; /* способы задать цвет словом */
rgba(255,255,255,0.9) | hsla(120,100%,50%,0.1); /* числовые способы задать цвет с прозрачностью */

Обесцветить картинку и при наведении на неё курсора снова сделать цветной (hover, filter, transition)

.pic {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}
.pic:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
/* анимация плавного перехода */
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

Событие наведения мыши на элемент (hover)

div:hover { }

Мышь (cursor, user-select)

cursor:pointer; /* курсор мыши ручка */
cursor: auto; /* курсор мыши по умолчанию для элемента */
cursor: default; /* курсор мыши стрелка */
cursor: help; /* курсор мыши стрелка с вопросом */

user-select: none; /* запретить выделение текста пользователем */

Запретить растягивать textarea (textarea, resize)

// не даст пользователю изменять размеры textarea (исчезнет уголок в правом нижнем углу, за который можно тянуть)
textarea {resize: none;}

Вставить статичный символ в текстовое поле (input)

// ° - нестираемый значок градуса в поле
<div class="cls"><span>&deg;</span><input id="lab_sh" type="number" step="1" min="0" max="90" value="0" /></div>

.cls {display: inline-block; position: relative;}
.cls span {position: absolute; right: 23px; top: 50%; transform: translateY(-50%);}
.cls input {width:50px;}

Отступы

Отступ снаружи элемента (margin)

margin: 0; /* со всех сторон сразу */
margin: 3px 5px; /* сверху-снизу и справа-слева */
margin: 3px 5px 10px 15px; /* верх-право-низ-лево */
margin-top: 3px; /*  */
margin-bottom: 3px; /*  */
margin-left: 3px; /*  */
margin-right: 3px; /*  */

Отступ внутри элемента (padding)

padding: 2px; /* со всех сторон сразу */
padding: 2px 4px; /* сверху-снизу и справа-слева */
padding: 2px 4px 2px 4px; /* верх-право-низ-лево */
padding-top: 3px; /*  */
padding-bottom: 3px; /*  */
padding-left: 3px; /*  */
padding-right: 3px; /*  */

Шрифт и текст

Шрифт и размер текста (font-family, font-size)

font-family: Arial, Tahoma; /* установить семейство шрифта для элемента */
font-size: 10pt | 12px | 2em | 80%; /* установить размер шрифта для элемента */

Регистр букв текста (text-transform, font-variant)

text-transform: uppercase; /* все символы текста становятся прописными (верхний регистр) */
text-transform: lowercase; /* все символы текста становятся строчными (нижний регистр) */
text-transform: capitalize; /* первый символ каждого слова в предложении будет заглавным */
text-transform: none; /* не меняет регистр символов */

font-variant: normal; /* оставляет регистр символов заданным по умолчанию */
font-variant: small-caps; /* все строчные символы становятся заглавными уменьшенного размера, при этом заглавная отображается как обычно */

Ширина букв шрифта (font-stretch)

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст
font-stretch: inherit | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

Начертание шрифта: жирный, курсив (font-weight, font-style)

font-weight: bold; /*  */
font-weight: normal; /*  */
font-weight: 300; /*  */

font-style: italic; /*  */
font-style: normal; /*  */
font-style: oblique; /*  */

Декорации текста: подчёркнутый, зачёркнутый, надчёркнутый (text-decoration)

text-decoration: none; /* текст без декораций */
text-decoration: line-through; /* зачёркнутый */
text-decoration: overline; /* надчёркнутый */
text-decoration: underline; /* подчёркнутый */

Расстояние между буквами в слове (letter-spacing)

letter-spacing

Способ отображения пробелов между словами (white-space)

white-space: normal; // перенос строк происходит как обычно при появлении пробела между словами
white-space: nowrap; // не даст переносить текст на новую строку, при этом тег <br> внутри сработает как обычно

Задать отступ для красной строки текста (text-indent)

text-indent

Тип кавычек в тексте документа (quotes)

quotes

Переносы слов (word-break, word-wrap)

word-break
word-wrap

Интервал между словами (word-spacing)

word-spacing

Межстрочный интервал (line-height)

line-height: 1.4 | 12px | 80% | normal; /* установить интервал между строками текста */

Горизонтальное выравнивание текста в пределах элемента (text-align)

// задаётся у родителя для строковых элементов внутри него

text-align: center;
text-align: justify; /* выравнивает и с правого и с левого края сразу */
text-align: left;
text-align: right;

Многоколоночный текст (columns, column-count, column-width, column-fill)

columns: [column-width] [column-count] - порядок параметров значения не имеет

column-width: 200px; // ширина колонок
column-count: 2; // 2 колонки
columns: 3 auto; // 3 колонки, ширина автоматическая

column-fill: balance; // будет заполнять колонки сбалансированно (так по умолчанию)
column-fill: auto; // будет заполнять сперва первую колонку, потом вторую и так далее

Задать промежутки между колонками (column-gap)

column-gap: 3px;

Запретить перенос текста между колонками (break-inside)

// если родителю задано например columns: 2; то дочерним элементам нужно задать следующее:
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;

Вычисляемые значения для свойств (calc)

calc()

Переменные в CSS (:root, var)

// поддерживают все современные браузеры
body {
 --mycolor: #000000; // объявить переменную (будет видна только в блоке body и во всех его дочерних блоках)
 color: var(--mycolor); // использовать переменную
}

:root {
 --mycolor: #000000; // объявить переменную (будет видна везде)
}

Перенос строки на CSS

a.comment-link1:after {
content: '\A';
white-space: pre;}

Рукописные стрелки на CSS -> см демо (border-top-left-radius, border-top-right-radius)

// CSS-код
:root {--highlight-color: #6c6c6c;}
.arrow {position: absolute; bottom: 0; left: 150px; width: 30px; height: 70px;}
.arrow2 {position: absolute; bottom: 0; left: 250px; width: 30px; height: 70px;}
.arbd {width: 100%; height: 95%; margin-left: 11px; border-style: dashed; border-color: var(--highlight-color);}
.arbd_l {border-width: 2px 0 0 2px; border-top-left-radius: 100%;}
.arbd_r {border-width: 2px 2px 0 0px; border-top-right-radius: 100%;}
.arbd::after {content: ''; position: absolute; bottom: 0; border-width: 10px 7px 0; border-style: solid; border-color: var(--highlight-color) transparent transparent;}
.arbd_l::after {left: 5px;}
.arbd_r::after {right: -18px;}

// HTML-код (1 стрелка: сверху справа - вниз; 2 стрелка: сверху слева - вниз)
<div class="arrow"><div class="arbd arbd_l"></div></div>
<div class="arrow2"><div class="arbd arbd_r"></div></div>

Псевдоклассы и псевдоэлементы

Эффекты

Анимационный эффект движущийся блик по стеклу на картинке (демо) (animation, keyframes, shine, before, linear-gradient, transform)

// HTML-код
<figure class="imgef">
<img src="bac.jpg">
</figure>

// CSS-код
.imgef {margin: 0; padding: 0; background: transparent; overflow: hidden; position: relative;}
.imgef::before {position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg);}
.imgef:hover::before {-webkit-animation: shine 1.5s; animation: shine 1.5s;}
@keyframes shine {100% {left: 125%;}}