|
Параметры
|
Возможные значения:
|
Применимо
для
|
Описание
|
Примеры
|
|
Свойства
font
|
|
font-family
|
[1]
любой шрифт
|
всех элементов
|
это свойство определяет используемый элементом
шрифт. Если указать URL, то шрифт автоматически установится на компьютер
пользователя
|
font-family:Arial
Black URL('arialblack.ttf')
|
|
font-style
|
[1] normal - без изменений
[2] italic – курсив
|
всех элементов
|
стиль элемента. Курсивный или обычный
|
font-style:italic
|
|
font-variant
|
[1] normal - без изменений
[2] small-caps - заменяет все маленькие буквы на большие
|
всех элементов
|
варианты отображения шрифта. Нетскейп не
поддерживает это свойство
|
font-variant:small-caps
|
|
font-weight
|
[1] normal - без изменений
[2] bold - жирный
[3] bolder - очень жирный (в MSIE не отличается от bold, в Нетскейпе от нормал)
[4] lighter - тонкий (не отличается от normal)
[5] любое значение от 100 до 900
|
всех элементов
|
выделение (жирность) элемента
|
font-weight:bold
|
|
font-size
|
[1] размер (+)
[2] xx-small, x-small, small, medium, large, x-large, xx-large - любое из
этих значений
[3] smaller, larger - любое из этих значений
|
всех элементов
|
размер шрифта
|
font-size:30pt
|
|
font
|
[1] font-family
[2] font-style
[3] font-variant
[4] font-weight
[5] font-size
|
всех элементов
|
обобщает вышеперечисленные свойства
|
font: italic
bolder Arial 12pt
|
|
Свойства
Text
|
|
text-decoration
|
[1] none - нет
[2] underline - подчеркнутый
[3] overline - надчеркнутый (не поддерживается в Нетскейпе)
[4] line-through - перечеркнутый
[5] blink - мигающий (не поддерживается в IE)
|
всех элементов
|
"украшение" текста
|
text-decoration:line-through
|
|
letter-spacing
|
[1] длина (+)
[2] normal - без изменений
|
всех элементов
|
расстояние между буквами. Не работает в Нетскейпе
|
letter-spacing:100
|
|
vertical-align
|
[1] baseline
[2] sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] процент
|
inline элементов
|
позиционирование элементов по отношению к другим
элементам стоящих в одном ряду. Не работает в Нетскейпе
|
vertical-align:top-text
|
|
Параметры
|
Возможные
значения:
|
Применимо
для
|
Описание
|
Примеры
|
|
text-transform
|
1] none - нет
[2] Capitalize - каждое слово начинается с большой буквы
[3] UPPERCASE - каждая буква текста становится заглавной
[4] lowercase - каждая буква текста становится маленькой
|
inline элементов
|
изменение текста. Не работает в Нетскейпе
|
text-transform:Capitalize
|
|
text-align
|
[1] left - текст слева
[2] right - текст справа
[3] center - текст по центру
[3] justify - текст по ширине
|
block-level элементов
|
положение текста
|
text-align:right
|
|
text-indent
|
[1] длина (+)
[2] процент (+)
|
block-level элементов
|
отступ
|
text-indent:30 em
|
|
line-height
|
[1]
normal - без изменений
[2] длина (+)
[3] процент
|
всех элементов
|
междустрочный интервал
|
line-height:100%
|
|
Свойства
Color и Background
|
|
Color
|
[1] цвет (+)
|
всех элементов
|
цвет элемента
|
color:#f00000
|
|
background-color
|
[1]
цвет (+)
transparent
|
всех элементов
|
цвет фона элемента
|
background-color:#f00000
|
|
background-image
|
[1] none - нет
[2] URL (+)
|
всех элементов
|
фоновое изображение для элемента
|
background-image:URL(cool.gif)
|
|
background-repeat
|
[1] repeat - размножает фоновое изображение во всех
направлениях
[2] repeat-x - размножает фоновое изображение горизонтально
[3] repeat-y - размножает фоновое изображение вертикально
[4] no-repeat - не повторяющиеся изображение
|
всех элементов
|
повторения фонового изображения
|
background-repeat:no-repeat
|
|
background-attachment
|
[1]
scroll - фоновое изображение скроллится всесте с содержанием документа
[2] fixed - не скроллится. Фиксируется в одном месте. Не работает в Нетскейпе
|
всех элементов
|
возможность прокрутки фонового изображения
|
background-attachment:fixed
|
|
background-position
|
[1] процент от ширины +
процент от высоты (+)
[2] top, middle, bottom - одно из значений
[3] left, center, right - одно из начений
[4] расстояние от левого края + расстояние от вершины
|
block-level и replaced элементов
|
положение фонового изображения (работает с
background-repeat равным repeat-x, repeat-y или no-repeat)
|
background-position:50%0%
|
|
background
|
[1]
background-color
[2] background-image
[3] backgroun-position
[4] background-attachment
[5] background-repeat
|
всех элементов
|
обобщает вышеперечисленные свойства
|
background:no-repeat
black fixed 50%0%
|
|
Параметры
|
Возможные
значения:
|
Применимо
для
|
Описание
|
Примеры
|
|
Свойства
Box
|
|
margin-top
|
[1]
длина (+)
[2] процент (+)
[3] auto – автоматически
|
всех элементов
|
определяет отступ сверху
|
margin-top:100
|
|
margin-right
|
[1] длина (+)
[2] процент (+)
[3] auto – автоматически
|
всех элементов
|
определяет отступ справа
|
margin-right:100%
|
|
margin-bottom
|
[1] длина (+)
[2] процент (+)
[3] auto – автоматически
|
всех элементов
|
определяет отступ снизу
|
margin-bottom:100em
|
|
margin-left
|
[1] длина (+)
[2] процент (+)
[3] auto – автоматически
|
всех элементов
|
определяет отступ слева
|
margin-left:100pt
|
|
margin
|
[1] margin-top
[2] margin-right
[3] margin-left
[4] margin-bottom
|
всех элементов
|
обобщает все вышеперечисленные свойства
|
|
|
padding
|
[1] padding-top
[2] padding-right
[3] padding-left
[4] padding-bottom
|
[1] длина (+)
[2] процент (+)
|
всех элементов
|
отступ от верхнего border'а
отступ от правого border'а
отступ от левого border'а
отступ от нижнего border'а
|
padding-top:100pt
padding-right:100%
padding-left:100
padding-bottom:100em
|
|
border-width
|
[1]
border-top-width
[2] border-right-width
[3] border-left-width
[4] border-bottom-width
|
[1] длина (+)
[2] thin, medium или thick
|
всех элементов
|
толщина верхнего border'а
толщина правого border'а
толщина левого border'а
толщина нижнего border'а
|
border-top-width:100pt
border-right-width:thick
border-left-width:medium
border-bottom-width:100em
|
|
border-color
|
[1] цвет (+)
|
всех элементов
|
Цвет border'а. Не работает в Нетскейпе
|
border-color:green
|
|
border-style
|
[1] none
[2] dotted - пунктирняя линия кружочками,
dashed - пунктирняя линия прямоугольниками,
solid - сплошная со срезанными углами,
double - двойная линия,
groove - затемненная,
ridge –
двухцветная,
inset - двухцветная
с затемнением снаружи,
outset -
двухцветная с затемнениея снутри
|
всех элементов
|
стиль border'ов. Можно задать несколько значений
одновременно для разных border'ов. Если установлено одно значение - задается
единый стиль для всех сторон, если два - то задаются различные стили для
прилежащих сторон и т.д.
|
border-style: dotted groove
|
|
border
|
[1] border-width
[2] border-style
[3] border-color
|
всех элементов
|
обобщает вышеперечисленные свойства
|
border: thik black double
|
|
width
|
[1] длина (+)
[2] процент (+)
|
block-level и replaced элементов
|
ширина элемента
|
width:10%
|
|
height
|
[1] длина (+)
[2] процент (+)
|
block-level и replaced элементов
|
высота элемента
|
height:100pt
|
|
Параметры
|
Возможные
значения:
|
Применимо
для
|
Описание
|
Примеры
|
|
float
|
[1]
left – слева
[2] right - справа
[3] none – по умолчанию
|
всех элементов
|
расположение элемента
|
float:right
|
|
clear
|
[1] left – слева
[2] right - справа
[3] both - c двух сторон
[4] none - по умолчанию
|
всех элементов
|
расположение других элементов вокруг данного
|
clear:both
|
|
Классификация
|
|
display
|
[1] none - не отображается
[2] block - разбивает строку до и после элемента (т.е. элемент не может
находится на одной линии с другими элементами)
[3] inline - не разбивает строку
[4] list-item - разбивает линию строку до и после элемента + добавляет маркер
как у list-item элементов
|
всех элементов
|
определяет, как будет отображаться элемент
|
display:none
|
|
list-style-type
|
[1] disc, circle,
square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha
[2] none - никакой
|
элементов со значением display равным list-item
|
определяет вид list-item маркера. Если значение
list-style-image равно none или не уточнено
|
list-style-type:lower-alpha
|
|
list-style-image
|
[1] none - нет
[2] URL (+)
|
элементов со значением display равным list-item
|
задает вид list-item маркера в виде картинки
|
list-style-image:URL(cool.gif)
|
|
list-style-position
|
[1] inside - при переносе следующие строки будут
отображаться без отступа
[2] outside - по умолчанию
|
элементов со значением display равным list-item
|
определяет положение маркера в зависимости от list
item элемента
|
list-style-position:inside
|
|
list-style
|
[1]
list-style-type
[2] list-style-position
[3] list-style-image
|
элементов со значением display равным list-item
|
обобщает вышеперечисленные свойства
|
list-style:inside
|
