| Параметры |
Возможные значения: |
Применимо для |
Описание |
Примеры |
| Свойства 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 |
