|
Свойство |
Описание |
Значения |
|
background |
позволяет задать стиль фона, определив в одной строке сразу несколько атрибутов: цвет фона, фоновую картинку, её положение |
|
|
background-attachment |
Управляет способом прикрепления фонового изображения к окну браузера. По умолчанию, при прокрутке (скроллинге) содержимого веб-страницы фон перемещается вместе с текстом. Cвойство background-attachment позволяет зафиксировать фоновое изображение относительно окна браузера, сделать его неподвижным. |
scroll Фоновое изображение подвижно (прокручивается вместе с содержимым страницы). fixed Фиксирует фоновое изображение. inherit Заимствует значение свойства у родительского элемента. |
|
background-color |
Устанавливает цвет фона элемента. Цвет применяется ко всему фону содержимого элемента, и распространяется на его внутренние отступы (paddings). Внешние поля (margins) остаются прозрачными. |
цвет Можно напрямую указать цвет фона одним из стандартных способов. transparent Устанавливает прозрачный фон. inherit Заимствует значение свойства у родительского элемента. |
|
background-image |
устанавливает фоновое изображение для элемента |
url('...файл...') Ссылка на картинку - адрес (URL) изображения none Фоновое изображение не требуется. inherit Заимствует значение свойства у родительского элемента. |
|
background-position |
Устанавливает местоположение фоновой картинки. При этом свойству обычно присваивается пара значений - для определения горизонтального и вертикального положений. |
процент% процент% Первое значение определяет положение по горизонтали, второе - по вертикали. Например, 0% 0% - верхний левый угол. 100% 100% - правый нижний. процент% Горизонтальное положение картинки в процентах от 0% до 100%. Вертикальное значение будет равным 50% (=посередине). расстояние расстояние Указывает местоположение (по горизонтали и вертикали соответственно) с использованием принятых в CSS способов задания размеров. расстояние Горизонтальное положение картинки, указанное одним из принятых в CSS способов задания размеров. Вертикальное значение будет равным 50% (=посередине). left top Верхний левый угол - то же самое, что 0% 0% или top left. top Посередине, наверху. То же самое, что и 50% 0%, top center, center top. right top Верхний правый угол. То же самое, что и 100% 0%, top right. left Слева, посередине. То же самое, что и 0% 50%, left center, center left. center В центре. То же самое, что и 50% 50%, center center right Справа, посередине. То же, что и 100% 50%, right center, center right. left bottom Левый нижний угол. То же самое, что и 0% 100%, bottom left. bottom Посередине, внизу. То же, что и 50% 100%, center bottom, bottom center. right bottom Правый нижний угол. То же самое, что и 100% 100%, bottom right. inherit Заимствует значение свойства у родительского элемента. |
|
background-repeat |
управляет способом "размножения" - циклического повторения фонового изображения. |
repeat-x Размножает изображение только по вертикали. repeat-y Размножает изображение только по горизонтали. repeat Размножает изображение в обоих направлениях - и по горизонтали и по вертикали. no-repeat Не размножает изображение. inherit Заимствует значение свойства у родительского элемента. |
|
Свойство |
Описание |
Значения |
||||||||||
|
border |
сокращённое свойство, управляет внешним видом рамки (бордюра) вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину. |
Значения свойств border-width, border-style и border-color разделенные пробелом, могут располагаться в любом порядке. |
||||||||||
|
border-bottom |
Управляет внешним видом нижней стороны рамки вокруг элемента. Предлагает сокращенный вариант записи для свойств border-bottom-width, border-bottom-style и border-bottom-color - цвет, стиль и ширину можно определить в одной строке. |
Значения свойств border-bottom-width, border-bottom-style и border-bottom-color разделенные пробелом; могут располагаться в любом порядке. |
||||||||||
|
border-bottom-color |
Устанавливает цвет нижней стороны рамки вокруг элемента |
цвет Цвет указывается одним из стандартных способов. transparent Прозрачный цвет рамки. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-bottom-style |
Управляет стилем нижней стороны рамки вокруг элемента |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
border-bottom-width |
Управляет толщиной нижней стороны рамки вокруг элемента |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-color |
Устанавливает цвет рамки вокруг элемента, оказывая влияние на все четыре её стороны. |
transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя. Цвет Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл.
|
||||||||||
|
border-left |
Управляет внешним видом левой стороны рамки вокруг элемента. По сути, border-left предлагает сокращенный вариант записи для свойств border-left-width, border-left-style и border-left-color - цвет, стиль и ширину можно определить в одной строке. |
Значения свойств border-left-width, border-left-style и border-left-color разделенные пробелом; могут располагаться в любом порядке. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-left-color |
Устанавливает цвет рамки слева от элемента. |
цвет Цвет указывается одним из стандартных способов. transparent Прозрачный цвет рамки. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-left-style |
Управляет стилем рамки слева от элемента. |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
border-left-width |
Управляет толщиной рамки слева от элемента. |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-right |
Управляет внешним видом правой стороны рамки вокруг элемента. По сути, border-right предлагает сокращенный вариант записи для свойств border-right-width, border-right-style и border-right-color - цвет, стиль и ширину можно определить в одной строке. |
Значения свойств border-right-width, border-right-style и border-right-color разделенные пробелом; могут располагаться в любом порядке. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-right-color |
Устанавливает цвет рамки справа от элемента. |
цвет Цвет указывается одним из стандартных способов. transparent Прозрачный цвет рамки. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-right-style |
Управляет стилем рамки справа от элемента. |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
border-right-width |
Управляет толщиной рамки справа от элемента. |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-style |
Свойство border-style управляет стилем рамки вокруг элемента, оказывая влияние на все четыре её стороны. |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл.
|
||||||||||
|
border-top |
Управляет внешним видом верхней стороны рамки вокруг элемента. По сути, border-top предлагает сокращенный вариант записи для свойств border-top-width, border-top-style и border-top-color - цвет, стиль и ширину можно определить в одной строке. |
Значения свойств border-top-width, border-top-style и border-top-color разделенные пробелом; могут располагаться в любом порядке.
inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-top-color |
Устанавливает цвет верхней стороны рамки над элементом. |
цвет Цвет указывается одним из стандартных способов. transparent Прозрачный цвет рамки. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-top-style |
Управляет стилем верхней стороны рамки вокруг элемента. |
solid Обычная сплошная рамка. none Рамка отсутствует, её ширина равна нулю. hidden Результат тот же, что и при border-bottom-style: none - рамка не отображается. dotted Рамка в виде последовательности точек (мелкий пунктир). dashed Пунктирная рамка. double Двойная линия. groove "Вдавленная" рамка, с эффектом объёма. ridge "Выпуклая" рамка, с эффектом объёма. inset Вариант "вдавленной" рамки, с эффектом объёма. outset Вариант "выпуклой" рамки, с эффектом объёма. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
border-top-width |
Управляет толщиной верхней рамки над элементом. |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
border-width |
управляет толщиной рамки вокруг элемента, оказывая влияние на все четыре её стороны. |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - толщина не может иметь отрицательное значение. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и приведен в табл
thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
outline |
Свойство outline это быстрый способ задать следующие параметры: outline-width , outline-style и/или outline-color . В отличие от свойства border , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента. Можно задать как один параметр, так и два или три одновременно. |
Значения свойств outline-width, outline-style и outline-color.
inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
outline-color |
определяет цвет контура вокруг элемента. В отличие от свойства border-color , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента |
цвет Цвет контура задается одним из стандартных способов. invert Цвет контура задается браузером автоматически так, чтобы он был максимально контрастным относительно фона. inherit Заимствует значение свойства у родительского элемента. |
||||||||||
|
outline-style |
Свойство outline-style определяет вид контура вокруг элемента. В отличие от свойства border-style , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента |
none Значение по умолчанию. Контур не отображается. hidden Контур не отображается. dotted Контур отображается в виде точек.
dashed Контур отображается в виде коротких черточек.
solid Контур отображается в виде линии.
double Контур отображается в виде двух линий.
groove Контур отображается в виде вдавленной рамки.
ridge Данное значение отображает эффект, противоположный groove. Контур отображается в виде условно выступающей рамки.
inset Применение этого значение создает рамку с имитацией 3D эффекта, при котором осветляется нижний правый угол рамки. outset Применение этого значение создает рамку с имитацией 3D эффекта, при котором осветляется верхний левый угол рамки. inherit Заимствует значение свойства у родительского элемента.
|
||||||||||
|
outline-width |
Свойство outline-width определяет ширину контура вокруг элемента. В отличие от свойства border-width , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента |
ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. thin Тонкая рамка (обычно 2 пиксела). medium Рамка средней ширины (обычно 4 пиксела). thick Толстая рамка (обычно 6 пикселов). inherit Заимствует значение свойства у родительского элемента.
|
|
Свойство |
Описание |
Значения |
|
height |
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Высота не включает толщину границ вокруг элемента, значение отступов и полей. |
значение | проценты | auto | inherit |
|
max-height |
Устанавливает максимальную высоту элемента. |
значение | проценты | inherit |
|
max-width |
Устанавливает максимальную ширину элемента. |
значение | проценты | inherit |
|
min-height |
Задает минимальную высоту элемента. |
значение | проценты | inherit |
|
min-width |
Устанавливает минимальную ширину элемента. |
значение | проценты | inherit |
|
width |
Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей. |
значение | проценты | auto | inherit |
|
Свойство |
Описание |
Значения |
|
font |
универсальное сокращённое свойство, позволяет буквально "в одной строке" одновременно задать несколько свойств шрифта: font-style ; font-variant ; font-weight ; font-size (обязательное) ; line-height ; font-family (обязательное) |
|
|
font-family |
Позволяет выбрать шрифт для отображения текста. |
|
|
font-size |
Позволяет задать размер шрифта. |
относительный размер; larger или smaller; именованный размер - один из возможных размеров: xx-small, x-small, small, medium, large, x-large или xx-large; точный размер |
|
font-style |
Управляет наклоном шрифта |
normal - Обычный прямой шрифт, без наклона. italic - Курсивный шрифт - наклонный шрифт, имитирующий рукописный. oblique - Наклонный шрифт. В большинстве браузеров отображается курсивом. inherit - Заимствует значение свойства у родительского элемента. |
|
font-variant |
Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью. |
normal Оставляет регистр символов исходным, заданным по умолчанию. small-caps Модифицирует все строчные символы как заглавные уменьшенного размера, как показано на рис. 1. inherit Наследует значение родителя |
|
font-weight |
Устанавливает насыщенность шрифта |
bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Generated Content Properties
|
Свойство |
Описание |
Значения |
|
content |
Used with the :before and :after pseudo-elements, to insert generated content |
|
|
counter-increment |
Increments one or more counters |
|
|
counter-reset |
Creates or resets one or more counters |
|
|
quotes |
Sets the type of quotation marks for embedded quotations |
|
|
Свойство |
Описание |
Значения |
|
list-style |
Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для подробного ознакомления смотрите информацию о каждом свойстве list-style-type, list-style-position и list-style-image отдельно |
|
|
list-style-image |
Устанавливает адрес изображения, которое служит в качестве маркера списка |
none Отменяет изображение в качестве маркера для родительского элемента. url Относительный или абсолютный путь к графическому файлу. inherit Наследует значение родителя. |
|
list-style-position |
Определяет, как будет размещаться маркер относительно текста. |
outside — маркер вынесен за границу элемента списка и inside — маркер обтекается текстом |
|
list-style-type |
Изменяет вид маркера для каждого элемента списка. Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка и нумерованного . |
Маркированный список circle Маркер в виде кружка. disc Маркер в виде точки. square Маркер в виде квадрата. Нумерованный список armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4,...). decimal-leading-zero Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d,...). lower-greek Строчные греческие буквы lower-latin Это значение аналогично lower-alpha. lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v,...). upper-alpha Заглавные латинские буквы (A, B, C, D,...). upper-latin Это значение аналогично upper-alpha. upper-roman Римские числа в верхнем регистре (I, II, III, IV, V,...). none Отменяет маркеры для списка. inherit Наследует значение родителя. |
|
Свойство |
Описание |
Значения |
|
margin |
Свойство margin сокращённое свойство, позволяющее быстро задать следующие параметры: margin-top, margin-right, margin-bottom и/или margin-left. Margin - это пространство между внешней стороной рамки элемента на расстояние, заданное для этого свойства |
Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя. |
|
margin-bottom |
Устанавливает величину отступа от внешней стороны нижней рамки элемента. |
Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя. |
|
margin-left |
Устанавливает величину отступа от внешней стороны левой рамки элемента. |
Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя. |
|
margin-right |
Устанавливает величину отступа от внешней стороны правой рамки элемента. |
Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя. |
|
margin-top |
Устанавливает величину отступа от внешней стороны верхней рамки элемента. |
Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя. |