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

Leave a Comment / Css / By /

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

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

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

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

Из презентационных атрибутов HTML и SVG0, 0, 0
Из <style> и <link>0, 0, 0
0, 0, 1
и т. д.
Из атрибута style="…"∞
Стили при анимации (по стандарту и в Firefox)—
Авторские стили с !importantИз
<style> и <link>		0, 0, 0
0, 0, 1
и т.д.
Из атрибута style="…"∞
Пользовательские стили с !important…
Браузерные стили с !important0, 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. Ну а пока вы можете подписаться на рассылку на странице «Подписка» чтобы не пропустить последних обновлений блога.

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