Свойства 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

    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 и 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] 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] pre - допускает отображение несколькольких подряд идущих пробелов
        [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