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

8768

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

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

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

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

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

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

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

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

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

.aaa > span:first-child {}

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

.aaa > span:nth-child {}

Сайдбар на всю высоту контента с помощью 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)

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; /*  */

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

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

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

Отступ снаружи элемента (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; /*  */

Размеры элемента (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

Фоновое изображение элемента (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; // для первого фона отображение внутри границ, для второго фона отображение под границами

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

zoom
transform

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

opacity

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

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

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

Маркеры в маркированном списке (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)

div:hover { }

Мышь (cursor, user-select)

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

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

Шрифт и текст

Шрифт и размер текста (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

Задать отступ для красной строки текста (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)

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

columns: 200px auto; // ширина задана, количество определяется браузером
columns: 2; // 2 колонки, ширина определяется браузером
columns: 3 150px; // 3 колонки, шириной по 150px

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

column-gap: 3px;

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

calc()

Перенос строки на 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>