Свойства CSS
Раздел «Цвет и фон»
background
Свойством background может быть заданы атрибуты стиля фона в любом порядке: background-attachment, background-color, background-image, background-position и background-repeat.
background-attachment
Данным параметром задается поведение фоновой картики при прокручивании контента: картинка двигается вместе с контентом страницы или нет. В последнем случае картинка как бы "прилипает" к странице и не перемещается при прокрут с контентом.
background-color
Определяет цвет фона элемента.
background-image
Задается фоновая картинка элемента. При задан цвет фона и картинка фона, то сначала будет фон закрашен, а после загрузки картинки появится картинка выше фона.
background-position
Этим атрибутом определяется выравнивание фонового изображения, заданного в background-image.
background-repeat
Задает повторение фоновой картинки, заданного параметром background-image. повтор картинки может быть задан по горизонтали, по вертикали или в обе стороны.
color
Задает цвет текста элемента.
Раздел «Границы»
border
Этим свойством определяется пять основных параметров свойства: толщина, цвет и стиль рамки вокруг элемента
border-bottom
Свойство задает одновременно толщину, стиль и цвет границы внизу элемента. Значения могут быть заданны в любом порядке, разделяя пробелом.
border-bottom-color
Служит для определения цвета нижней стороны элемента.
border-bottom-style
Задает стиль нижней границы элемента.
border-bottom-width
Установка толщины нижней границы элемента.
border-color
Служит для определения цвета границы всех четырех сторон элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.
border-left
Свойство задает одновременно толщину, стиль и цвет левой границы элемента. Значения могут быть заданны в любом порядке, разделяя пробелом.
border-left-color
Служит для определения цвета левой стороны элемента.
border-left-style
Задает стиль границы слева от элемента.
border-left-width
Установка толщины левой границы элемента.
border-right
Свойство задает одновременно толщину, стиль и цвет правой границы элемента. Значения могут быть заданны в любом порядке, разделяя пробелом.
border-right-color
Служит для определения цвета правой стороны элемента. Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB.
border-right-style
Задает стиль границы справа от элемента.
border-right-width
Установка толщины правой границы элемента
border-style
Задает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
border-top-color
Служит для определения цвета верхей стороны элемента.
border-top-style
Задает стиль границы сверху элемента.
border-top-width
Установка толщины верхней границы элемента.
border-width
Установка толщины границы всех четырых сторон элемента или индивидуальные настройки для каждой стороны.
border-top
Одновременно задает толщину, стиль и цвет границы сверху элемента.
Раздел «Шрифт»
font
Параметр позволяет задать одновременно несколько атрибутов стиля шрифта.
font-family
Задание семейства шрифта для оформления текста. Можно задать список шрифтов, разделенных запятов.
font-size
Задает размер шрифта элемента, который может быть задан несколькими способами.
font-style
Задает начертание шрифта - обычное, курсивное или наклонное.
font-variant
Определение предствления строчных букв - установить ли все буквы прописными с уменьшенным размеров или использовать нормальное написание букв.
font-weight
Устанавливает насыщенность шрифта. Значение может быть от 100 до 900 с шагом 100. Также допускается использование ключевых слов.
Раздел «Форматирование текста»
letter-spacing
Задает межсимвольный интервал.
line-height
Задает межстрочный интервал текста. По умолчанию междустрочное расстояние задается браузером автоматически. Ширина междустрочного расстояния зависит от семейства шрифта и его размера
text-align
Задает горизонтальное выравнивание текста.
text-decoration
Задается оформление текста: подчеркивание, перечеркивание, линии сверху текста и для некоторых браузеров мигание. Сразу можно использовать один или несколько стилей разделяя пробелом
text-indent
Задает параграф, то есть определяет величину отступа для первой строки текста.
text-transform
Задается преобразование текста в заглавные или прописные буквы или же оставить регистр без изменений.
vertical-align
Задает выравнивание элемента по вертикали относительно своего родителя или окружающего текста.
white-space
Данное свойство задает обработку пробелов между словами при достижении границ содержимого элемента.
word-spacing
Устанавливает интервал между словами. Если задан параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет задан принудительно.
Раздел «Списки»
list-style
Данное свойство задает маркер: тип маркета, положение маркера, картинку маркера.
list-style-image
Служит для задания адреса изображения маркера списка.
list-style-position
Задается размещение маркера от текста. Значения: outside - маркер за границей элемента списка и inside - маркер обтекается текстом.
list-style-type
Задает вид маркера для элементов списка. Данный атрибут применяется исключительно в том случает, когда значение свойства list-style-image задано как none. Маркеры бывают: для маркированного списка (тег UL) и нумерованного (тег OL).
Раздел «Форматирование»
clear
Данное свойсто задает запрещает обтекание другими элементами. Если же обтекание элемента задано свойством float, то свойство clear отменяет его действие для заданных сторон.
clip
Данное свойство задает область видимости элемента, остальные области элемента будут усечены. Все, что не помещается в данную область, будет обрезано и становится невидимым.
display
Данное свойство задает варианты показа элемента.
float
Задает выравнивание элемента, а соседние элементы будут обтекать его с других сторон.
height
Служит для установки высоты блочных или заменяемых элементов. В высоту не включается толщина границ вокруг элемента, значение отступов и полей.
overflow
Данное свойство задает тип вывода содержимого блочного элемента при превышении области заданных размеров.
visibility
Данное свойство служит для соскрытия или показа элемента. Скрывая элемент, он становится не видимым, но занимаемое место. Тоже самое свойство у элемента display:none, только последний скрывает совсем элемент и не занимает место
width
Задает ширина блочных или заменяемых элементов. В ширину не включается толщина границ вокруг элемента, отступы и поля.
max-width
Устанавливает максимальную ширину элемента.
min-width
Задает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.
Раздел «Позиционирование»
bottom
Задает положение нижней границы содержимого элемента без учета толщины рамок и отступов. Координаты отсчитываются от параметра position, он, как правило, принимает значение relative (относительное положение) или absolute (абсолютное положение).
left
Задается расстояние от левой границы родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position. Данное свойство применяется только к позиционным элементам.
position
Задается тип позиционирования элемента: относительно окна браузера или других элементов.
right
Задается расстояние от правой границы родительского элемента, не включая отступ, поле и ширину рамки, до правой границы дочернего элемента. Данное свойство применяется только к позиционным элементам
top
Задается расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхней границы дочернего элемента. Данное свойство применяется только к позиционным элементам.
z-index
Определяет размещение элементов по z-оси, которое позволяет накладывать элементы друг на друга.
Раздел «Отступы»
margin
Задается величина отступа от всех четырех границ элемента. Отступом - это пространство от границы данного элемента до внутренней границы его родительского элемента.
margin-bottom
Задается величина отступа от нижнего края элемента.
margin-left
Задается величина отступа от левой границы элемента.
margin-right
Задает величину отступа от правой границы элемента.
margin-top
Задается величина отступа от верхней границы элемента.
Раздел «Поля»
padding-bottom
Задает значение поля от нижнего края содержимого элемента.
padding
Задает величину отступа внутри данного элемента.
padding-left
Задает значение поля от левой границы содержимого элемента.
padding-right
Задает значение поля от правого края содержимого элемента.
padding-top
Задает величину поля от верхней границы содержимого элемента.
Раздел «Таблицы»
border-collapse
Задает группировку границ в ячейках таблицы. Данный параметр имеет место, если для ячеек задана рамка, то в месте стыка ячеек линия становится двойной. Зданичие collapse дает команду браузеру смотреть на такие места и убирать двойники.
table-layout
Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
border-spacing
Определяется расстояние в таблице между границами ячеек. Свойство border-spacing не функционирует если для таблицы задан установлено border-collapse:collapse.
caption-side
Задает положение заголовка таблицы, который устанавливается используя тег CAPTION, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align.
Раздел «Интерфейс»
cursor
Задается тип курсора мышки при нахождении курсора на элементе. Картинка курсор может быть разной в зависимости от используемой операционной системы и установленных параметров в операционной системе.
Раздел «Важность»
!important
Задает больший приоритет у стиля, чем выставленный другими значениями задаваемого свойства.
Раздел «Псевдоэлементы»
after
Данный псевдоэлемент служит для вывода желаемого контента после элемента, к которому он добавляется. Псевдоэлемент after работает совместно с атрибутом content.
before
Данный псевдоэлемент before используется для отображения желаемого контента до элемента, к которому он добавляется. before работает совместно с атрибутом content.