• Свойства Font
• Свойства Text
• Свойства Color и Background
• Свойства Box
• Классификация

• 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

• word-spacing

Возможные значения:
[1] длина (+)
[2] normal - без изменений

Применимо для:
всех элементов

Описание:
расстояние между cловами. Не работает ни в Нетскейпе, ни в MSIE

Пример:
word-spacing:0.4em

• 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

Возможные значения:
[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%

• 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] paddung-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

• border-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

Возможные значения:
[1] none - не отображается
[2] block - разбивает строку до и после элемента (т.е. элемент не может находится на одной линии с другими элементами)
[3] inline - не разбивает строку
[4] list-item - разбивает линию строку до и после элемента + добавляет маркер как у list-item элементов

Применимо для:
всех элементов

Описание:
определяет, как будет отображаться элемент

Пример:
display:none

• white-space

Возможные значения:
[1] normal - "сжимает" несколько подряд идущих пробелов в один
[2] br - допускает отображение несколькольких подряд идущих пробелов
[3] nowrap - не допускает перенос строки без тега <BR>

Применимо для:
block-level элементов

Описание:
оприделяет, как будут отображаться пробелы между элементами

Пример:
white-space:nowrap

• 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

Назад << К оглавлению >> Вперед