Свойства каскадных таблиц стилей (CSS)
06.09.2018
Эту статью я хочу посвятить только свойствам каскадных таблиц стилей (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. Ну а пока вы можете подписаться на рассылку на странице « Подписка » чтобы не пропустить последних обновлений блога.
#2-4 CSS свойства для оформления текста
На этом все. Удачи вам и до скорых встреч на страницах блога.
Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter
Основы каскадных таблиц стилей (CSS). Часть 3