На главную страницу

Таблица свойств 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

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

background-color

[1] цвет (+)

transparent

всех элементов

цвет фона элемента

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

всех элементов

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

 

padding

[1] padding-top
[2] padding-right
[3] padding-left
[4] padding-bottom

[1] длина (+)
[2] процент (+)

всех элементов

отступ от верхнего border'а

отступ от правого border'а

отступ от левого border'а

отступ от нижнего border'а

padding-top:100pt

padding-right:100%

padding-left:100

padding-bottom:100em

border-width

[1] border-top-width
[2] border-right-width
[3] border-left-width
[4] border-bottom-width

[1] длина (+)
[2] thin, medium
или thick

всех элементов

толщина верхнего border'а

толщина правого border'а

толщина левого border'а

толщина нижнего border'а

border-top-width:100pt

border-right-width:thick

border-left-width:medium

border-bottom-width:100em

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

[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

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

Автор: Вероника Зинченко
Источник: www.webstudy.land.ru

Ссылки по теме
Основы CSS
Справочник свойств CSS1
Введение в CSS
Практическое освоение CSS

В начало страницы
Hosted by uCoz