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

CSS (Каскадные таблицы стилей) используется для описания, создания и изменения внешнего вида документа. И может быть применен к любым видам XML-документов.

Форматирование элементов происходит с помощью свойств и допустимых значений этих свойств.

Объявление стиля состоит из двух частей: селектора элемента страницы (указателя), и команды форматирования элемента — блока объявления в фигурных скобках. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления перечисляются форматирующие свойства и их значения.

селектор_элемента {свойство: значение; свойство2: значение;}

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

Селекторы
*	Выберет все элементы на странице, которые имеют идентификатор.
input	Селекторы по элементу. Выберет все элементы <input>.
.имяКласса	Селекторы по классу
	селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index" или похожем).
#идентификатор	Селекторы по идентификатору
	селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc" или похожем).
[attr=value]	Выберет все абзацы на странице, которые имеют атрибут attr со значением value.
[аttr~=value]	Выберет все ссылки с атрибутомattr содержащим в значении подстроку "value" отделенную пробелами от остального содержимого.
[attr*=value]	Позволяет выбрать все элементы имеющие атрибут attr со значением содержащим подстроку "value".
[attr^=value]	Выберет все элементы имеющие атрибут attr со значением начинающимся на "value".
[attr$=value]	Выберет все элементы имеющие атрибут attr со значением заканчивающимся на "value".
A + B	Соседние селекторы
	селекторы ;ul + li выберет любой элемент, который находится непосредственно после элемента.
A ~ B	Родственные селекторы
	p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.
A > B	Дочерние селекторы
	селектор ul > li выберет все элементы , которые находятся внутри элемента <ul> element.
A B	Вложенные селекторы
	селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>.
*ns|* *|*	Универсальный селектор
	Соответствует любому HTML-элементу.
Комбинация селекторов
a[href][title]	- выберет все ссылки, для которых заданы атрибуты href и title;
img[alt*="CSS"]:nth-of-type(even)	- выберет все четные картинки, альтернативный текст которых содержит слово CSS.
Псевдоселекторы и псевдоклассы
:first-child	Применяет стилевое оформление к первому дочернему элементу.
:first-line	Задает стиль первой строки текста.
:first-letter	Применяет стили к первой букве первой строки.
:hover	Стиль элемента при наведении на него мышью.
:active	Стиль для активной ссылки
:focus	Стиль для элемента получающего фокус
:link	Непосещенные ссылки
:visited	Посещенные ссылки
:lang(var)	Выбор элементов с атрибутом языка в ();
:before	Для вывода желаемого текста перед содержимым элемента
:after	Для вывода желаемого текста после содержимым элемента
:read-only	Применяется к полям формы, у которых задан атрибут readonly.
::-moz-placeholder	Задаётся стилевое оформление подсказывающего текста в Firefox.
::-webkit-input-placeholder	Задаётся стилевое оформление подсказывающего текста в Chrome.
:checked	Применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено»
:default	Применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов.
:disabled	Применяет стиль к заблокированным элементам форм.
:empty	Представляет пустые элементы те, которые не содержат дочерних элементов, текста или пробелов.
:enabled	Используется для применения стиля к доступным (не заблокированным) элементам форм.
:first-child	Применяет стилевое оформление к первому дочернему элементу своего родителя.
:first-of-type	Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.
:indeterminate	Задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии.
:last-child	Задает стилевое оформление последнего элемента своего родителя.
:last-of-type	Задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.
:not	Задает правила стилей для элементов, которые не содержат указанный селектор.
:nth-child	Используется для добавления стиля к элементам на основе нумерации в дереве элементов. 2n - все четные элементы, номера элементов 2, 4, 6, 8, 10. 2n+1 - все нечетные элементы, номера элементов 1, 3, 5, 7, 9. 3n+2 - номера элементов 2, 5, 8, 11, 14.
:nth-last-of-type	Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
:only-of-type	Позволяет выбрать все элементы, которые являются уникальными родительском.
:nth-of-type	Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
:nth-last-child	Позволяет выбрать все элементы являющиеся вторыми элементами потомками в родительском с конца.
:root	Определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу<html>.

Свойства элементов

Шрифты, текст, ссылки
font	Краткая запись свойств шрифта.
font-size	Размер шрифта.
font-family	Семейство шрифта для оформления текста содержимого.
font-style	Начертание шрифта.
font-variant	Представление строчных букв.
font-weight	Насыщенность шрифта.
font-stretch	Начертание шрифта, уплотнение и расширение текста.
font-size-adjust	Контролирование шрифта при недоступности первого.
text-indent	Отступ текста.
text-align	Выравнивание текста.
text-decoration	Текст-отделка.
letter-spacing	Межбуквенное расстояние.
word-spacing	Слово-интервал.
text-transform	Текст-преобразования.
white-space	Белое-пространство.
line-height	Высота линии.
word-break	Данное свойство позволяет установить правила переноса внутри слов для того, чтобы длинные строки полностью заполняли пространство внутри контейнера. Не используется для CJK-языков (китайский-японский-корейский).
word-wrap	Применяется, когда текст не умещается в свой контейнер и выходит за его границу. Позволяет разрывать длинные слова и переносить их на следующую строку.
color	Цвет текста.
cursor	Устанавливает форму курсора, когда он находится в пределах элемента.
vertical-align	Вертикальное выравнивание строчных элементов, изображений и полей форм.
tab-size	Настройка табуляции.
unicode-bidi	Направление написания слов в тексте (используется вместе с direction).
Блочная модель
display	Тип генерируемого элементом контейнера.
height	Высота элемента.
max-height	Максимальная высота.
min-height	Минимальная высота
width	Ширина элемента.
max-width	Максимальная ширина.
min-width	Минимальная ширина.
box-sizing	Управление расчётом ширины и высоты элемента с учётом внутренних отступов и толщины рамки.
resize	Позволяет растягивать элемент в ширину и высоту.
margin	Отступ от каждого края элемента.
margin - top	Отступ от верхнего края элемента.
margin - right	Отступ от правого края элемента.
margin - bottom	Отступ от нижнего края элемента.
margin - left	Отступ от левого края элемента.
padding	Значение поля вокруг элемента.
padding - top	Значение поля от верхнего края элемента.
padding - right	Значение поля от правого края элемента.
padding - bottom	Значение поля от нижнего края элемента.
padding - left	Значение поля от левого края элемента.
Flexbox модель
flex-direction	Свойство относится к flex-контейнеру. Управляет направлением главной оси, вдоль которой укладываются flex-элементы, в соответствии с текущим режимом записи. Не наследуется.
flex-wrap	Свойство определяет, будет ли flex-контейнер однострочным или многострочным, а также задает направление поперечной оси, определяющее направление укладки новых линий flex-контейнера.
flex-flow	Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction ;и flex-wrap.
order	Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам. Свойство не наследуется.
flex-grow	Коэффициент увеличения ширины flex-элемента
flex-shrink	Коэффициент уменьшения ширины flex-элемента
justify-content	Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами.
align-items	Выравнивание элементов по вертикали.
align-self	Выравнивание отдельных элементов.
align-content	Свойство выравнивает строки в flex-контейнере при наличии дополнительного пространства на поперечной оси, аналогично выравниванию отдельных элементов на главной оси с помощью свойства justify-content.
Таблицы и рамки
border-collapse	Удаление промежутка между рамками ячеек таблицы.
border-spacing	Увеличение промежутка между рамками ячеек таблицы.
caption-side	Управление местоположением подписи к таблице.
empty-cells	Скрытие пустых ячеек.
table-layout	Компоновка макета таблицы.
border	Устанавливает толщину, стиль и цвет границы вокруг элемента.
border - top	Устанавливает толщину, стиль и цвет границы сверху элемента.
border - bottom	Устанавливает толщину, стиль и цвет границы внизу элемента.
border - right	Установить толщину, стиль и цвет правой границы.
border - left	Установить толщину, стиль и цвет левой границы.
border - color	Устанавливает цвет границы элементов.
border - top - color	Задает цвет границы сверху элемента.
border - right - color	Задает цвет границы справа от элемента.
border - bottom - color	Задает цвет границы снизу элемента.
border - left - color	Задает цвет границы слева от элемента.
border - style	Стиль границы вокруг элемента.
border - top- style	Стиль границы сверху элемента.
border - left- style	Стиль границы слева элемента.
border - right - style	Стиль границы справа элемента.
border - bottom- style	Стиль границы внизу элемента.
border - width	Толщина границы на всех сторонах элемента.
border - top - width	Толщина границы сверху элемента.
border - right - width	Толщина границы справа от элемента.
border - left - width	Толщина границы слева от элемента.
border - bottom - width	Толщина границы снизу элемента.
width	Ширина таблицы и столбцов задается с помощью свойства.
border-radius	Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса.
border-top-left-radius	Верхний левый радиус.
border-image-width	Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1.
border-image-source	Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока.
border-image-slice	Свойство определяет размер частей изображения, используемых для оформления границ элемента и делит изображение на девять частей.
border-image-repeat	Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений.
border-image-outset	Свойство позволяет переместить изображение-рамку за пределы границ элемента на указанную длину. Может задаваться как с помощью одного, так и четырёх значений.
border-image	Градиентная рамка. Значением может выступать не только изображение, но и градиентная заливка.
outline	Устанавливает цвет, стиль и толщину внешней обводки элемента.
outline-width	Задает толщину внешней обводки элемента, установить индивидуально для каждой границы нельзя.
outline-style	Задает стиль ввнешней обводки элемента. Не влияет на ширину блока или его положение.
outline-color	Указывает цвет внешней обводки элемента. Не влияет на ширину блока или его положение.
outline-offset	Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline.
Списки
list-style-type	Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.
list-style	Свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение маркера.
list-style-image	В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
list-style-position	Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
Позиционирование и обтекание
position	Управление положением элементов.
top	Смещение относительно верхней стороны блока-контейнера.
right	Смещение относительно правой стороны блока-контейнера.
bottom	Смещение относительно нижней стороны блока-контейнера.
left	Смещение относительно левой стороны блока-контейнера.
float	Выравнивание элемента, остальные элементы обтекают его.
clear	Отмена обтекания элемента.
z-index	Управление наложением элементов.
object-fit	Управляет заполнением контейнера для содержимого замещаемых элементов.
object-position	Позиционирует содержимое замещаемых элементов внутри контейнера относительно осей X и Y.
Переполнение и обрезка
text-overflow	Обрезка строк.
clip	Обрезка части элемента.
overflow	Добавление полос прокрутки или скрытие содержимого
overflow-x	Обрезка правого края контента внутри блока в случае его переполнения.
overflow-y	Обрезка нижнего края контента внутри блока в случае его переполнения.
Видимость элемента
opacity	Прозрачность элемента.
visibility	Управление видимостью элемента.
Цвет и фон
color	Цвет текста.
background	Аттрибуты фона
background-repeat	Свойство определяет, каким образом будет повторяться фоновый рисунок. Не наследуется.
background-color	Устанавливает фоновой цвет страницы.
background-attachment	Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
background-clip	Свойство определяет, будет ли цвет фона ограничиваться содержимым элемента или будет простираться до внешнего края границы border. Не наследуется.
background-origin	Свойство определяет, где будет позиционироваться фоновое изображение. Если одновременно задано свойство background-attachment: fixed, эффекта не будет.
background-size	Свойство позволяет масштабировать фоновое изображение по вертикали и горизонтали. Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область.
background-repeat	Повторение фона.
background-image	Фоновое изображение.
background-position	Положение фонового изображения.
background-blend-mode	Режим смешивания фоновых слоёв, заданных в свойстве background-image.
Тени
text-shadow	Тень текста.
box-shadow	Тень блока.
Переходы
transition-property	Указание свойств, к которым будет применен переход.
transition-duration	Определяет время происхождения перехода.
transition-timing-function	Определяет функцию, указывающую, как вычисляются промежуточные значения свойств.
transition-delay	Задержка перехода.
transition	Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство.
Анимации
animation-name	Свойство задаёт имя анимации.
animation-duration	Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы.
animation-timing-function	Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций.
animation-delay	Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию.
animation-iteration-count	Свойство позволяет запустить анимацию несколько раз.
animation-direction	Свойство задает направление повтора анимации.
animation	Краткая запись всех свойств анимации.
animation-play-state	Свойство управляет проигрыванием и остановкой анимации.
animation-fill-mode	Свойство определяет порядок применения определенных в @keyframes стилей к объекту.
Трансформации
backface-visibility	Видимость обратной стороны элемента.
transform	Свойство описывается с помощью функций трансформации, которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. Не наследуется.
transform-origin	Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50%. Задаётся только для трансформированных элементов. Не наследуется.
transform-style	Стиль 3D-преобразований.
perspective-origin	Точка 3D-трансформации.
perspective	Активация 3D-пространства для элемента.
Генерируемое содержимое
content	Добавление генерируемого содержимого.
counter-increment	Приращение счётчика.
counter-reset	Инициализация или сброс счетчика
quotes	Добавление кавычек заданного типа.
Печать
page-break-before	Разрыв страницы до.
page - break - after	Разрыв страницы после.
age - break - insidep	Разрыв страницы внутри.
orphans	Висячая строка.
widows	Минимальное число строк текста на следующей странице.
Экранный диктор
volume	Задает громкость звучания музыки на веб-странице.
speak	Задает, как именно будет озвучен текстовый элемент.
pause	Паузу до и после озвучивания контента элемента.
pause-before	Длительности паузы до произношения содержимого элемента.
pause-after	Длительности паузы после произнесения содержимого элемента.
cue	Задает звуковые сигналы, обозначающие начало и конец элемента.
cue-before	Задает звуковой сигнал, обозначающий начало элемента.
cue-after	Задает звуковой сигнал, обозначающий окончание элемента.
play-during	Публикация звука в фоновом режиме.
azimuth	Определяет расположение источника звука.
elevation	Направление источника звука по вертикали.
speech-rate	Скорость речи.
voice-family	Голоса перечисляются через запятую.
pitch	Частота звука.
pitch-range	Интонацией произношения содержимого элемента.
stress	Задает высоту пиков в интонации голоса.
richness	Устанавливает мягкость голоса.
speak-punctuation	Задает как озвучивать пунктуацию в тексте.
speak-numeral	Задает как озвучивать числа.

Значения свойств и величины

Абсолютные размеры
0	Ноль не требует единицы.
px	Пиксели.
cm	Сантиметры.
mm	Миллиметры.
in	Дюймы.
pt	1 пт= 1/72 дюйма.
pc	1пк = 12 пт.
Относительные размеры
em	1 em = размер буквы m родителя.
rem	Размер относительно размера шрифта элемента <html>
ex	Высота строчной буквы "х".
%	Процент
Цвет
white	Именованныецвета. Всего 147.
гgb(R, G, B)	Красный, синий и зеленый. В процентах или от 0 до 255. Нельзя задавать значения числами с плавающей точкой.
rgba(R,G,B,A)	RGBA. RGB с параметром прозрачности alpha, указываемом в десятичных значениях от 0 до 1.
#FFFFFF;	HEX. RGB в шестнадцатеричной системе счисления. Если в парах оба знака одинаковые, можно использовать короткую запись. Например: #FFFFFF → #FFF.
hsl(H,S,L)	HSL. Hue — цвет(от 0 до 360), Saturation — насыщенность цвета, Lightness — яркость цвета.
hsla(H,S,L,A)	HSLA. HSL, но с прозрачностью от 0 до 1.
transparent	Ключевое слово для обозначения полной прозрачности.
currentColor	Ключевое слово указывающее на наследуемый цвет текста элемента.
Градиенты и паттерны
linear-gradient()	Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента.
radial-gradient()	Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
repeating-radial-gradient()	Повтор линейного и радиального градиента. Рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.
Градиенты и паттерны
linear-gradient()	Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента.
radial-gradient()	Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
repeating-radial-gradient()	Повтор линейного и радиального градиента. Рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.
Функции
attr()	Добавление значения атрибута с помощью свойства content.
calc()	Задание вычисляемых значений css-свойств.
counter()	Отображает текущее значение счетчика.
counters()	Создает вложенную нумерацию.
rotate()	Поворот на заданный угол.
rotateX()	Поворот относительно оси X.
rotateY()	Поворот относительно оси Y.
rotateZ()	Поворот относительно оси Z.
scale()	Увеличение/уменьшение элемента.
skew()	Деформирование (искажение) сторон элемента относительно координатных осей.
skewX()	Искажение сторон элемента относительно оси X.
skewY()	Искажение сторон элемента относительно оси Y.
translateZ()	Перемещение элемента в направлении оси Z.
translate3d()	Перемещение элемента в 3D-пространстве .
matrix()	Трансформирование элемента с помощью нескольких функций 2D-трансформаций одновременно .
matrix3d()	Трансформирование элемента с помощью нескольких функций 3D-трансформаций одновременно.
perspective()	Установка 3D-перспективы только для одного элемента.
url()	Добавление внешнего медиа содержимого.

@-Правила

@-Правила (ЭТ правила)
@charset	Правило для задания кодировки символов, используемое в таблице стилей.
@font-face	Подключение пользовательских шрифтов.
@import	Правило для загрузки внешних таблиц стилей в выбранную таблицу стилей.
@keyframes	Правило для ключевых моментов анимации.
@media	Правило медиазапроса.
@page	Правило для изменения некоторых свойств при печати документ.

Медиатипы

all	Все типы устройств.
print	Страничные материалы и документы, просматриваемые на экране в режиме предварительного просмотра печати.
screen	Экраны цветных компьютерных мониторов.
speech	Синтезаторы речи.