CSS и ISS стиль
элемента
ПРИМЕР: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
word-spacing
Возможные значения:
[1] длина (+)
[2] normal - без изменений
*Применимо для: всех элементов
Описание: расстояние между cловами. Не работает ни в Нетскейпе, ни в MSIE
ПРИМЕР:word-spacing:0.4em
<ultext-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
backgroung-color
Возможные значения:
[1] цвет (+)
*Применимо для: всех элементов
Описание: цвет фона элемента
ПРИМЕР: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
*Применимо для: всех элементов
Описание: обобщает все вышеперечисленные свойства
ПРИМЕР:background:100pt
padding-top
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: осех элементов
Описание: отступ от верхнего border'а
ПРИМЕР:padding-top:100pt
padding-right
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: всех элементов
Описание: отступ от правого border'а
ПРИМЕР:padding-right:100%
padding-bottom
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: всех элементов
Описание: отступ от нижнего border'а
ПРИМЕР:padding-bottom:100em
padding-left
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: всех элементов
Описание: отступ от левого border'а
ПРИМЕР:padding-top:100
padding
Возможные значения:
[1] padding-top
[2] padding-right
[3] padding-left
[4] padding-bottom
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение - задается единый отступ для всех сторон, если два - то задаются различные отступы для прилежащих сторон, а если четыре - то задаются индивидуальные отступы для всех сторон.
ПРИМЕР:padding:100px
border-top-width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина верхнего border'а
ПРИМЕР:border-top-width:100pt
border-right-width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина правого border'а
ПРИМЕР:border-right-width:thick
border-bottom-width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина нижнего border'а
ПРИМЕР:border-bottom-width:100em
border-left-width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина левого border'а
ПРИМЕР:border-left-width:medium
border-width
Возможные значения:
[1] border-top-width
[2] border-right-width
[3] border-left-width
[4] border-bottom-width
*Применимо для: всех элементов
Описание: толщина border'ов. Можно задать несколько значений одновременно (до четырех) для разных border'ов. Если установлено одно значение - задается единая толщина для всех сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре - то задаются индивидуальная толщина для всех сторон
ПРИМЕР:border-width: 15pt
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
<ulborder-top
Возможные значения:
[1] border-top-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для верхнего border'а
ПРИМЕР:border-top: 100em red groove
border-right
Возможные значения:
[1] border-right-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для правого border'а
ПРИМЕР:border-right: 5pt magenta solid
border-left
Возможные значения:
[1] border-left-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для левого border'а
ПРИМЕР:border-left: 15pc coral inset
border-bottom
Возможные значения:
[1] border-bottom-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для нижнего border'а
ПРИМЕР:border-bottom: 30 orange outset
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
Возможные
ПРИМЕР: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
word-spacing
Возможные значения:
[1] длина (+)
[2] normal - без изменений
*Применимо для: всех элементов
Описание: расстояние между cловами. Не работает ни в Нетскейпе, ни в MSIE
ПРИМЕР:word-spacing:0.4em
<ultext-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
backgroung-color
Возможные значения:
[1] цвет (+)
*Применимо для: всех элементов
Описание: цвет фона элемента
ПРИМЕР: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
*Применимо для: всех элементов
Описание: обобщает все вышеперечисленные свойства
ПРИМЕР:background:100pt
padding-top
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: осех элементов
Описание: отступ от верхнего border'а
ПРИМЕР:padding-top:100pt
padding-right
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: всех элементов
Описание: отступ от правого border'а
ПРИМЕР:padding-right:100%
padding-bottom
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: всех элементов
Описание: отступ от нижнего border'а
ПРИМЕР:padding-bottom:100em
padding-left
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: всех элементов
Описание: отступ от левого border'а
ПРИМЕР:padding-top:100
padding
Возможные значения:
[1] padding-top
[2] padding-right
[3] padding-left
[4] padding-bottom
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение - задается единый отступ для всех сторон, если два - то задаются различные отступы для прилежащих сторон, а если четыре - то задаются индивидуальные отступы для всех сторон.
ПРИМЕР:padding:100px
border-top-width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина верхнего border'а
ПРИМЕР:border-top-width:100pt
border-right-width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина правого border'а
ПРИМЕР:border-right-width:thick
border-bottom-width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина нижнего border'а
ПРИМЕР:border-bottom-width:100em
border-left-width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина левого border'а
ПРИМЕР:border-left-width:medium
border-width
Возможные значения:
[1] border-top-width
[2] border-right-width
[3] border-left-width
[4] border-bottom-width
*Применимо для: всех элементов
Описание: толщина border'ов. Можно задать несколько значений одновременно (до четырех) для разных border'ов. Если установлено одно значение - задается единая толщина для всех сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре - то задаются индивидуальная толщина для всех сторон
ПРИМЕР:border-width: 15pt
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
<ulborder-top
Возможные значения:
[1] border-top-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для верхнего border'а
ПРИМЕР:border-top: 100em red groove
border-right
Возможные значения:
[1] border-right-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для правого border'а
ПРИМЕР:border-right: 5pt magenta solid
border-left
Возможные значения:
[1] border-left-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для левого border'а
ПРИМЕР:border-left: 15pc coral inset
border-bottom
Возможные значения:
[1] border-bottom-width
[2] border-style
[3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для нижнего border'а
ПРИМЕР:border-bottom: 30 orange outset
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
Возможные
