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

Это статья-шпаргалка с примерами по CSS. Здесь для удобства я собрал некоторые часто используемые свойства. Статья будет пополняться по мере необходимости.

Оглавление

Сбросить свойства 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; /* расстояние от нижнего края родительского элемента */

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



Выравнять элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы (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; /* граница не отображается */

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

outline

Фон элемента (background)

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

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; /* горизонтальное выравнивание текста в пределах элемента */

Многоколоночный текст (column)


column

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


calc()

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

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

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









Все статьи-шпаргалки по программированию:

Поделиться статьей:  

Поделитесь своим мнением

Правила сообщений

Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Копирование материалов разрешено только с указанием источника и прямой индексируемой ссылкой на оригинал.
Яндекс.Метрика
© 2018 Хороший отзыв · Искусство выбирать · Лично · Разумно · Честно