Фэндом


Полный список CSS - операторов

Тема - веб-дизайн </div>
# Свойство Значения Описание Примеры
Свойства

блочных элементов(block или box)

Набивка(padding)
1 padding-top [1]длина Набивка сверху [1]{ margin-top: 3em; }
2 padding-bottom [1]длина Набивка снизу [1]{ margin-top: 3em; }
3 padding-left [1]длина Набивка слева [1]{ margin-top: 3em; }
4 padding-right [1]длина Набивка справа [1]{ margin-top: 3em; }
5 padding [1]padding-top
[2]padding-bottom
[3]padding-left
[4]padding-right
Обобщает значения свойств padding [1-4]{ padding:

3em; }

Отступ(margin)
6 margin-top [1]длина Отступ сверху [1]{ margin-top: 3em; }
7 margin-bottom [1]длина Отступ снизу [1]{ margin-bottom: 5pt; }
8 margin-left [1]длина Отступ слева [1]{ margin-left: 5px; }
9 margin-right [1]длина Отступ справа [1]{ margin-right: 1em; }
10 margin [1]margin-top
[2]margin-bottom
[3]margin-left
[4]margin-right
Обобщает значения свойств margin [1-4]{ margin:

3px; }

Граница(border)
11 border-width [1]ширина
[2]border-...-width
Задает

ширину границ элемента[1]; может быть задано для каждой в

отдельности[2]
[1]{ border-width: 2px 3px 4px 5px;

}
[2]{ border-top-width: 5px; }

12 border-color [1]цвет
[2]border-...-color
Задает цвет

границ элемента[1]; может быть задано для каждой в отдельности[2]

[1]{ border-color: red; }
[2]{ border-bottom-color:

black; }

13 border-style [1]none,

dotted, dashed,solid, groove, outset - любое из этих

значений
[2]border-...-style
Стиль границ

элемента[1]; может быть задано для каждой в отдельности[2]

[1]{ border-style: dotted; }
[2]{ border-left-style:

dashed; }

14 border [1]border-width, border-style, border-color
[2]border-...
Обобщает

значения свойств border[1]; может быть задано для каждой в

отдельности[2]
[1]{ border: 5px red dotted; }
[2]{

border-right: 2px blue dashed; }

Обтекание(float, clear)
15 float [1]border-width, border-style, border-color
[2]border-...
Обобщает

значения свойств border[1]; может быть задано для каждой в

отдельности[2]
[1]{ border: 5px red dotted; }
[2]{

border-right: 2px blue dashed; }

16 clear [1]border-width, border-style, border-color
[2]border-...
Обобщает

значения свойств border[1]; может быть задано для каждой в

отдельности[2]
[1]{ border: 5px red dotted; }
[2]{

border-right: 2px blue dashed; }

Свойства

текстовых элементов(font)

Свойства

FONT

? font-family [1]Шрифт Определяет используемый элементом шрифт [1]{

font-family: Tahoma, Arial; }

? font-style [1]normal - нормальный
[2]italic - курсив
Определяет стиль шрифта элемента [1]{ font-style: normal; }
[2]{

font-style: italic; }

? font-variant [1]normal -

нормальный
[2]small-caps - замена всех маленьких букв на

большие
Определяет стиль шрифта элемента [1]{

font-variant: normal }
[2]{ font-variant: small-caps; }

? font-weight [1]normal -

нормальный
[2]bold - жирный
[3]bolder - очень жирный
[4]lighter - тонкий(не отличается от normal)
[5]любое значение

от 100 до 900
Определяет стиль шрифта элемента [1]{

font-weight: normal; }
[2]{ font-weight: bold; }
[3]{ font-weight: bolder; }
[4]{ font-weight: lighter; }
[5]{ font-weight: 250; }

? font-size [1]размер
[2]xx-small, x-small, small, medium,

large, x-large, xx-large - любое из этих значений

[3]smaller, larger - любое из этих значений
Определяет размер шрифта элемента [1]{ font-size: 12px; }
[2]{

font-size: x-large; }
[3]{ font-size: smaller; }

? font [1]font-family
[2]font-style
[3]font-variant
[4]font-weight
[5]font-size
Обобщает значения свойств font [1-5]{ font: Tahoma

italic small-caps bold 10px; }

Свойства

TEXT

? text-decoration [1]none -

нет
[2]underline - подчеркнутый
[3]overline - надчеркнутый(не работает в Netscape)
[4]line-through - перечеркнутый

[5]blink - мигающий(не работает в Netscape)
Украшение текста [1]{ text-decoration: none; }
[2]{ text-decoration:

underline; }[3]{ text-decoration: overline; }
[4]{ text-decoration: line }

? text-transform [1]none -

нет
[2]capitalize - каждое слово начинается с заглавной буквы
[3]uppercase - каждая буква становится заглавной

[4]lowercase - каждая буква становится маленькой
Изменение регистра текста(не работает в Netscape) [1]{ text-transform:

none; }
[2]{ text-transform: capitalize; }
[3]{ text-transform: uppercase; }
[4]{ text-transform: lowercase; }

? text-align [1]left -

слева
[2]right - справа
[3]center - по центру
[4]justify - "растягивание" текста

Позиционирование текста [1]{ text-align: left;

}
[2]{ text-align: right; }
[3]{ text-align: center; }
[4]{ text-align: justify; }

? text-indent [1]длина
[2]% - процент
Отступ [1]{ text-indent: 2em; }
[2]{ text-indent: 20%; }
Свойства

COLOR

? color [1]Цвет Цвет [1]{ color: red; }
Свойства

BACKGROUND

? background-color [1]цвет Цвет фона элемента [1]{ background-color: yellow; }
? background-image [1]none - нет
[2]URL - ссылка на файл
Фоновое изображение [1]{ background-image: none; }
[2]{

background-image: URL(image.gif); }

? background-repeat [1]repeat

- размножение по всем направлениям
[2]repeat-x - размножение горизонтально
[3]repeat-y - размножение вертикально

[4]без размножения
Размножение фонового изображения [1]{ background-repeat: repeat; }
[2]{

background-repeat: repeat-x; }
[3]{ background-repeat: repeat-y; }
[4]{ background-repeat: no-repeat; }

? background-attachment [1]scroll - фон скроллируется с содержимым

док-та
[2]fixed - фиксирован(не скроллируется)

Скроллинг фонового изображения [1]{

background-attachment: scroll; }
[2]{ background-attachment: fixed; }

? background-position [1]процент от ширины + процент от высоты
[2]top,

middle, bottom - одно из значений
[3]left, center, right - одно из значений
[4]расстояние от левого края + расстояние от вершины

Расположение фонового изображения [1]{

background-position: 50% 10%; }
[2]{ background-position: bottom; }
[3]{ background-position: center; }
[4]{ background-position: 10px 5px; }

? background [1]background-color
[2]background-image
[3]background-repeat
[4]background-attachment
[5]background-position
Обобщает значения свойств background [1-5]{

background: blue URL(image.gif) repeat fixed center; }

Свойства

FILTER

? filter [1]alpha - альфа-фильтр Фильтры для элементов(только для MSIE) [1]{ filter: alpha(opacity=50); }
Свойства

OPACITY

? opacity [1]значение Прозрачность(только для Mozilla, Firefox, Safari, Opera) [1]{ opacity: 0.5 ; }
Свойства

ALIGN

? vertical-align [1]baseline
[2]sub
[3]super
[4]top-text
[5]top
[6]middle
[7]bottom
[8]bottom-text
[9]% - процент
Позиционирование элемента по отношению к другим элементам, стоящим в одном ряду(не работает в Netscape) [1]{

vertical-align: baseline; }
[2]{ vertical-align: sub; }
[3]{ vertical-align: super; }
[4]{ vertical-align: top-text; }
[5]{ vertical-align: top; }
[6]{ vertical-align: middle; }
[7]{ vertical-align: bottom; }
[8]{ vertical-align: bottom-text; }
[9]{ vertical-align: 20%; }

Свойства

LINE

? line-height [1]normal - без изменений
[2]значение
[3]% - процент
Отступ сверху [1]{ line-height: normal; }
[2]{ line-height:

10px; }
[3]{ line-height: 25%; }

Свойства

DISPLAY

? display [1]none -

нет
[2]inline -
[3]block
[4]list-item

Определяет, как будет отображаться элемент [1]{

display: inline; }
[2]{ display: block; }
[3]{ display: list-item; }

Свойства

LIST

? list-style [1]disc - диск
[2]decimal
[3]
Вид элемента(списка) [1]{ border: 2px solid red; }
Свойства

SPACING

? letter-spacing [1]значение
[2]normal - без изменений
Расстояние между буквами [1]{ letter-spacing: 2px;

}

? word-spacing [1]значение
[2]normal - без изменений
Расстояние между словами [1]{ border: 5em; }
Свойства

HEIGHT

? height [1]значение Расстояние между словами [1]{ border: 5em; }

Обнаружено использование расширения AdBlock.


Викия — это свободный ресурс, который существует и развивается за счёт рекламы. Для блокирующих рекламу пользователей мы предоставляем модифицированную версию сайта.

Викия не будет доступна для последующих модификаций. Если вы желаете продолжать работать со страницей, то, пожалуйста, отключите расширение для блокировки рекламы.

Также на Фэндоме

Случайная вики