Каскадные таблицы стилей (Cascading Style Sheets)
John Pozadzides и Liam Quinn http://www.htmlhelp.com/
Перевод и адаптация осуществлена Воробьевым Я.А.

  • Что такое каскадные таблицы стилей?
  • Каскадные таблицы стилей - быстрое обучение
  • Каскадные таблицы стилей - более подробное описание
  • Свойства каскадных таблиц стилей
    • Свойства шрифта
    • Цвет элемента и цвет фона
    • Свойства текста
    • Свойства позиционирования
    • Свойства полосы прокрутки
    • Дополнительные свойства
    • Единицы измерения

Copyright © 2004 Воробьев Ярослав.
e-mail: system1991@yandex.ru
All rights reserved.


Таблица цветов

Задавать цвет элементов на своих страницах Вы можете одним из двух способов - или указав английское название цвета, или его шестнадцатеричное значение в системе RGB (red-green-blue). Например:
<hr color="#F0F8FF">

ALICEBLUE (#F0F8FF) | ANTIQUEWHITE (#FAEBD7) | AQUA (#00FFFF) | AQUAMARINE (#7FFFD4)
AZURE (#F0FFFF) | BEIGE (#F5F5DC) | BISQUE (#FFE4C4) | BLACK (#000000)
BLANCHEDALMOND (#FFEBCD) | BLUE (#0000FF) | BLUEVIOLET (#8A2BE2) | BROWN (#A52A2A)
BURLYWOOD (#DEB887) | CADETBLUE (#5F9EA0) | CHARTREUSE (#7FFF00) | CHOCOLATE (#D2691E)
CORAL (#FF7F50) | CORNFLOWER (#6495ED) | CORNSILK (#FFF8DC) | CRIMSON (#DC143C)
CYAN (#00FFFF) | DARKBLUE (#00008B) | DARKCYAN (#008B8B) | DARKGOLDENROD (#B8860B)
DARKGRAY (#A9A9A9) | DARKGREEN (#006400) | DARKKHAKI (#BDB76B) | DARKMAGENTA (#8B008B)
DARKOLIVEGREEN (#556B2F) | DARKORANGE (#FF8C00) | DARKORCHID (#9932CC) | DARKRED (#8B0000)
DARKSALMON (#E9967A) | DARKSEAGREEN (#8FBC8B) | DARKSLATEBLUE (#483D8B) | DARKSLATEGRAY (#2F4F4F)
DARKTURQUOISE (#00CED1) | DARKVIOLET (#9400D3) | DEEPPINK (#FF1493) | DEEPSKYBLUE (#00BFFF)
DIMGRAY (#696969) | DODGERBLUE (#1E90FF) | FIREBRICK (#B22222) | FLORALWHITE (#FFFAF0)
FORESTGREEN (#228B22) | FUCHIA (#FF00FF) | GAINSBORO (#DCDCDC) | GHOSTWHITE (#F8F8FF)
GOLD (#FFD700) | GOLDENROD (#DAA520) | GRAY (#808080) | GREEN (#008000)
GREENYELLOW (#ADFF2F) | HONEYDEW (#F0FFF0) | HOTPINK (#FF69B4) | INDIANRED (#CD5C5C)
INDIGO (#4B0082) | IVORY (#FFFFF0) | KHAKI (#F0E68C) | LAVENDER (#E6E6FA)
LAVENDERBLUSH (#FFF0F5) | LAWNGREEN (#7CFC00) | LEMONCHIFFON (#FFFACD) | LIGHTBLUE (#ADD8E6)
LIGHTCORAL (#F08080) | LIGHTCYAN (#E0FFFF) | LIGHTGOLDENRODYELLOW (#FAFAD2) | LIGHTGREEN (#90EE90)
LIGHTGREY (#D3D3D3) | LIGHTPINK (#FFB6C1) | LIGHTSALMON (#FFA07A) | LIGHTSEAGREEN (#20B2AA)
LIGHTSKYBLUE (#87CEFA) | LIGHTSLATEGRAY (#778899) | LIGHTSTEELBLUE (#B0C4DE) | LIGHTYELLOW (#FFFFE0)
LIME (#00FF00) | LIMEGREEN (#32CD32) | LINEN (#FAF0E6) | MAGENTA (#FF00FF)
MAROON (#800000) | MEDIUMAQUAMARINE (#66CDAA) | MEDIUMBLUE (#0000CD) | MEDIUMORCHID (#BA55D3)
MEDIUMPURPLE (#9370DB) | MEDIUMSEAGREEN (#3CB371) | MEDIUMSLATEBLUE (#7B68EE) | MEDIUMSPRINGGREEN (#00FA9A)
MEDIUMTURQUOISE (#48D1CC) | MEDIUMVIOLETRED (#C71585) | MIDNIGHTBLUE (#191970) | MINTCREAM (#F5FFFA)
MISTYROSE (#FFE4E1) | MOCCASIN (#FFE4B5) | NAVAJOWHITE (#FFDEAD) | NAVY (#000080)
OLDLACE (#FDF5E6) | OLIVE (#808000) | OLIVEDRAB (#6B8E23) | ORANGE (#FFA500)
ORANGERED (#FF4500) | ORCHID (#DA70D6) | PALEGOLDENROD (#EEE8AA) | PALEGREEN (#98FB98)
PALETURQUOISE (#AFEEEE) | PALEVIOLETRED (#DB7093) | PAPAYAWHIP (#FFEFD5) | PEACHPUFF (#FFDAB9)
PERU (#CD853F) | PINK (#FFC0CB) | PLUM (#DDA0DD) | POWDERBLUE (#B0E0E6)
PURPLE (#800080) | RED (#FF0000) | ROSYBROWN (#BC8F8F) | ROYALBLUE (#4169E1)
SADDLEBROWN (#8B4513) | SALMON (#FA8072) | SANDYBROWN (#F4A460) | SEAGREEN (#2E8B57)
SEASHELL (#FFF5EE) | SIENNA (#A0522D) | SILVER (#C0C0C0) | SKYBLUE (#87CEEB)
SLATEBLUE (#6A5ACD) | SLATEGRAY (#708090) | SNOW (#FFFAFA) | SPRINGGREEN (#00FF7F)
STEELBLUE (#4682B4) | TAN (#D2B48C) | TEAL (#008080) | THISTLE (#D8BFD8)
TOMATO (#FF6347) | TURQUOISE (#40E0D0) | VIOLET (#EE82EE) | WHEAT (#F5DEB3)
WHITE (#FFFFFF) | WHITESMOKE (#F5F5F5) | YELLOW (#FFFF00) | YELLOWGREEN (#9ACD32)

Цвета определяемые пользователем

ACTIVEBORDER | ACTIVECAPTION | APPWORKSPACE | BACKGROUND
BUTTONFACE | BUTTONHIGHLIGHT | BUTTONSHADOW | BUTTONTEXT
CAPTIONTEXT | GRAYTEXT | HIGHLIGHT | HIGHLIGHTTEXT
INACTIVEBORDER | INACTIVECAPTION | INACTIVECAPTIONTEXT | INFOBACKGROUND
INFOTEXT | MENU | MENUTEXT | SCROLLBAR
THREEDDARKSHADOW | THREEDFACE | THREEDHIGHLIGHT | THREEDLIGHTSHADOW
THREEDSHADOW | WINDOW | WINDOWFRAME | WINDOWTEXT
Содержание


Что такое каскадные таблицы стилей?

Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере. Впервые идея форматирования HTML-документов с помощью CSS была рекомендована консорциумом W3C в 1996 году. Эта рекомендация используется Web-разработчиками и по сей день. В момент появления данного стандарта лишь немногие браузеры могли правильно выполнять операции, назначаемые при помощи каскадных таблиц стилей. Сегодня эта проблема практически решена.
Каскадные таблицы стилей являются незаменимым инструментом при создании сайтов. Теперь авторам вместо того, чтобы, например, 10 раз указывать на странице параметры
<hr width="60%" size=4 align="center">
необходимо их прописать только один раз в каскадных таблицах стилей. Если со временем возникнет необходимость поменять, скажем, параметр "width", то надо будет исправить только одно значение.
Каскадные таблицы стилей предоставляют намного больше возможностей в оформлении документа, нежели чем стандартные элементы языка гипертекстовой разметки. Использование свойств css, которые влияют на изменение цвета ссылок, фона, шрифта, текста, полей элементов выводит html-документы на принципиально новый уровень.
Отдельное использование оформления документа от его содержания приводит к меньшим конфликтам при просмотре страниц на различных платформах.


CSS - быстрое обучение

Каскадные таблицы стилей включают свод правил, которые сообщают браузеру то, каким образом необходимо представить html-документ. Существует несколько вариантов задания каскадных таблиц стилей. Самый простой из них - путем задания элемента <style>...</style> в заголовочной части html-документа (между тегами <head>...</head>). Между тегами <style>...</style> размещается указатель элемента html, например, BODY, P, BR, IMG и т. д. Указатели, в отличие от элементов html, не заключаются в угловые скобки. После указателя в фигурных скобках задается свойство, которое будет иметь данный элемент и, после двоеточия, его значение. Можно задать несколько свойств элемента, разделяя их символом ";".
В общем виде выше сказанное можно представить так:

<style>
указатель {свойство1:значение1; свойство2:значение2;...;свойствоN:значениеN}
</style>

Пример:

<html>
<head>
<title>Изучение CSS </title>
<style>
P {font-size: 20px}
A { color: #0000ff; font-size: 20px}
BODY {
background-image: url(gif/back.jpg);
background-attachment: scroll;
background-position:center center;
background-repeat: repeat }
</style>
</head>
<body>
</body>
</html>

В этом примере при помощи каскадных таблиц стилей задаются свойства для элементов P, A и BODY.


Веб-дизайн: Единство стиля при создании сайтов

Каскадные таблицы стилей - более подробное описание

Одной из основополагающих концепций дизайна является единый стиль представления html-документов в пределах всего сайта. Как правило, сначала разработчик продумывает дизайн и структуру главной страницы сайта, а затем использует его в качестве шаблона на других страницах. Вставлять этот шаблон на все страницы сайта вручную крайне неэффективно, так как при очередном изменении дизайна все страницы придется переделывать заново. Конечно, можно использовать такие интернет технологии, как SSI, PHP, но, к сожалению, не многие бесплатные хостинги предоставляют такую возможность. Будем надеяться, что со временем эта ситуация измениться к лучшему.
Пока же наиболее целесообразно все оформление страниц (фон, цвет и размер ссылок, основного текста, расположение элементов) прописывать в одном файле, и со всех html-документов делать на него ссылку. Для этой цели применяются каскадные таблицы стилей, которые представляют собой обычный текстовый файл с расширением “css”. При изменении параметров этого файла происходит автоматическое изменение оформления всех страниц. В настоящее время очень трудно представить себе нормальный сайт (портал), без использования данной технологии. Для того, чтобы сделать ссылку на файл, содержащий описание каскадных таблиц стилей, необходимо в заголовочной части html-документа (между тегами <HEAD>…</HEAD>) прописать следующее:

<link rel="stylesheet" type="text/css" href="name.css">

Параметр “href” служит для задания имени *.css файла. Файл, в котором описываются каскадные таблицы стилей, должен начинаться с элемента <STYLE> и заканчиваться элементом </STYLE>. Между этой парой тегов прописываются свойства тех элементов, которые присутствуют на сайте. Например, для того, чтобы задать фон на всех страницах сайта, необходимо в файл *.css добавить такие строки:

<style>
BODY { background-image: url(gif/name.jpg) }
</style>

где name.jpg – имя графического файла, который будет использован в качестве фона.

Каскадные таблицы стилей предоставляют намного больше возможностей для описания элементов, чем язык разметки гипертекста – HTML. Так, например, фоновое изображение можно не только указывать, но и применять к нему свойства “позиционирования”, “прокручивания” или “повторения”. Задается это при помощи свойств:

background-position:<значение>
background-attachment:<значение>
background-repeat:<значение>

Вторым способом задания каскадных таблиц стилей является применение атрибута “style” к какому-либо элементу непосредственно в html-документе. В общем виде выше сказанное можно представить так:
<элемент style=”свойство1:значение1; свойство2:значение2;… свойствоN:значениеN”>
Пример:
<html>
<head><title>Пример использования CSS </title></head>
<body style=”color:#FFF8DC”>
<p style=”font-size: 20px”> Использования CSS </p>
<b style=”text-decoration: underline”>Текст подчеркнут </b>
</body>
</html>

Итак, применение каскадных таблиц стилей является необходимым атрибутом при создании сайтов, которые удовлетворяют современным требованиям, позволяя быстро и гибко реагировать на изменения, которые неизбежно возникают при наполнении сайтов разнообразной информацией. Позволяют создавать единый дизайн сайта и быстро изменять его в случае необходимости.


Описание свойств, доступных в CSS (Cascading Style Sheets)

Свойства шрифта
  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font
Цвет элемента и цвет фона
  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background
Свойства текста
  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height
Свойства позиционирования
  • Top Margin
  • Right Margin
  • Bottom Margin
  • Left Margin
  • Margin
  • Top Padding
  • Right Padding
  • Bottom Padding
  • Left Padding
  • Padding
  • Top Border Width
  • Right Border Width
  • Bottom Border Width
  • Left Border Width
  • Border Width
  • Border Color
  • Border Style
  • Top Border
  • Right Border
  • Bottom Border
  • Left Border
  • Border
  • Width
  • Height
  • Float
  • Clear
Свойства полосы прокрутки
  • scrollbar-3dlight-color
  • scrollbar-arrow-color
  • scrollbar-base-color
  • scrollbar-darkshadow-color
  • scrollbar-face-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-track-color
Дополнительные свойства
  • Display
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style
  • Cursor
Единицы измерения
  • Линейные размеры
  • Процнты
  • Задание цвета
  • Задание URL


Свойства шрифта

  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font


Свойство Font Family

Синтаксис: | Font-Family:<имя_шрифта>, <имя_шрифта>, <имя_шрифта>...
Возможные значения: | <имя_шрифта> - любое имя шрифта, которое может быть использовано. Это могут быть как универсальные шрифты (serif, sans-serif, cursive), так и специфические (Arial, Helvetica, Western, Times...). Можно задать несколько имен, перечисленных через запятую. В этом случае будет использован тот шрифт на машине пользователя, имя которого найдено первым.
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Пример:

P {font-family: serif, sans-serif}

Имя шрифта может быть также задано при помощи свойства Font


Свойство Font Style

Синтаксис: | Font-Style:<значение>
Возможные значения: | normal | italic | oblique
Значение по умолчанию: | normal
Применяется: | ко всем элементам

Свойство Font-Style определяет, каким из трех возможных способов будет отображаться шрифт: нормальным (normal), курсивом (italic), или наклонным (oblique).

Пример:

h3 { font-style: italic }
P { font-style: normal }


Свойство Font Variant

Синтаксис: | Font-Variant:<значение>
Возможные значения: | normal | small-caps
Значение по умолчанию: | normal
Применяется: | ко всем элементам

Свойство font-variant определяет, каким образом будут отображаться заглавные буквы текста. Они могут отображаться нормальным способом (normal), либо быть несколько меньше, если к ним применили свойство "font-variant : small-caps ".

Пример:

h3 { font-variant : normal }
P { font-variant : small-caps }


Свойство Font Weight

Синтаксис: | Font-Weight:<значение>
Возможные значения: | normal | bold | border | lighter | 100 | 200 | 300| 400 | 500 | 600 | 700 | 800 | 900
Значение по умолчанию: | normal
Применяется: | ко всем элементам

Свойство font-weight служит для определения веса шрифта. Значения "bold" и "lighter" являются относительными, все остальные - абсолютными. Обратите внимание, что не каждый шрифт может принимать все значения!

Пример:

h3 { font-weight: 900 }
P { font-weight: normal}


Свойство Font Size

Синтаксис: Font-Size:<абсолютное значение> | <относительное значение> | линейный размер | проценты
Возможные значения:

  • <абсолютное значение>
    xx-small | x-small | small | medium | large | x-large | xx-large
  • <относительное значение>
    larger | smaller

Значение по умолчанию: medium
Применяется: ко всем элементам

Свойство font-size служит для изменения размера шрифта. Абсолютные значения следует использовать с большой осторожностью, так как элементы, к которым применили данное свойство, могут оказаться на машине пользователя либо слишком большими либо слишком маленькими в зависимости от размера шрифта, установленного по умолчанию или разрешения экрана.

Примеры:

h3 { font-size: 12pt }
P { font-size: smaller }
b { font-size: xx-large }
i { font-size: 200%}


Свойство Font

Синтаксис: | Font:<значение>
Возможные значения: | font-style || font-variant || font-weight || font-size /line-height ||font-family
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "font" является обобщающим, включая в себя все возможные свойства, характерные для шрифтов, а также свойство "line-height ", которое служит для задания высоты строки (указывается через слэш "/" после задания размера шрифта).

Примеры:

h3 { font: italic bold 12pt/14pt serif }
P { font: larger serif }


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

  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background


Свойство Color

Синтаксис: | color:<значение>
Возможные значения: | Задавать цвет элементов на своих страницах Вы можете одним из двух способов - или указав английское название цвета (green, blue, black), или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов!
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "color" позволяет авторам задать цвет элементов на своих страницах по своему усмотрению. Для того, чтобы избежать конфликтов при указании цвета элемента, необходимо свойство "color" использовать совместно со свойством background.

Примеры:

h3 { color: lime}
P { color: #8A2BE2}


Свойство Background-Color

Синтаксис: | background-color:<значение>
Возможные значения: | transparent | color
Значение по умолчанию: | transparent
Применяется: | ко всем элементам

Свойство "background-color" позволяет авторам задать фоновый цвет элемента. Для того, чтобы избежать конфликтов при использовании каскадных таблиц стилей, рекомендуется свойство "background-color" указывать совместно со свойством background-image . Авторы, при создании своих страниц, могут также использовать свойство background , которое в настоящее время является более приемлемым.

Примеры:

body {background-color: #F5FFFA}
h3 { background-color: #ORANGE}


Свойство Background-Image

Синтаксис: | background-image:<значение>
Возможные значения: | none | url
Значение по умолчанию: | none
Применяется: | ко всем элементам

Свойство "background-image" позволяет авторам задать в качестве фона элемента фоновое изображение. Для того, чтобы избежать конфликтов при использовании каскадных таблиц стилей, рекомендуется свойство "background-image" указывать совместно со свойством background-color . Авторы, при создании своих страниц, могут также использовать свойство background , которое в настоящее время является более приемлемым.

Примеры:

body { background-image: url(http://books-it.narod.ru/gif/back.jpg)
}
h3 { background-image: url(back.jpg) }


Свойство Background-Repeat

Синтаксис: | background-repeat:<значение>
Возможные значения: | repeat | repeat-x | repeat-y | no-repeat
Значение по умолчанию: | repeat
Применяется: | ко всем элементам

Свойство "background-repeat" позволяет авторам задать, как будет вести себя фоновое изображение. Используется совместно со свойством background-image . Значение "repeat-x" задает повторение фонового изображения по горизонтали, а значение "repeat-y" - по вертикали. Значение "repeat", которое стоит по умолчанию, служит для повторения фонового изображения по горизонтали и по вертикали, а значение "no-repeat" - запрещает повторение фонового изображения. Авторы, при создании своих страниц, могут также использовать свойство background , которое в настоящее время является более приемлемым.

Пример:

body { background-image: url(http://books-it.narod.ru/gif/back.jpg);
background-repeat:repeat-y }


Свойство Background-Attachment

Синтаксис: | background-attachment:<значение>
Возможные значения: | scroll | fixed
Значение по умолчанию: | scroll
Применяется: | ко всем элементам

Свойство "background-attachment" позволяет авторам задать, как будет вести себя фоновое изображение. Используется совместно со свойством background-image . Значение "scroll" указывает на то, что фоновое изображение будет перемещаться вместе с полосой прокрутки (это значение стоит по умолчанию). Значение "fixed" запрещает прокручивание фонового изображения вместе с полосой прокрутки - этот параметр следует использовать очень осторожно. Авторы, при создании своих страниц, могут также использовать свойство background , которое в настоящее время является более приемлемым.

Пример:

body { background-image: url(http://books-it.narod.ru/gif/back.jpg);
background-attachment:fixed }


Свойство Background-Position

Синтаксис: | background-position:<значение>
Возможные значения: | [(top | center | bottom) || (left | center | right)] [проценты | линейный размер ]
Значение по умолчанию: | 0% 0%
Применяется: | к элементам IMG, INPUT, TEXTAREA, SELECT и OBJECT, а также к элементам форматирования текста.

Свойство "background-position" позволяет авторам задать начальную позицию фонового изображение. Используется совместно со свойством background-image . Это свойство может применяться только для элементов IMG, INPUT, TEXTAREA, SELECT и OBJECT, а также для элементов уровня. Горизонтальное позиционирование задается атрибутами "left", "center", "right", а вертикальное - при помощи "top", "center" и "bottom". Использовать для задания позиции изображения абсолютные значения не рекомендуется, так как у пользователей может быть разное разрешение экрана. При указании позиции изображения в процентах или абсолютным значением сначала указывается горизонтальное выравнивание, а затем вертикальное. Авторы, при создании своих страниц, могут также использовать свойство background , которое в настоящее время является более приемлемым.

Пример:

body { background-image: url(http://books-it.narod.ru/gif/back.jpg);
background-position:center center }


Свойство Background

Синтаксис: | background:<значение>
Возможные значения: | background-color || background-image || background-repeat || background-attachment || background-position
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "background" позволяет авторам задать цвет или фоновое изображение для элементов со всеми характерными для них параметрами.

Примеры:

body { background: url(http://books-it.narod.ru/gif/back.jpg) fixed  }
p {
background: url(fon.jpg) no-repeat #00ff00}
table {
background: url(fon.jpg) no-repeat #00ff00 center
bottom}


Свойства текста

  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height


Свойство Word Spacing

Синтаксис: | word-spacing:<значение>
Возможные значения: | normal | линейный размер
Значение по умолчанию: | normal
Применяется: | ко всем элементам

Свойство "word-spacing" задает колличество пробелов между словами. Может принимать либо значение "normal", которое задано по умолчанию, либо задаваться абсолютным или относительным значением длины. Смотрите единицы измерения длины - линейные размеры . Допустимо использование отрицательных значений.

Пример:

P { word-spacing: 0.5em}
B { word-spacing: -0.3em}


Свойство Letter Spacing

Синтаксис: | letter-spacing:<значение>
Возможные значения: | normal | линейный размер
Значение по умолчанию: | normal
Применяется: | ко всем элементам

Свойство "letter-spacing" задает колличество пробелов между символами. Может принимать либо значение "normal", которое задано по умолчанию, либо задаваться абсолютным или относительным значением длины. Смотрите единицы измерения длины - линейные размеры . Допустимо использование отрицательных значений.

Пример:

P { letter-spacing: 0.2em}
B { letter-spacing: -0.1em}


Свойство Text Decoration

Синтаксис: | text-decoration:<значение>
Возможные значения: | none | underline || overline || line-through
Значение по умолчанию: | none
Применяется: | ко всем элементам

Свойство "text-decoration" позволяет применить к тексту различные элементы форматирования. Значение "underline" делает текст подчеркнутым, "overline" - надчеркнутым, "line-through" - перечеркнутым. Эти значения можно комбинировать.

Пример:

P { text-decoration: none}
B { text-decoration: underline overline }


Свойство Vertical Alignment

Синтаксис: | vertical-align:<значение>
Возможные значения: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | проценты
Значение по умолчанию: | baseline
Применяется: | к элементам, которые не имеют конца строки до и после него (A, IMG, EM...)

Свойство "vertical-align" позволяет изменить вертикальное позиционирование элемента относительно родительского. Значение, кроме ключевых слов, может задаваться в процентах. Допускается использование отрицательных значений.

Пример:

IMG { vertical-align: top}
A {
vertical-align: 40% }


Свойство Text Transformation

Синтаксис: | text-transform:<значение>
Возможные значения: | none | Capitalize | UPPERCASE | lowercase
Значение по умолчанию: | none
Применяется: | ко всем элементам

Свойство "text-transform" позволяет преобразовать текст одним из четырех способов:
capitalize - печатает прописными буквами первый символ каждого слова;
uppercase - печатает прописными буквами все символы каждого слова;
lowercase - печатает строчными буквами все символы каждого слова;
none - значение по умолчанию.

Пример:

p { text-transform: capitalize }
h3 { text-transform: uppercase }


Свойство Text Alignment

Синтаксис: | text-align:<значение>
Возможные значения: | left | right | center | justify
Значение по умолчанию: | не задано
Применяется: | к таким элементам, как P, B, I, H1, H2, H3 ...

Свойство "text-align" позволяет выравнить текст одним из четырех способов:
left - выравнивание текста по левому краю страницы;
right - выравнивание текста по правому краю страницы;
center - выравнивание текста по центру;
justify - выравнивание текста по ширине.

Пример:

p { text-align: justify }
h3 { text-align: center}


Свойство Text Indentation

Синтаксис: | text-indent:<значение>
Возможные значения: | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | к таким элементам, как P, B, I, H1, H2, H3 ...

Свойство "text-indent" позволяет указать сдвиг первой строки элемента. Может задаваться в процентах, в относительных или в абсолютных единицах измерения. Смотрите единицы измерения.

Пример:

p { text-indent: 4em }
h3 { text-indent: 3em}


Свойство Line Height

Синтаксис: | line-height:<значение>
Возможные значения: | normal | <число> | линейный размер | проценты
Значение по умолчанию: | normal
Применяется: | ко всем элементам

Свойство "line-height" позволяет указать расстояние между строками. Может задаваться в процентах, в относительных и в абсолютных единицах измерения, либо числом. Смотрите единицы измерения. Отрицательные значения не допускаются.

Пример:

p { line-height: 4em }
h3 { line-height: 3em}


Свойства позиционирования

  • Top Margin
  • Right Margin
  • Bottom Margin
  • Left Margin
  • Margin
  • Top Padding
  • Right Padding
  • Bottom Padding
  • Left Padding
  • Padding
  • Top Border Width
  • Right Border Width
  • Bottom Border Width
  • Left Border Width
  • Border Width
  • Border Color
  • Border Style
  • Top Border
  • Right Border
  • Bottom Border
  • Left Border
  • Border
  • Width
  • Height
  • Float
  • Clear


Свойство Top Margin

Синтаксис: | margin-top:<значение>
Возможные значения: | auto | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | ко всем элементам

Свойство "margin-top" устанавливает верхнее поле элемента. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения. Отрицательные значения допускаются.

Пример:

body {
margin-top: 0 }
table { margin-top: auto}


Свойство Right Margin

Синтаксис: | margin-right:<значение>
Возможные значения: | auto | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | ко всем элементам

Свойство "margin-right" устанавливает правое поле элемента. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения. Отрицательные значения допускаются.

Пример:

body {
margin-right: 0 }
table { margin-right: auto}


Свойство Bottom Margin

Синтаксис: | margin-bottom:<значение>
Возможные значения: | auto | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | ко всем элементам

Свойство "margin-bottom" устанавливает нижнее поле элемента. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения. Отрицательные значения допускаются.

Пример:

body {
margin-bottom: 0 }
table { margin-bottom: auto}


Свойство Left Margin

Синтаксис: | margin-left:<значение>
Возможные значения: | auto | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | ко всем элементам

Свойство "margin-left" устанавливает левое поле элемента. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения. Отрицательные значения допускаются.

Пример:

body {
margin-left: 0 }
table { margin-left: auto}


Свойство Margin

Синтаксис: | margin:<значение>
Возможные значения: | auto | линейный размер | проценты
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "margin" позволяет авторам установить все поля элемента. Это свойство является альтернативой свойствам margin-top, margin-bottom, margin-left и margin-right. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения. Отрицательные значения допускаются. Если заданы 4 значения элемента margin, то они устанавливают верхнее, правое, нижнее и левое поля соответственно. Если задано одно значение, то оно применяется ко всем полям элемента.

Пример:

body { margin: 0em }
table { margin: 1em 2em 3em 4em}


Свойство Top Padding

Синтаксис: | padding-top:<значение>
Возможные значения: | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | ко всем элементам

Свойство "padding-top" указывает отступ между верхним краем элемента и его содержанием. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения.

Пример:

ul {
padding-top: 2em}
table { padding-top: 3em}


Свойство Right Padding

Синтаксис: | padding-right:<значение>
Возможные значения: | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | ко всем элементам

Свойство "padding-right" указывает расстояние между правой рамкой элемента и его содержанием. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения. Задание отрицательных значений не допускается.

Пример:

ul {
padding-right: 2em}
table { padding-right: 3em}


Свойство Bottom Padding

Синтаксис: | padding-bottom:<значение>
Возможные значения: | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | ко всем элементам

Свойство "padding-bottom" указывает расстояние между нижней рамкой элемента и его содержанием. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения. Задание отрицательных значений не допускается.

Пример:

ul {
padding-bottom: 2em}
table { padding-bottom: 3em}


Свойство Left Padding

Синтаксис: | padding-left:<значение>
Возможные значения: | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | ко всем элементам

Свойство "padding-left" указывает расстояние между лувой рамкой элемента и его содержанием. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения. Задание отрицательных значений не допускается.

Пример:

ul {
padding-left: 2em}
table { padding-left: 3em}


Свойство Padding

Синтаксис: | padding:<значение>
Возможные значения: | линейный размер | проценты
Значение по умолчанию: | 0
Применяется: | ко всем элементам

Свойство "padding" указывает расстояние между рамкой элемента и его содержанием. Это свойство является альтернативой свойствам padding-top, padding-right, padding-bottom, padding-left. Может задаваться в процентах, в относительных и в абсолютных единицах измерения. Смотрите единицы измерения. Задание отрицательных значений не допускается. Если указаны 4 значения, то они задают расстояние между верхней, правой, нижней, левой рамкой элемента и его содержанием соответственно. Если указано одно значение, то оно применяется ко всем границам элемента.

Пример:

ul { padding: 2em}
table { padding: 3em 2em 3em 4em}


Свойство Top Border Width

Синтаксис: | border-top-width:<значение>
Возможные значения: | thin | medium | thick | линейный размер
Значение по умолчанию: | medium
Применяется: | ко всем элементам

Свойство "border-top-width" указывает ширину верхней рамки элемента. Может указываться одним из трех ключевых слов: thin (тонкая), medium (средняя), thick (толстая), либо в абсолютных или относительных единицах измерения. Смотрите линейные размеры. Указывание отрицательных значений не допускается. Также можно использовать свойства border-top, border-width, border.

Пример:

ul { border-top-width: thick }
table { border-top-width: 3em}


Свойство Right Border Width

Синтаксис: | border-right-width:<значение>
Возможные значения: | thin | medium | thick | линейный размер
Значение по умолчанию: | medium
Применяется: | ко всем элементам

Свойство "border-right-width" указывает ширину правой рамки элемента. Может указываться одним из трех ключевых слов: thin (тонкая), medium (средняя), thick (толстая), либо в абсолютных или относительных единицах измерения. Смотрите линейные размеры . Указывание отрицательных значений не допускается.
Также можно использовать свойства border-right, border-width и border.

Пример:

ul { border-right-width: thick }
table { border-right-width: 3em}


Свойство Bottom Border Width

Синтаксис: | border-bottom-width:<значение>
Возможные значения: | thin | medium | thick | линейный размер
Значение по умолчанию: | medium
Применяется: | ко всем элементам

Свойство "border-bottom-width" указывает ширину нижней рамки элемента. Может указываться одним из трех ключевых слов: thin (тонкая), medium (средняя), thick (толстая), либо в абсолютных или относительных единицах измерения. Смотрите линейные размеры. Указывание отрицательных значений не допускается. Также можно использовать свойства border-bottom, border-width и border

Пример:

ul { border-bottom-width: thin }
table { border-bottom-width: 3em}


Свойство Left Border Width

Синтаксис: | border-left-width:<значение>
Возможные значения: | thin | medium | thick | линейный размер
Значение по умолчанию: | medium
Применяется: | ко всем элементам

Свойство "border-left-width" указывает ширину левой рамки элемента. Может указываться одним из трех ключевых слов: thin (тонкая), medium (средняя), thick (толстая), либо в абсолютных или относительных единицах измерения. Смотрите линейные размеры. Указывание отрицательных значений не допускается. Также можно использовать свойства border-left, border-width и border

Пример:

ul { border-left-width: thin }
table { border-left-width: 3em}


Свойство Border Width

Синтаксис: | border-width:<значение>
Возможные значения: | thin | medium | thick | линейный размер
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "border-width" указывает ширину рамки элемента. Может указываться одним из трех ключевых слов: thin (тонкая), medium (средняя), thick (толстая), либо в абсолютных или относительных единицах измерения. Смотрите линейные размеры. Указывание отрицательных значений не допускается. Свойство border-width является альтернативой свойствам border-top-width, border-right-width, border-bottom-width, border-left-width. Вы также можете использовать свойства border.

Пример:

ul { border-width: thin }
table { border-width: 3em}


Свойство Border Color

Синтаксис: | border-color:<значение>
Возможные значения: | color
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "border-color" позволяет указать цвет рамки элемента. Задавать цвет элементов на своих страницах Вы можете одним из двух способов - или указав английское название цвета, или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов. Если указано одно значение цвета, то оно применяется ко всей рамки элемента. Если указано 4 заначения цвета, то они применяются к верхней, правой, нижней и левой рамкам элемента соответственно. Цвет рамки элемента можно также задать при помощи свойства border.

Пример:

ul { border-color: #ff0000 }
table { border-color: green}


Свойство Border Style

Синтаксис: | border-style:<значение>
Возможные значения: | none | dotted | dashed | solid | double | groove | ridge | inset | outset
Значение по умолчанию: | none
Применяется: | ко всем элементам

Свойство "border-style" позволяет задать стиль рамки элемента. Если указано одно значение, то оно применяется ко всей рамки элемента. Если указано 4 заначения, то они применяются к верхней, правой, нижней и левой рамкам элемента соответственно. Стиль рамки элемента можно также задать при помощи свойства border.

Пример:

td { border-style: dotted}
table { border-style: solid double solid double}


Свойство Top Border

Синтаксис: | border-top:<значение>
Возможные значения: | border-top-width || border-style || color
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "border-top" позволяет задать ширину, стиль или цвет верхней рамки элемента. Обратите внимание, что можно задать только одно значение данного свойства. Вместо свойства border-top можно использовать свойство border.

Пример:

td { border-top: dotted}
table { border-top: green}


Свойство Right Border

Синтаксис: | border-right:<значение>
Возможные значения: | border-right-width || border-style || color
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "border-right" позволяет задать ширину, стиль или цвет правой рамки элемента. Обратите внимание, что можно задать только одно значение данного свойства. Вместо свойства border-right можно использовать свойство border.

Пример:

td { border-right: dotted}
table { border-right: green}


Свойство Bottom Border

Синтаксис: | border-bottom:<значение>
Возможные значения: | border-bottom-width || border-style || color
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "border-bottom" позволяет задать ширину, стиль или цвет нижней рамки элемента. Обратите внимание, что можно задать только одно значение данного свойства. Вместо свойства border-bottom можно использовать свойство border.

Пример:

td { border-bottom: dotted}
table { border-bottom: green}


Свойство Left Border

Синтаксис: | border-left:<значение>
Возможные значения: | border-left-width || border-style || color
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "border-left" позволяет задать ширину, стиль или цвет левой рамки элемента. Обратите внимание, что можно задать только одно значение данного свойства. Вместо свойства border-left можно использовать свойство border.

Пример:

td { border-left: dotted}
table { border-left: green}


Свойство Border

Синтаксис: | border:<значение>
Возможные значения: | border-width || border-style || color
Значение по умолчанию: | не задано
Применяется: | ко всем элементам

Свойство "border" позволяет задать ширину, стиль или цвет всей рамки элемента. Обратите внимание, что можно задать только одно значение данного свойства. Если Вам необходимо задать различные значения для ширины и стиля верхней, правой, нижней или левой рамки элемента, используйте свойства: border-top, border-bottom, border-left, border-right, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, border-left-width.

Пример:

td { border: dotted}
table { border: green}


Свойство Width

Синтаксис: | width:<значение>
Возможные значения: | auto | линейный размер | проценты
Значение по умолчанию: | auto
Применяется: | к элементам уровня IMG, INPUT, TEXTAREA, SELECT, OBJECT

Свойство "width" позволяет задать ширину элемента. Для этого можно использовать ключевое слово auto, которое задано по умолчанию, значение в процентах по отношению к родительскому элементу, значение в абсолютных или относительных единицах измерения. Смотрите единицы измерения. Как правило, свойство width задается совместно со свойством height.

Пример:

img { width: 4em}
input { width: 8em}


Свойство Height

Синтаксис: | height:<значение>
Возможные значения: | auto | линейный размер
Значение по умолчанию: | auto
Применяется: | к элементам IMG, INPUT, TEXTAREA, SELECT, OBJECT

Свойство "height" позволяет задать высоту элемента. Для этого можно использовать ключевое слово auto, которое задано по умолчанию либо значение в абсолютных или относительных единицах измерения. Смотрите линейные размеры. Как правило, свойство height задается совместно со свойством width.

Пример:

img { width: 20px;
height:30px}
input { width: 8px;
height:20px}


Свойство Float

Синтаксис: | float:<значение>
Возможные значения: | left | right | none
Значение по умолчанию: | none
Применяется: | ко всем элементам

Свойство "float" позволяет задать выравнивание элемента. Для этого можно использовать ключевые слова none (задано по умолчанию), left (выравнивание элемента по левому краю страницы) и right (выравнивание элемента по правому краю страницы). Это свойство аналогично элементу языка гипертекстовой разметки - align.

Пример:

img { float: left}


Свойство Clear

Синтаксис: | float:<значение>
Возможные значения: | left | right | both | none
Значение по умолчанию: | none
Применяется: | ко всем элементам

Свойство "clear" позволяет задать обтекание элемента текстом. Для этого можно использовать ключевые слова none (задано по умолчанию), left (позволяет завершить обтекание текстом объекта, выровненного по левому краю страницы), right (позволяет завершить обтекание текстом объекта, выровненного по правому краю страницы) и both (позволяет завершить обтекание объекта текстом).

Пример:

P { clear: right}
h3 { clear: left}


Дополнительные свойства

  • Display
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style
  • Cursor


Свойство Display

Синтаксис: | display:<значение>
Возможные значения: | block | inline | list-item | none
Значение по умолчанию: | block
Применяется: | ко всем элементам

Свойство "display" позволяет задать отображение элемента на экране пользователя. Может принимать одно из четырех значений:
none - не отображать данный элемент
block - вставить символ "конец строки" до и после элемента
inline - не вставлять символ "конец строки" до и после элемента
list-item - аналогично значению "block" с той лишь разницей, что в начале каждой новой строки размещает маркер позиции.
Как правило, данное свойство не используется.

Пример:

P { display: inline}
b{ display: none}


Свойство List Style Type

Синтаксис: | list-style-type:<значение>
Возможные значения: | disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Значение по умолчанию: | disk
Применяется: | к элементам со свойством "display:list-item"

Свойство "list-style-type" позволяет задать тип маркера элемента, к которому применили свойство "display:list-item". Кроме стандартных маркеров можно указать свой рисунок - для этого используется свойство list-style-image

Пример:

li { list-style-type:square}
ol{ display: circle}


Свойство List Style Image

Синтаксис: | list-style-image:<значение>
Возможные значения: | none | url
Значение по умолчанию: | none
Применяется: | к элементам со свойством "display:list-item"

Свойство "list-style-image" позволяет задать рисунок в качестве маркера элемента, к которому применили свойство "display:list-item".

Пример:

li { list-style-image: url(image.gif)}
ol{ list-style-image: url(back.gif)}


Свойство List Style Position

Синтаксис: | list-style-position:<значение>
Возможные значения: | inside | outside
Значение по умолчанию: | outside
Применяется: | к элементам со свойством "display:list-item"

Свойство "list-style-position" определяет позицию маркера по отношению к элементам списка. Если задано значение outside (назначено по умолчанию), то маркер позиции располагается несколько левее элементов списка. Если указано значение "inside", то маркер позиции располагается внутри элементов списка.

Пример:

ol { list-style-position: inside}
ul{ list-style-position: outside }


Свойство List Style

Синтаксис: | list-style:<значение>
Возможные значения: | list-style-type | list-style-position | url
Значение по умолчанию: | не задано
Применяется: | к элементам со свойством "display:list-item"

Свойство "list-style" позволяет авторам задать позицию, стиль или изображение, которое будет выступать в качестве маркера.

Пример:

ol { list-style: inside url(image.gif)}
ul{ list-style: outside square}


Свойство Cursor

Синтаксис: | cursor:<значение>
Возможные значения: | all-scroll | auto | col-resize | crosshair | default | hand | help | move | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | e-resize | w-resize |url
Значение по умолчанию: | auto
Применяется: | ко всем элементам

Свойство "cursor" позволяет авторам задать форму курсора для какого-либо элемента языка гипертекстовой разметки. Значение url позволяет задать Ваш собственный курсор, указав файл с расширением *.cur или *.ani

Пример:

b { cursor: help }


Единицы измерения

  • Линейные размеры
  • Процнты
  • Задание цвета
  • Задание URL


Свойство Scrollbar-3dlight-color

Синтаксис: | scrollbar-3dlight-color:<значение>
Возможные значения: | color
Значение по умолчанию: | не задано
Применяется: | к элементам, которые имеют полосы прокрутки. (BODY, IFRAME, TEXTAREA...)

Свойство "scrollbar-3dlight-color" задает цвет верхней и левой части ползунка и кнопок со стрелками на полосе прокрутки. Задавать цвет Вы можете одним из двух способов - или указав английское название цвета (green, blue, black), или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов!

Пример:

body {scrollbar-3dlight-color: #0000FF }


Свойство Scrollbar-arrow-color

Синтаксис: | scrollbar-arrow-color:<значение>
Возможные значения: | color
Значение по умолчанию: | не задано
Применяется: | к элементам, которые имеют полосы прокрутки. (BODY, IFRAME, TEXTAREA...)

Свойство "scrollbar-arrow-color" устанавливает цвет стрелок на кнопках полосы прокрутки. Задавать цвет Вы можете одним из двух способов - или указав английское название цвета (green, blue, black), или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов!

Пример:

body {scrollbar-arrow-color: green }


Свойство Scrollbar-base-color

Синтаксис: | scrollbar-base-color:<значение>
Возможные значения: | color
Значение по умолчанию: | не задано
Применяется: | к элементам, которые имеют полосы прокрутки. (BODY, IFRAME, TEXTAREA...)

Свойство "scrollbar-base-color" устанавливает цвет основных элементов полосы прокрутки: ползунка, кнопок со стрелками, дорожки для ползунка. Применяется в том случае, если не указано свойство scrollbar-face-color. Задавать цвет Вы можете одним из двух способов - или указав английское название цвета (green, blue, black), или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов!

Пример:

body {scrollbar-base-color: #F0E68C }


Свойство Scrollbar-darkshadow-color

Синтаксис: | scrollbar-darkshadow-color:<значение>
Возможные значения: | color
Значение по умолчанию: | не задано
Применяется: | к элементам, которые имеют полосы прокрутки. (BODY, IFRAME, TEXTAREA...)

Свойство "scrollbar-darkshadow-color" устанавливает цвет правой и нижней части ползунка и кнопок со стрелками на полосе прокрутки. Задавать цвет Вы можете одним из двух способов - или указав английское название цвета (green, blue, black), или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов!

Пример:

body {scrollbar-darkshadow-color: #F0E68C }


Свойство Scrollbar-face-color

Синтаксис: | scrollbar-face-color:<значение>
Возможные значения: | color
Значение по умолчанию: | не задано
Применяется: | к элементам, которые имеют полосы прокрутки. (BODY, IFRAME, TEXTAREA...)

Свойство "scrollbar-face-color" устанавливает цвет основных элементов полосы прокрутки: ползунка, кнопок со стрелками, дорожки для ползунка. Задавать цвет Вы можете одним из двух способов - или указав английское название цвета (green, blue, black), или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов!

Пример:

body {scrollbar-face-color: #f0E68C }


Свойство Scrollbar-highlight-color

Синтаксис: | scrollbar-highlight-color:<значение>
Возможные значения: | color
Значение по умолчанию: | не задано
Применяется: | к элементам, которые имеют полосы прокрутки. (BODY, IFRAME, TEXTAREA...)

Свойство "scrollbar-highlight-color" устанавливает цвет подсветки кнопок полосы прокрутки, создавая тем самым эффект объёмности. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ними, когда нажата - нижний правый угол. Задавать цвет Вы можете одним из двух способов - или указав английское название цвета (green, blue, black), или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов!

Пример:

body {scrollbar-highlight-color: #F0E68C }


Свойство Scrollbar-shadow-color

Синтаксис: | scrollbar-shadow-color:<значение>
Возможные значения: | color
Значение по умолчанию: | не задано
Применяется: | к элементам, которые имеют полосы прокрутки. (BODY, IFRAME, TEXTAREA...)

Свойство "scrollbar-shadow-color" устанавливает цвет правой и нижней части ползунка и кнопок со стрелками на полосе прокрутки. Задавать цвет Вы можете одним из двух способов - или указав английское название цвета (green, blue, black), или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов!

Пример:

body {scrollbar-shadow-color: #F0E68C }


Свойство Scrollbar-track-color

Синтаксис: | scrollbar-track-color:<значение>
Возможные значения: | color
Значение по умолчанию: | не задано
Применяется: | к элементам, которые имеют полосы прокрутки. (BODY, IFRAME, TEXTAREA...)

Свойство "scrollbar-track-color" устанавливает цвет дорожки полосы прокрутки. Задавать цвет Вы можете одним из двух способов - или указав английское название цвета (green, blue, black), или его шестнадцатеричное значение в системе RGB (red-green-blue). Смотрите таблицу базовых цветов!

Пример:

body {scrollbar-track-color: #DEB887 }


Свойства полосы прокрутки

  • scrollbar-3dlight-color
  • scrollbar-arrow-color
  • scrollbar-base-color
  • scrollbar-darkshadow-color
  • scrollbar-face-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-track-color


Единицы измерения

Линейные размеры

В каскадных таблицах стилей существуют абсолютные и относительные единицы измерения. Относительные единицы измерения позволяют задать размер элемента относительно родительского элемента. При создании страниц использование относительных единиц измерения более предпочтительно. К относительным единицам измерения относятся:

em (ems - задается относительно высоты шрифта элемента);
ex (x-height, задается относительно высоты строчной буквы "x");
px (pixels, задается относительно разрешающей способности монитора).

Абсолютные единицы измерения достаточно сильно зависят от тех настроек, которые установлены на компьютере пользователя. Именно поэтому их использовать необходимо с большой осторожностью. Ниже перечислены доступные в каскадных таблицах стилей абсолютные единицы измерения:

in (inches, дюймы - 1in=2.54cm);
cm (centimeters, сантиметры - 1cm=10mm);
mm (millimeters, миллиметры);
pt (points, типографский пункт -1pt=1/72in);
pc (picas, пика - 1pc=12pt).

Обозначение единицы измерения необходимо ставить сразу же после цифры - без каких-либо пробелов!
Правильно: 2em 5em 10px
Не правильно: 2 em 5 em 10 px!!!

Проценты

В каскадных таблицах стилей размер элементов можно задавать в процентах. В этом случае размер элемента задается относительно родительского элемента. При создании страниц использование относительных единиц измерения более предпочтительно чем абсолютных.

Знак процента (%) необходимо ставить сразу же после цифры - без каких-либо пробелов!
Правильно: 2% 5% 10%
Не правильно: 2 % 5 % 10 %!!!

Использование CSS Содержание Свойства CSS

Copyright © 2004 Воробьев Ярослав.
e-mail: system1991@yandex.ru
All rights reserved.

Разработчик сайта - Воробьёв Ярослав Анатольевич. e-mail: system1991@yandex.ru
У Вас есть документация, которой нет в нашей библиотеке? Присылайте!
Free submission to 110 search engines!


Линейные размеры

В каскадных таблицах стилей существуют абсолютные и относительные единицы измерения. Относительные единицы измерения позволяют задать размер элемента относительно родительского элемента. При создании страниц использование относительных единиц измерения более предпочтительно. К относительным единицам измерения относятся:

em (ems - задается относительно высоты шрифта элемента);
ex (x-height, задается относительно высоты строчной буквы "x");
px (pixels, задается относительно разрешающей способности монитора).

Абсолютные единицы измерения достаточно сильно зависят от тех настроек, которые установлены на компьютере пользователя. Именно поэтому их использовать необходимо с большой осторожностью. Ниже перечислены доступные в каскадных таблицах стилей абсолютные единицы измерения:

in (inches, дюймы - 1in=2.54cm);
cm (centimeters, сантиметры - 1cm=10mm);
mm (millimeters, миллиметры);
pt (points, типографский пункт -1pt=1/72in);
pc (picas, пика - 1pc=12pt).

Обозначение единицы измерения необходимо ставить сразу же после цифры - без каких-либо пробелов!
Правильно: 2em 5em 10px
Не правильно: 2 em 5 em 10 px!!!


Проценты

В каскадных таблицах стилей размер элементов можно задавать в процентах. В этом случае размер элемента задается относительно родительского элемента. При создании страниц использование относительных единиц измерения более предпочтительно чем абсолютных.

Знак процента (%) необходимо ставить сразу же после цифры - без каких-либо пробелов!
Правильно: 2% 5% 10%
Не правильно: 2 % 5 % 10 %!!!


URL

URL - универсальный указатель ресурса. Путь к файлу может указываться либо абсолютный, либо относительный. Если необходимо загрузить рисунок с другого сайта (например, баннер), то нужно указывать абсолютный адрес - полный путь к месторасположению данного файла. Если файл с изображением располагается в том же каталоге, что и *.html файл, то можно указывать относительный путь - только название этого файла.

url(http://host.domain/image.jpg) - абсолютный адрес
url(image.jpg) - относительный адрес

Универсальный указатель ресурса можно задавать без кавычек, заключать в одинарные кавычки (') или в двойные кавычки ("). Между "url" и скобкой не должно быть пробелов!

Примеры:

body { background: url(image.gif) }
body { background: url(http://books-it.narod.ru/gif/back.gif) }