Шпаргалка css на русском – селекторы, атрибуты CSS, манипуляции с DOM, события и другие способы использования библиотеки

Правильная шпаргалка по CSS-каскаду — CSS-LIVE

Написать эту статью меня подтолкнула относительно недавняя статья на CSS-tricks (скорее всего, вы ее уже видели, ссылку не дам из вредности:). Ее автор проделал большую и замечательную работу — нарисовал красивую наглядную схему-«шпаргалку», написал объяснение простым языком, привел кучу примеров, не забыл даже про презентационные атрибуты, тоже влияющие на стили (в SVG)… Увы, даже та статья подтвердила два печальных правила: 1) никто не знает CSS, 2) никто не читает спецификаций. Так что первая ее редакция транслировала одно из популярных заблуждений о каскаде. К чести автора, он оперативно исправил и схему, и статью — но если бы он заглянул в стандарт, этого могло бы и не понадобиться…

Вот я и решил бесстыже позаимствовать идею простой и наглядной визуальной «шпаргалки» из той статьи — но сразу сделать ее правильной, отражающей не только личный опыт автора, но и стандарт.

Как мы уже знаем, для каждого свойства каждого элемента CSS-каскад собирает все правила с упоминанием этого свойства, применяемые к этому элементу. А затем сортирует их по определенным критериям. Для сегодняшних практических задач нам хватит трех критериев, перечисленных в модуле каскада и наследования

предпоследнего, 3 уровня: сперва по происхождению и важности, потом по специфичности и, наконец, по порядку в коде. В более новых спецификациях упоминаются и другие критерии, но до них дойдем тогда, когда они начнут реально на что-то влиять.

Помимо этого, в получении вычисленного значения CSS-свойства может участвовать значение, унаследованное от родителя (для наследуемых свойств). И да, иногда итоговые стили элемента зависят от других особенностей элемента — чаще всего атрибутов. Нагляднее всего это в SVG, где эти презентационные атрибуты (stroke, fill, r и т.д.) буквально соответствуют одноименным CSS-свойствам. По актуальному стандарту SVG2 даже d у <path> соответствует CSS-свойству, что позволяет анимировать стилями сами контуры SVG-фигур (правда, пока лишь в «хромятах»). Но подобные атрибуты есть и в HTML. С некоторыми из них, вроде width и height для <img>, мы по сей день регулярно встречаемся. Другие, вроде text и bgcolor

у <body> (задающие ему цвет текста и фона соответственно) почти забыты и встречаются лишь на реликтовых страницах из 90-х — но браузеры их поддерживают, поскольку таких страниц еще немало. И еще у каждого свойства есть начальное значение, которое назначается ему, если для этого элемента нигде ничего больше не указано (на «турнир» каскада никто не явился и он не состоялся:).

Так вот, если расположить все эти возможные источники значения для свойства в порядке возрастания приоритета, получится такая табличка:

Источник Специфичность
Начальное значение
Унаследованное значение (для наследуемых свойств)
Браузерные стили без !important 0, 0, 1
0, 0, 2
и т. д.
Пользовательские стили без !important
Авторские стили без !important

(CSS-in-JS тоже попадают сюда!)

Из презентационных атрибутов HTML и SVG 0, 0, 0
Из <style> и <link> 0, 0, 0
0, 0, 1
и т. д.
Из атрибута style="…"
Стили при анимации (по стандарту и в Firefox)
Авторские стили с !important Из <style> и <link> 0, 0, 0
0, 0, 1
и т.д.
Из атрибута style="…"
Пользовательские стили с !important
Браузерные стили с !important 0, 0, 1
0, 0, 2
и т.д
Стили при анимации (в WebKit/Blink/Edge, не по стандарту)
Стили во время перехода (если есть)

Таблица делится на крупные «ярусы» (левая колонка). На некоторых ярусах может быть максимум одно значение: свойство родительского элемента либо наследуется, либо нет, свойство либо анимируется, либо нет, и т.д. Другие ярусы подразделяются на «подуровни» — например, элементу может соответствовать много разных селекторов, как в наших обычных стилях (стандарт называет их

авторскими), так и во встроенных стилях браузера. Значения, приходящие из этих селекторов, сначала сортируются по специфичности. А при равной специфичности — просто по порядку.

Применится то значение, которое попадёт в эту таблицу ниже всех.

Давайте быстренько применим эту шпаргалку на практике. Я заготовил специальный пример на Codepen, который пытается задать цвет для body сразу несколькими способами:

See the Pen Пример действия каскада by Ilya Streltsyn (@SelenIT) on CodePen.

В нем нет «хитрых» селекторов, где надо кропотливо подсчитывать циферки специфичности: главная хитрость далеко не в ней. Зато свойство color — наследуемое. И для элемента body, который мы сегодня «препарируем», существует исторический HTML-атрибут

text, тоже влияющий на цвет текста.

Очередность применения значений к свойству для элемента нагляно (пояснение в тексте)

Все значения для свойства color, которые в принципе могли бы примениться к нашему элементу <body>, собраны в правой части рисунка — в порядке их появления в коде. А слева видно, на каком «ярусе» таблицы это значение в итоге окажется. Чтобы рассмотреть получше, можно открыть более крупную версию картинки по клику.

Пробежимся по этому списку и отметим интересные моменты.

У начального значения, очевидно, в таком раскладе шансов нет: оно может примениться, лишь если больше нет ничего другого, а у нас тут целая куча всего.

С унаследованным значением (от родительского элемента <html>, он же :root) ситуация похожая: оно применилось бы, если бы самому body не было задано никаких стилей. Как это значение попало к самому родителю — абсолютно неважно: наследуется итоговое, вычисленное значение (подробнее о «жизненных стадиях» CSS-значения — в предыдущей нашей статье про каскад). Так что !important в стилях для html никак не влияет на приоритетность родительского стиля для

body. Ну а если бы у нас было не свойство color, а какое-нибудь ненаследуемое свойство, типа width или display — мы бы и вовсе пропустили этот этап целиком.

Далее идут стили, «зашитые» в коде самого браузера. Для свойства color у body, насколько я могу судить, в браузерных стилях (ни для WebKit, ни для Gecko) никакого значения не задано. Дефолтный цвет там задается корневому элементу и наследуется от него по всему дереву. Так что на этом этапе у нас никаких изменений. И на этапе пользовательских стилей — тоже: их просто нет (скорее всего). Вы вообще давно видели пользовательские стили?..

Больше всего разноцветных стрелок переплелось на этапе авторских стилей. Неспроста: этот этап для нас самый важный. Настолько, что многие учебники и статьи по CSS другие этапы и не рассматривают (а зря;). Сюда попадает львиная доля стилей, которые задаем элементам мы, веб-разработчики — неважно, по старинке, через CSS-файлы или тег

<style>, или по-модному, «-in-JS» (на выходе которого всё равно будет что-то из них). И любые методологии и инструменты избавляют лишь (в лучшем случае) от путаницы со специфичностью, но никак не «от каскада» вообще:).

Все значения каждого свойства из авторских стилей, в принципе применимые к нашему элементу, собираются в кучу и сортируются сперва по специфичности селектора, затем по порядку подключения. Способ подключения, вопреки расхожему мифу, вообще ни на что не влияет. Разве что @import может подключаться только в самом начале и из-за этого проигрывает последующим стилям, но причина — именно порядок объявления, а не какая-то «особость» @import.

Первая отдельная строчка в блоке «Авторские стили», со значением red, может удивить: как связаны CSS-свойство color и HTML-атрибут с совсем другим именем? В этом замешана древняя браузерная магия под названием «подсказки для представления» (presentationl hints). Как ни странно, она четко прописана в стандартах. Для каждого языка стандарт описывает, какие атрибуты соответствуют какому свойству, по каким правилам преобразуются их значения (например, те же

width/height для <img> с числовыми значениями переводятся в одноименные CSS-свойства с дописыванием 'px'), и место этих добавочных стилей в каскаде. Для HTML и SVG это место — в самом начале авторских стилей с нулевой специфичностью, перед всеми прочими (правда, в SVG2 с ними вышел забавный казус, ведь никто не хочет учить CSS-каскад:). Для простоты можно считать, что у презентационных атрибутов специфичность ниже нуля (как предлагает Амелия Беллами-Ройдз).

У универсальных селекторов (*), в любых сочетаниях с любыми комбинаторами (пробел, >, ~, +), специфичность тоже равна нулю. Если бы в стилях для * > * («любой элемент, у которого есть родитель», т.е. все кроме корневого) не было !important, первой строчкой в блоке «авторские стили из <style> и <link>» была бы строчка со специфичностью 0, 0, 0 и значением yellow. Но всё равно она шла бы после стилей из презентационных атрибутов.

Далее, селектор по тегу (специфичность 0, 0, 1) проигрывает селекторам по классу и псевдоклассу (у обоих специфичность 0, 1, 0, ведь

:not() сам «не считается»), и из них побеждает последний.

У нашего <body> есть еще и атрибут style, в котором color задан аж дважды. Это нормально: в любом CSS-правиле может быть сколько угодно объявлений одного и того же свойства, и при одинаковой важности побеждает последнее, которое браузер понял — на этом строится возможность «фолбэчного» поведения, залог устойчивости CSS. В нашем случае и важность разная, поэтому объявления «разлетаются» по разным ярусам таблицы: обычное объявление побеждает стили из <style> и <link>, но при наличии важного объявления это уже неважно (простите за каламбур:).

А теперь — самое интересное, о чем молчат (или врут:) почти все статьи о CSS-каскаде: анимация.

К нашему <body> применена анимация, меняющая значение color. И даже не одна, а целых две! Это тоже нормально: свойство animation допускает множественные значения, так что несколько анимаций вполне могут применяться к одному элементу одновременно. Если эти анимации затрагивают одно и то же свойство (как у нас), единственное итоговое значение берется из последней анимации в перечислении (в нашем случае — анимации с именем

purple). Как и с родительским значением при наследовании, абсолютно неважно, откуда и как, с !important или без, нашему элементу досталось значение свойства animation: при расчете цвета нам важно лишь то, есть ли вообще у элемента анимация, затрагивающая свойство color. Анимации через @keyframes и через Web Animations API (где он поддерживается) учитываются одинаково.

В нашем примере значение в анимации фактически не меняется (начальное и конечное значения совпадают), но в общем случае надо учитывать, что речь идет о «мгновенном» значении свойства, которое пересчитывается для каждого кадра анимации. При transition — тоже.

Но вот куда «воткнуть» эти мгновенные значения в каскад — пока вопрос. Стандарт-то однозначен: после всех обычных стилей (и браузерных, и авторских, и пользовательских), но перед всеми важными. Но на практике это так лишь в Firefox. Поэтому и результат нашего примера в нем и других браузерах различается. Поведение Chrome признано багом, поэтому менять стандарт Рабочая группа CSS пока не готова, но вот что-то фиксить этот баг уже минимум три года никто не торопится…

После стилей анимаций (по стандарту) идут важные авторские стили. Они сортируются по тем же правилам, что обычные — сначала по специфичности, затем по порядку в коде, стили из атрибута style «бьют» все остальные.

В нашем примере на этом уровне «притаился» еще один интересный момент — объявление color: inherit !important из селектора по атрибуту. Не путайте его с «автоматическим» наследованием, которое бывает, когда своих стилей у элемента нет (о котором было чуть выше). Ключевое слово inherit — такое же явное значение, как любое другое. Только не константа, а что-то вроде «локальной переменной», в которую подставляется вычисленное значение из родителя. Причем и для наследуемых свойств, и для ненаследуемых. И приоритет этого объявления подчиняется общим правилам. Как и для остальных универсальных значений (initial, unset и revert).

Стиль с !important в атрибуте style — это предел приоритетности для авторских стилей. Поэтому в стандартных браузерах (на сегодня это один лишь Firefox:) значение оттуда и будет окончательным победителем в каскаде (что мы и видим). Перекрыть его могут лишь пользовательские стили с !important (если есть) и браузерные стили с !important (которых для цвета <body> просто по логике быть не может:). Увы, остальные браузеры стандарт не соблюдают, и в них значения из анимации тоже перекрывают важные авторские стили. Учитывайте это, особенно когда возникает соблазн «быстренько подфиксить» что-нибудь на динамичной странице, добавив !important.

И наконец, «король» каскада, даже «джокер», перекрывающий вообще всё везде — это мгновенное значение свойства во время действия transition. Но как у всякого супермогущества, у него есть существенное ограничение: оно не может переопределить начальное значение в статике (по крайней мере, я такого способа, тем более кроссбраузерного, не знаю — если вы знаете, добро пожаловать в комментарии!), а может лишь предотвратить внезапное изменение в динамике. Когда для CSS-свойства задан transition, то даже при мгновенной смене указанного значения (например, при срабатывании псевдокласса типа :hover, либо скриптом) каскадное значение (а вместе с ним и фактическое) будет меняться не резко, а постепенно, с заданными длительностью и плавностью. Это изменение можно даже отложить с помощью transition-delay — в том числе очень надолго. На такой «почти бесконечной» задержке основан один из известных хаков для имитации состояния в CSS (например, после клика).

Пример для этой статьи я решил transition-ом не усложнять. Но у нас про него есть отдельная статья. Хотя ей уже три года, и в спецификациях с тех пор многое поменялось, эта главная особенность по-прежнему в силе. Так что вооружайтесь знанием и смело повелевайте стихией CSS-каскада! И на всякий случай не забывайте следить за обновлениями стандартов (ну и нашего сайта, конечно:).

P.S. Это тоже может быть интересно:

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

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 Значение поля от левого края элемента.
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.
position Управление положением элементов.
top Смещение относительно верхней стороны блока-контейнера.
right Смещение относительно правой стороны блока-контейнера.
bottom Смещение относительно нижней стороны блока-контейнера.
left Смещение относительно левой стороны блока-контейнера.
float Выравнивание элемента, остальные элементы обтекают его.
clear Отмена обтекания элемента.
z-index Управление наложением элементов.
object-fit Управляет заполнением контейнера для содержимого замещаемых элементов.
object-position Позиционирует содержимое замещаемых элементов внутри контейнера относительно осей X и Y.
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.
animation-name Свойство задаёт имя анимации.
animation-duration Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы.
animation-timing-function Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций.
animation-delay Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию.
animation-iteration-count Свойство позволяет запустить анимацию несколько раз.
animation-direction Свойство задает направление повтора анимации.
animation Краткая запись всех свойств анимации.
animation-play-state Свойство управляет проигрыванием и остановкой анимации.
animation-fill-mode Свойство определяет порядок применения определенных в @keyframes стилей к объекту.
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 Задает как озвучивать числа.

Свойства каскадных таблиц стилей (CSS)

Эту статью я хочу посвятить только свойствам каскадных таблиц стилей (CSS). Я специально потратил немного времени и собрал подборку основных свойств CSS. Данный список пригодится каждому вебмастеру, так как благодаря нему вы можете больше не беспокоиться о том, что что-то забудете. Рекомендую всегда держать под рукой данную шпаргалку. Также хочу заметить, что в этой статье будут приводиться только свойства CSS без описания всех возможных значений и примеров. На этом вступительная часть подошла к концу, и мы переходим к основной части – шпаргалке по CSS.

Свойства CSS. Шпаргалка по CSS

Свойства фона

background-position – задает стартовую позицию фонового изображения.
background – объединяет в себе все свойства, которые используются для определения фона страницы.
background-attachment – определяет, является ли фоновое изображение фиксированным или прокручивается вместе со страницей.
background-color – задает цвет фона для элемента.
background-image – определяет используемое изображение фона для элемента.
background-repeat – определяет, как повторять фоновое изображение.

Свойства границ

border-bottom-width – задает ширину нижней границы элемента.
border-left-width – задает ширину левой границы элемента.
border-left-style – задает стиль левой границы элемента.
border-left-color – задает цвет левой границы элемента.
border-left – объединяет в себе все свойства, которые используются для определения левой границы (рамки) элемента.
outline-color – задает цвет внешней границы элемента.
border-collapse – способно удалять двойные линии (границы) на месте стыка ячеек таблицы.
border-width – задает ширину для четырех границ.
border-top-width – задает ширину верхней границы элемента.
border-top-style – задает стиль верхней границы элемента.
outline-style – задает стиль внешней границы элемента.
border-right – объединяет в себе все свойства, которые используются для определения правой границы (рамки) элемента.
border-right-color – задает цвет правой границы элемента.
border-right-style – задает стиль правой границы элемента
border-bottom-color – задает цвет нижней границы элемента.
border-bottom – объединяет в себе все свойства, которые используются для определения нижней границы (рамки) элемента.
border – объединяет в себе все свойства, которые используются для определения границы (рамки) элемента.
border-color – задает цвет для четырех границ.
outline – задает внешнюю границу вокруг элементов
border-top-color – задает цвет верхней границы элемента.
border-top – объединяет в себе все свойства, которые используются для определения верхней границы (рамки) элемента.
border-style – задает стиль для четырех границ.
border-spacing – задает расстояние между границами ячеек в таблице
border-right-width – задает ширину правой границы элемента.
outline-width – задает ширину внешней границы элемента.

Свойства размера

min-width – определяет минимальную ширину элемента.
max-width – определяет максимальную ширину элемента.
min-height – определяет минимальную высоту элемента.
height – определяет высоту элемента.
width – определяет ширину элемента.
max-height – определяет максимальную высоту элемента.

Свойства шрифта

font-size – задает размер шрифта.
font-weight – определяет толщину символов в тексте.
font-style – задает стиль шрифта для текста.
font-family – задает шрифт для элемента.
font – объединяет в себе все свойства, которые используются для определения шрифта.
font-variant – определяет должен ли текст отображаться капительными буквами или нет.

Свойства генерированного контента

quotes – задает тип кавычек, которые используются для вставленных цитат.
counter-reset – создает или сбрасывает один или несколько счетчиков.
counter-increment – используется для увеличения значения счетчика приращений
content – предназначено для вставки сгенерированного контента.

Свойства списка

list-style – объединяет в себе все свойства, которые используются для определения внешнего вида списка.
list-style-position – определяет месторасположение маркера списка.
list-style-type – определяет тип маркера в списке.
list-style-image – заменяет маркер списка изображением.

Свойства отступов

margin-top – определяет верхний отступ для элемента.
margin-right – определяет правый отступ для элемента.
margin-bottom – определяет нижний отступ для элемента.
margin-left – определяет левый отступ для элемента.
margin – задает все свойства отступов в одной строке.

Свойства полей

padding-top – задает верхнее поле для элемента.
padding-right – задает правое поле для элемента.
padding-left – задает левое поле для элемента.
padding-bottom – задает нижнее поле для элемента.
padding – задает все свойства полей в одной строке.

Свойства позиционирования

top – устанавливает положение верхнего края содержимого элемента без учета толщины рамок и отступов.
cursor – определяет тип курсора при наведении мышки на элемент.
display – определяет, как элемент должен быть показан в документе.
visibility – способно сделать любой элемент видимым или невидимым.
right – устанавливает положение правого края содержимого элемента.
z-index – управляет расположением элемента по z-оси
float – определяет, по какой стороне будет выравниваться объект. Остальные элементы будут обтекать его с других сторон.
clip – позволяет определить область позиционированного элемента, в которой будет показано его содержимое.
left – устанавливает положение левого края содержимого элемента
clear – устанавливает с какой стороны элемента запрещено обтекание другими элементами.
overflow – управляет отображением содержания блочного элемента
bottom – устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов.
position – используется для позиционирования элемента.

Свойства таблицы

caption-side – задает расположение заголовка (подписи) таблицы.
empty-cells – позволяет определить показывать границы и фон пустых ячеек или нет.
table-layout – позволяет определить алгоритм разметки таблицы.

Свойства текста

vertical-align – задает вертикальное выравнивание элемента.
word-spacing – уменьшает или увеличивает пробелы между словами.
white-space – определяет отображение пробелов между словами.
text-align – определяет горизонтальное выравнивание текста в элементе.
text-indent – определяет отступ первой строки в текстовом блоке.
text-decoration – определяет оформление текста.
direction – позволяет задать направление отображения текста.
line-height – определяет высоту строки.
letter-spacing – увеличивает или уменьшает расстояние между буквами в тексте.
color – позволяет задать цвет текста.
text-transform – контролирует в тексте выделение заглавными буквами.

CSS Псевдоклассы/элементы

:lang – добавляет стиль к элементу со специальным атрибутом lang.
:hover – добавляет стиль к элементу при наведении на него курсора мышки.
:active – добавляет стиль к активному элементу.
:first-child – добавляет стилевое оформление к первому дочернему элементу селектора
:visited – добавляет стиль к посещенной ссылке.
:after – добавляет контент после элемента.
:before – добавляет контент до элемента.
:focus – добавляет специальный стиль к элементу, который получает фокус.
:first-line – добавляет стилевое оформление к первой строке текста.
:first-letter – добавляет стилевое оформление к первой букве текста.
:link – добавляет стиль к не посещенной ссылке.

На этом шпаргалка по CSS подходит к концу. Если вы считаете ее для себя интересной, рекомендую сохранить эту шпаргалку либо добавить данную страницу к себе в закладки. В будущем в новых статьях я намерен на примерах раскрывать функции, которые выполняют каждое из этих свойств CSS. Ну а пока вы можете подписаться на рассылку на странице «Подписка» чтобы не пропустить последних обновлений блога.

На этом все. Удачи вам и до скорых встреч на страницах блога.