Свойства Color и Background Color

Cвойства CSS

Свойства Font

Font-family

Возможные значения:

[1] любой шрифт [, дополнительный шрифт] …

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

Описание: это свойство определяет используемый элементом шрифт. Если шрифт не найден используется следующий и т.д. Вместо шрифта может быть указано семейство шрифтов (serif, sans-serif, cursive, fantasy, monospace).

ПРИМЕР:

font-family: 'Arial Black’, fantasy

 

Font-style

Возможные значения:

[1] normal - без изменений

[2] italic – курсив

[3] oblique – наклонный

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

Описание: стиль элемента (курсивный или обычный)

ПРИМЕР:

font-style:italic

 

Font-variant

Возможные значения:

[1] normal - без изменений

[2] small-caps - заменяет все маленькие буквы на большие, но меньшего размера

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

Описание: варианты отображения шрифта. Нетскейп не поддерживает это свойство

ПРИМЕР:

font-variant:small-caps

 

Font-weight

Возможные значения:

[1] normal - без изменений

[2] bold - жирный

[3] bolder - очень жирный

[4] lighter - тонкий (не отличается от normal)

[5] любое из значений 100, 200, 300, 400, 500, 600, 700, 800, 900

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

Описание: выделение (жирность) элемента

ПРИМЕР:

font-weight:bold

 

 

Font-stretch

Возможные значения:

[1] normal

[2] wider

[3] narrower

[4] ultra-condensed

[5] extra-condensed

[6] condensed

[7] semi-condensed

[8] semi-expanded

[9] expanded

[10] extra-expanded

[11] ultra-expanded

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

Описание: растяжимость (сжимаемость) шрифта

Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого до самого широкого:

- ultra-condensed

- extra-condensed

- condensed

- semi-condensed

- normal

- semi-expanded

- expanded

- extra-expanded

- ultra-expanded

Относительное ключевое слово 'wider' устанавливает значение в следующее более "широкое" по сравнению с наследуемым значение (не выше 'ultra-expanded'); относительное ключевое слово 'narrower' устанавливает значение в следующее более "сжатое" значение ниже наследуемого значения (не ниже 'ultra-condensed').

ПРИМЕР:

font-stretch: condensed

Font-size

Возможные значения:

[1] размер (абсолютный или в %) (+)

[2] xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений

[3] smaller, larger - любое из этих значений (относительные размеры шрифта)

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

Описание: размер шрифта

ПРИМЕР:

font-size:30pt

font-size:150%

 

Font

Возможные значения:

[1] font-style

[2] font-variant

[3] font-weight

[4] font-size [ / line-height ]

[5] font-family

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

Описание: обобщает вышеперечисленные свойства

ПРИМЕР:

font: italic bolder 12pt/110% Arial, serif

 

Свойства Text

Text-indent

Возможные значения:

[1] длина (+)

[2] процент от ширины блока(+)

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

Описание: отступ первой строки внутри блока

ПРИМЕР:

text-indent:30 em

 

Text-align

Возможные значения:

[1] left - текст слева

[2] right - текст справа

[3] center - текст по центру

[4] justify - текст "растянут"

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

Описание: положение текста (выравнивание)

ПРИМЕР:

text-align:right

 

Text-decoration

Возможные значения:

[1] none - нет

[2] underline - подчеркнутый

[3] overline – надчеркнутый

[4] line-through - перечеркнутый

[5] blink - мигающий

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

Описание: декоративное оформление текста

ПРИМЕР:

text-decoration:line-through

 

Text-shadow

Возможные значения:

[1] none - нет

[2] color length1 length2 length3

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

Описание: тень текста

color – цвет тени

length1 – длина тени по горизонтали справа от текста

length2 – длина тени по вертикали ниже текста

length3 – радиус рассеяния тени (необязательный)

ПРИМЕР:

text-shadow: red 3px 3px 1px

Letter-spacing

Возможные значения:

[1] длина (+)

[2] normal - без изменений

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

Описание: расстояние между буквами

ПРИМЕР:

letter-spacing:100

 

Word-spacing

Возможные значения:

[1] длина (+)

[2] normal - без изменений

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

Описание: расстояние между словами

ПРИМЕР:

word-spacing:0.4em

 

Text-transform

Возможные значения:

[1] none - нет

[2] Capitalize - каждое слово начинается с большой буквы

[3] UPPERCASE - каждая буква текста становится заглавной

[4] lowercase - каждая буква текста становится маленькой

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

Описание: изменение текста

ПРИМЕР:

text-transform:Capitalize

 

White-space

Возможные значения:

[1] normal - несколько пробелов заменяется одним, символ новой строки интерпретируется как пробел

[2] pre - переводы строк и пробелы сохраняются

[3] nowrap - переводы строк и дополнительные пробелы удаляются, а длинные строки могут выходить за пределы отведенного им блока

[4] pre-wrap – действует как pre, но производит дополнительный перенос при достижении границы блока

[5] pre-line – действует как normal, но сохраняет переносы строк

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

Описание: управление пробелами

ПРИМЕР:

white-space: pre

 

Vertical-align

Возможные значения:

[1] baseline - выравнивает базовую линию элемента по базовой линии родителя

[2] sub - отображается как нижний индекс

[3] super - отображается как верхний индекс

[4] text-top - верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки

[5] top - верхняя граница элемента выравнивается по верхней границе родителя

[6] middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента

[7] bottom - выравнивает нижнюю границу элемента по нижней границе родителя

[8] text-bottom - нижняя граница элемента выравнивается по самому нижнему краю текущей строки

[9] процент - смещение относительно базовой линии родителя в процентах или абсолютное

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

Описание: позиционирование элементов по отношению к другим элементам стоящих в одном ряду (вертикальное выравнивание)

ПРИМЕР:

vertical-align: text-top

 

Line-height

Возможные значения:

[1] normal - без изменений

[2] длина (+)

[3] процент

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

Описание: междустрочный интервал

ПРИМЕР:

line-height:150%

 

Свойства Color и Background Color

Color

Возможные значения:

[1] цвет (+)

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

Описание: цвет текста

ПРИМЕР:

color:#f00000

color: rgb(255,255,0)

color:red

 

Background-color

Возможные значения:

[1] цвет (+)

[2] transparent - прозрачный фон

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

Описание: цвет фона элемента

ПРИМЕР:

background-color:grey

 

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