Шпаргалка по 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: 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>
