Файл: Свойства CSS.doc

Свойство

Описание

Значения

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