Свойства CSS
Свойства Font
Свойства Text
Свойства Color и Background
Часть Il. Cвойства CSS
Свойства 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
<UL
· 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%
Законьчена 2 Часть и я Перехожу
к 3й.
Перейти к 3й части
