Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Не для новичков /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Введение в таблицы стилей - Программирование от RIN.RU
Введение в таблицы стилей



Типы данных CSS


Значения свойств CSS могут быть следующих типов.


Целые и действительные числа


Некоторые свойства могут иметь целые (далее обозначаются как <целое>) или действительные (далее обозначаются как <число>) значения. Эти значения могут записываться только в десятичной нотации. Целое число состоит из одной или более десятичных цифр 0-9. Действительное число либо является целым, либо состоит из нуля или более десятичных цифр, за которыми следует точка (.) и одна или более десятичных цифр. И перед целыми, и перед действительными числами может стоять знак: плюс (+) или минус (-). Примеры:


Целые числаДействительные числа
101101
-211.234567
1234567-.999



Размеры


Размеры (далее обозначаются как <размер>) указывают на вертикальный или горизонтальный размеры чего-либо. Размер задается как <число>, за которым следует единица измерения. Если размер равен 0, то единицу измерения можно не указывать.


Единицы измерения подразделяются на абсолютные и относительные. Абсолютные единицы измерения задают точный физический размер, а относительные - указывают размер относительно другого размера. Их описания сведены в следующие таблицы:
Абсолютные единицы измерения
inдюймы (1 дюйм = 2.54 см = 25.4 мм = 72 точки = 6 пик)
cmсантиметры (1 см = 10 мм = 0.39 дюйма = 2.36 пики = 28.35 точки)
mmмиллиметры (1 мм = 0.1 см = 0.039 дюйма = 0.24 пики = 2.84 точки)
ptточки (1 точка = 1/12 пики = 1/72 дюйма = 0.035 см = 0.35 мм)
pcпики (1 пика = 12 точек = 1/6 дюйма = 0.423 см = 4.23 мм)



Относительные единицы измерения
emразмер (font-size) соответствующего шрифта
exвысота строчных букв (x-height) соответствующего шрифта
pxпиксели (размер зависит от устройства отображения)



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


Единицы em и ex основываются на размере шрифта того элемента, к которому относится данная декларация. При этом em задает размер шрифта, т. е. размер его наибольшей буквы (обычно это буква "M", отсюда аббревиатура em), а ex - высоту строчных букв шрифта (обычно это высота буквы "x", отсюда английское название x-height и аббревиатура ex). С другой стороны, единица px основана на размере пикселя устройства отображения (обычно это дисплей). Пиксель - это точка дисплея и ее размер зависит как от физических размеров экрана, так и от его разрешения: пиксель на экране с разрешением 640x480 будет больше, чем на экране с разрешением 1280x1024. Примеры задания размеров:


H1 { margin: 0.5em }
H1 { text-indent: 1ex }
H3 { font-size: 12px }
H1 { margin: 0.5in }
H2 { line-height: 3cm }
H3 { word-spacing: 4mm }
H4 { font-size: 12pt }
H4 { font-size: 1pc }


Процентные значения


Процентные значения (далее обозначаются как <процент>) указывают на величину чего-либо в процентах от другой величины. Они задаются как <число>, за которым следует символ процента (%), например:


H1 { font-size: 120% }


Всюду, где CSS допускает использование процентных значений, в описании соответствующего свойства четко указывается, какая именно величина является основой для вычисления значения свойства в процентах.


URI


Этот тип значений (далее обозначаемый как ) задает ссылку на унифицированные идентификаторы ресурсов. URI задается в форме url(URI), например:


BODY { background: url(http://mysite.com/bg.gif) }


Текст внутри url() можно заключить в апострофы или кавычки - это ничего не изменит, например:


BODY { background: url("http://mysite.com/bg.gif") }


Цвета


Цветовые значения (далее обозначаются как <цвет>) могут задаваться либо шестнадцатеричным числом с префиксом "#" вида "#rrggbb", задающим RGB-код цвета, либо одним из 16-ти символических имен, приведенных в Таблице 1 CSS допускает использование краткой формы RGB-кодов вида "#rgb"; при этом краткая форма преобразуется в полную повторением цифр, а не добавлением нулей. Иными словами, код #FA1 соответствует полному коду #FFAA11. Кроме того, RGB-код цвета может быть задан конструкцией rgb(r,g,b), например, следующие декларации задают один и тот же красный цвет:


EM { color: red } /* название цвета */
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* целые в диапазоне 0 до 255 */
EM { color: rgb(100%,0%,0%) } /* действительные в диапазоне от 0.0% до 100.0% */


Примечание. Обозреватели Microscape дополнительно поддерживают имена цветов, перечисленные в Таблице 2, но мы рекомендуем использовать вместо них соответствующие шестнадцатеричные значения.


Помимо стандартных имен цветов CSS поддерживает названия системных цветов, предназначенных для использования в соответствии с графическим пользовательским интерфейсом операционных систем клиентов. Эти названия и их назначение приведены в следующей таблице (значения этих цветов, принятые по умолчанию в системе Windows, указаны в Таблице 3).


Системные цвета CSS
activeborderЦвет рамки активного окнаinactivecaptiontextЦвет текста заголовка неактивного окна
activecaptionЦвет фона заголовка активного окнаinfobackgroundЦвет фона подсказок (tooltips)
appworkspaceЦвет фона многооконной программыinfotextЦвет текста подсказок (tooltips)
backgroundЦвет фона системной подложки (desktop)menuЦвет фона меню
buttonfaceЦвет трехмерных кнопокmenutextЦвет текста меню
buttonhighlightЦвет выделенных трехмерных кнопокscrollbarЦвет фона полос прокрутки
buttonshadowЦвет тени трехмерных кнопокthreeddarkshadowТемная тень трехмерных элементов
buttontextЦвет текста трехмерных кнопокthreedfaceЦвет трехмерных элементов
captiontextЦвет текста заголовковthreedhighlightЦвет выделенных трехмерных элементов
graytextСерый цвет (для запрещенных элементов)threedlightshadowСветлая тень трехмерных элементов
highlightЦвет фона выделенных элементовthreedshadowТень трехмерных элементов
highlighttextЦвет текста выделенных элементовwindowЦвет фона окон
inactiveborderЦвет рамки неактивного окнаwindowframeЦвет фрейма окон
inactivecaptionЦвет фона заголовка неактивного окнаwindowtextЦвет текста в окнах



Строки


Текстовые строки (далее обозначаются как <строка>) могут быть заключены либо в кавычки, либо в апострофы. При этом если строка заключена в кавычки, для включения в нее символа кавычки нужно использовать форму \" или \22. Аналогично, если строка заключена в апострофы, для включения в нее символа апострофа нужно использовать форму \" или \27. Для включения в строку символа новой строки используется форма \A (код перевода строки в Unicode). Примеры текстовых строк:


"это "строка""
"это \"строка\""
"это "строка""
"это \"строка\""
"это строка,\A состоящая из двух строк"


Счетчики


Счетчики (далее обозначаются как <счетчик>) обозначаются идентификаторами. Для извлечения значения счетчика используются обозначения counter(идентификатор) или counter(идентификатор, стиль). По умолчанию стиль равен decimal. Для доступа ко всем счетчикам с данным именем используются обозначения counters(идентификатор, строка) или counters(идентификатор,строка, стиль). Последняя функция возвращает значения всех счетчиков с данным именем, существующих в данный момент, разделенных текстом строка.


Доступ к значению счетчиков возможен только из свойства content. Подробности см. в этом пункте


Угловые величины


Угловые величины (далее обозначаются как <угол>) используются в звуковых таблицах стилей для задания пространственных характеристик звука. Угол задается как <число>, за которым следует угловая единица измерения. Если угол равен 0, то единицу измерения можно не указывать. CSS поддерживает следующие единицы измерения углов:


degградусы
gradграды
radрадианы



Эти единицы соотносятся следующим образом: 90 градусов = 100 градов = 1.570796326794897 радиан. Примеры угловых величин:


H1 { azimuth: 45deg }
P { azimuth: -10deg }
H1 { elevation: 100grad }
P { elevation: 3.14rad }


Времена


Времена (далее обозначаются как <время>) используются в звуковых таблицах стилей для задания временных характеристик звука. Время задается как <число>, за которым следует единица измерения времени. Если время равно 0, то единицу измерения можно не указывать. CSS поддерживает следующие единицы измерения времени:


msмиллисекунды (1 мс = 0.001 с)
sсекунды (1с = 1000 мс)



Времена не могут быть отрицательными. Примеры:


H1 { pause-before: 1s }
P { pause: 20ms }


Частоты


Частоты (далее обозначаются как <частота>) используются в звуковых таблицах стилей для задания частотных характеристик звука. Частота задается как <число>, за которым следует единица измерения частоты. Если частота равна 0, то единицу измерения можно не указывать. CSS поддерживает следующие единицы измерения частот:


hzгерцы (1 Гц = 0.001 кГц)
khzкилогерцы (1 кГц = 1000 Гц)



Частоты не могут быть отрицательными. Примеры:


H1 { pitch: 200hz } /* басовый звук */
P { pitch: 6khz } /* дрожащий звук */


<<<  НазадВперед  >>>
 1  2  3  4 


 8  Комментарии к статье  8 8  Обсудить в чате

8  В тему

Селекторы, псевдоклассы и псевдоэлементы

Значения свойств, каскадность и наследование

Границы, заполнители и рамки

Позиционирование элементов

Визуализация элементов

Цвет и фон

Шрифты

Текст

Таблицы

Генерация содержимого, нумерация и списки

Страничные устройства вывода

Звуковые таблицы стилей

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь