И снова основы CSS. Chapter II >> Css Properties. Библиотека I2R. рассматриваются различные свойства - для font, text, color and background etc.

Предыдущий материал - Chapter I

[1] Font Properties

• font-family Possible Values: Любой шрифт
*Applies to: All elements
Описание: Это свойство определяет используемый элементом шрифт. Если указать УРЛ, то шрифт автоматически установится на компьютер пользователя
EXAMPLE: font-family:Arial Black URL('arialblack.ttf') • font-style Possible Values:
[1] normal - без изменений
[2] italic - курсив
*Applies to: All elements
Описание: Стиль элемента. Курсивный или обычный
EXAMPLE: font-style:italic • font-variant Possible Values:
[1] normal - без изменений
[2] small-caps - заменяет все буквы на большие
*Applies to: All elements
Описание: Netscape вообще не поддерживает это свойство.
EXAMPLE: font-variant:small-caps • font-weight Possible Values:
[1] normal - без изменений
[2] bold - жирный
[3] bolder - очень жирный ( в MSIE не отличается от bold, в Нетскейпе от нормал )
[4] lighter - тонкий ( не отличается от normal )
[5] любое значение от 100 до 900
*Applies to: All elements
Описание: Выделение ( жирность ) элемента
EXAMPLE: font-weight:bold • font-size Possible Values:
[1] размер (+)
[2] xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений
[3] smaller, larger - любое из этих значений
*Applies to: All elements
Описание: Размер шрифта
EXAMPLE: font-size:30pt • font Possible Values:
*Applies to: All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE: font: italic bolder Arial 12pt

[2] Text Properties

• word-spacing Possible Values:
[1] длина (+)
[2] normal - без изменений
*Applies to: All elements
Описание: Расстояние между cловами. Не работает ни в Нетскейпе, ни в MSIE
EXAMPLE: word-spacing:0.4em • text-decoration Possible Values:
[1] none - нет
[2] underline - подчеркнутый
[3] overline - надчеркнутый ( не поддерживается в Нетскейпе )
[4] line-through - перечеркнутый
[5] blink - мигающий ( не поддерживается в IE )
*Applies to: All elements
Описание: "Украшение" текста
EXAMPLE: text-decoration:line-through • letter-spacing Possible Values:
[1] длина (+)
[2] normal - без изменений
*Applies to: All elements
Описание: Расстояние между буквами. Не работает в Нетскейпе
EXAMPLE: letter-spacing:100 • vertical-align Possible Values:
[1] baseline
[2] sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] процент
*Applies to: Inline elements
Описание: Позиционирование элементов по отношению к другим элементам стоящих в одном ряду. Не работает в Нетскейпе
EXAMPLE: vertical-align:top-text • text-transform Possible Values:
[1] none - нет
[2] Capitalize - каждое слово начинается с большой буквы
[3] UPPERCASE - каждая буква текста становится заглавной
[4] lowercase - каждая буква текста становится маленькой
*Applies to: Inline elements
Описание: Изменение текста. Не работает в Нетскейпе
EXAMPLE: text-transform:Capitalize • text-align Possible Values:
[1] left - текст слева
[2] right - текст справа
[3] center - текст по центру
[3] justify - текст "растянут"
*Applies to: Block-level elements
Описание: Положение текста
EXAMPLE: text-align:right • text-indent Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to: Block-level elements
Описание: Отступ
EXAMPLE: text-indent:30 em • line-height Possible Values:
[1] normal - без изменений
[2] длина (+)
[3] процент
*Applies to: All elements
Описание: Отступ сверху
EXAMPLE: line-height:100%

[3] Color and Background Properties

• color Possible Values:
[1] цвет (+)
*Applies to: All elements
Описание: Цвет
EXAMPLE: color:#f00000 • backgroung-color Possible Values:
[1] цвет (+)
*Applies to: All elements
Описание: Цвет фона элемента
EXAMPLE: background-color:#f00000 • background-image Possible Values:
[1] none - нет
[2] URL (+)
*Applies to: All elements
Описание: Фоновое изображение
EXAMPLE: background-image:URL(cool.gif) • background-repeat Possible Values:
[1] repeat - размножает фоновое изображение во всех направлениях
[2] repeat-x - размножает фоновое изображение горизонтально
[3] repeat-y - размножает фоновое изображение вертикально
[4] no-repeat - не повторяющиеся изображение
*Applies to: All elements
Описание: Повторения фонового изображения
EXAMPLE: background-repeat:no-repeat • background-attachment Possible Values:
[1] scroll - фоновое изображение скроллится всесте с содержанием документа
[2] fixed - не скроллится. Фиксируется в одном месте
*Applies to: All elements
Описание: Возможность прокрутки фонового изображения
EXAMPLE: background-attachment:fixed • background-position Possible Values:
[1] процент от длинны + процент от высоты (+)
[2] top, middle, bottom - одно из значений
[3] left, center, right - одно из начений
[4] расстояние от левого края + расстояние от вершины
*Applies to: Block-level and replaced elements
Описание: Положение фонового изображения ( работает с background-repeat равным repeat-x или repeat-y)
EXAMPLE: background-position:50% 0% • background Possible Values:
*Applies to: All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE: background:no-repeat black fixed 50% 0%

[4] Classification

• display Possible Values:
[1] none - не отображается
[2] block - разбивает линию ( = строку ) до и после элемента.
[3] inline - не разбивает линию ( = строку ). Т.е. элемент можен находится на одной линии с другими элементами.
[4] list-item - разбивает линию ( = строку ) до и после элемента + добавляет маркер как у list-item элементов
*Applies to: All elements
Описание: Определяет как будет отображаться элемент.
EXAMPLE: display:none • white-space Possible Values:
[1] normal - "сжимает" несколько подряд идущих пробелов в один
[2] pre - допускает отображение несколькольких подряд идущих пробелов
[3] nowrap - не допускает перенос строки без тага

*Applies to: Block-level elements
Описание: Оприделяет как будут отображаться пробелы между элементами
EXAMPLE: white-space:nowrap • list-style-type Possible Values:
[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha
[2] none - никакой
*Applies to: Elements with display value list-item
Описание: Определяет вид list-item маркера. Если значение list-style-image равно none или не уточнено
EXAMPLE: list-style-type:lower-alpha • list-style-image Possible Values:
[1] none - нет
[2] URL (+)
*Applies to: Elements with display value list-item
Описание: Задает вид list-item маркера в виде картинки
EXAMPLE: list-style-image:URL(cool.gif) • list-style-position Possible Values:
[1] inside - при переносе следующие строки будут отображаться без отступа
[2] outside - по умолчанию
*Applies to: Elements with display value list-item
Описание: Определяет положение маркера в зависимости от list item элемента
EXAMPLE: list-style-position:inside

[5] Box Properties

• margin-top Possible Values:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Applies to: All elements
Описание: Определяет отступ сверху
EXAMPLE: margin-top:100 • margin-right Possible Values:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Applies to: All elements
Описание: Определяет отступ справа
EXAMPLE: margin-right:100% • margin-bottom Possible Values:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Applies to: All elements
Описание: Определяет отступ снизу
EXAMPLE: margin-bottom:100em • margin-left Possible Values:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Applies to: All elements
Описание: Определяет отступ слева
EXAMPLE: margin-left:100pt • margin Possible Values:
*Applies to: All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE: background:100pt • padding-top Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to: All elements
Описание: Отступ от верхнего border'а
EXAMPLE: padding-top:100pt • padding-right Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to: All elements
Описание: Отступ от правого border'а
EXAMPLE: padding-right:100% • padding-bottom Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to: All elements
Описание: Отступ от нижнего border'а
EXAMPLE: padding-bottom:100em • padding-left Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to: All elements
Описание: Отступ от левого border'а
EXAMPLE: padding-top:100 • padding Possible Values: ^
*Applies to: All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE: padding:100px • border-top-width Possible Values:
[1] длина (+)
[2] thin, medium или thick
*Applies to: All elements
Описание: толщина верхнего border'а
EXAMPLE: border-top-width:100pt • border-right-width Possible Values:
[1] длина (+)
[2] thin, medium или thick
*Applies to: All elements
Описание: толщина правого border'а
EXAMPLE: border-right-width:thick • border-bottom-width Possible Values:
[1] длина (+)
[2] thin, medium или thick
*Applies to: All elements
Описание: толщина нижнего border'а
EXAMPLE: border-bottom-width:100em • border-left-width Possible Values:
[1] длина (+)
[2] thin, medium или thick
*Applies to: All elements
Описание: толщина левого border'а
EXAMPLE: border-left-width:medium • border-color Possible Values: color
Описание: Цвет border'а (+)
*Applies to: All elements
EXAMPLE: border-color:green • width Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to: Block-level and replased elements
Описание: ширина элемента
EXAMPLE: width:10% • height Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to: Block-level and replaced elements
Описание: высота элемента
EXAMPLE: height:100pt • float Possible Values:
[1] left - слева
[2] right - справа
[3] none - по умолчанию
*Applies to: All elements
Описание: расположение элемента
EXAMPLE: float:right • clear Possible Values:
[1] left - слева
[2] right - справа
[3] both - c двух сторон
[4] none - по умолчанию
*Applies to: All elements
Описание: расположение других элементов вокруг данного
EXAMPLE: clear:both

Предыдущий материал - Chapter I
Следующий материал - Свойства CSS1. Спецификация CSS1

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...