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

Logo
Свойства каскадных таблиц стилей (CSS) - Шпаргалка по 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. Ну а пока вы можете подписаться на рассылку на странице «Подписка» чтобы не пропустить последних обновлений блога.

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

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 3

  • Артем

    Большое спасибо!
    Очень удобно,а то все шпаргалки что встречались были на английском и без таких подробных объяснений.
    Хоть автор и пишет (Я специально потратил немного времени и собрал подборку основных свойств CSS.) что потратил не много времени но сэкономил многим целые часы работы.
    Вот и я не поленился и оставил комментарий.
    Ваш сайт у меня в закладках.Спасибо!!!

  • Дмитрий

    Спасибо за комментарий:)
    Рад, что вам пригодилась эта статья.
    Буду и дальше стараться радовать вас и других читателей полезными статьями на блоге.

  • Vic

    Спасибо. хороший сайт.  полезная статья.

Оставить комментарий

отменить ответ