Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

Целые и вещественные числа

Значения свойств могут быть целыми (обозначаемые типом "integer") и вещественными (обозначаемые типом "number"). Целые и вещественные числа представлены в десятичной системе исчисления. Целые числа состоят из одной или более цифр (0-9), вещественные же числа могут быть написаны по типу integer или содержать ноль или более цифр после точки. Перед обоими типами чисел могут находиться знаки "+" и "-". Хотя свойства и поддерживают в качестве значений вещественные и целые числа, но большинство из них должно иметь только положительные значения. Хотя свойства и поддерживают в качестве значений вещественные и целые числа, но большинство из них должно иметь только положительные значения.

Длинна

Значение длинны определяет горизонтальное или вертикальное измерение. Формат значения длинны, используемый в данной спецификации обозначается как "length", который может быть записан со знаком "+" или "-", по умолчанию значение "length" указывается положительным, значение может записано в качестве вещественного числа, за которым немедленно следует идентификатор (например, - px, deg и тд.). После установления значения равного нулю указывать идентификатор необязательно.

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

Единицы измерения длинны могут быть двух типов: относительные и абсолютные.

Относительные единицы измерения

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

  1. em: для свойства "font-size".
  2. ex: для свойства "x-height".
  3. px: для многих свойств.
Примеры
  1.H1 { margin: 0.5em } /* em */
  2.H1 { margin: 1ex } /* ex */
  3.P { font-size: 12px } /* px */

Единицы "em" равны вычисленному значению свойства "font-size" для элемента в отношении, которого используется указное свойство. Исключение - единицы "em" могут устанавливаться относительно свойства "font-size" родительского элемента.

Единицы "ex" определяют свойство "x-height" для шрифтов. Свойство "x-height" называется так, поскольку оно соответствует высоте буквы "x" в нижнем регистре. Свойство редко применяется для установки размера шрифта, поскольку наиболее распространенными единицами являются em и px.

Пример:

  1.H1 { line-height: 1.2em }

Данное правило означает, что высота линии элемента H1 будет больше на 20% чем размер шрифта для данного элемента. С другой стороны

  1.H1 { font-size: 1.2em }
правило означает, что размер шрифта для элемента H1 будет на 20% больше чем унаследованный шрифт данного элемента (шрифт элемента по умолчанию).

Когда определен корневой элемент документа (например, HTML) единицы измерения, например "em" и "ex" зависят от его изначального значения, за исключением единиц измерения, выраженных в пикселях, данные единицы (пиксели) зависят от разрешения монитора.

При определении величин измерения следует помнить, что дочерние элементы не наследуют значения родительских элементов, они, как правило, наследуют вычисленное значение (вычисленное значение – это относительное значение, которое является зависимым от величин других значений, вычисленными значениями могут быть, например, единицы em, %. Для того чтобы его получить CSS2 производит соответствующие вычисления с использованием значений других элементов). В следующем примере вычисляемое значение "text-indent" элемента H1 будет 36pt, а не 45pt, если элемент H1 является дочерним элементом для его родительского элемента BODY.

  1.BODY {
  2.font-size: 12pt;
  3.text-indent: 3em; /* i.e., 36pt */
  4.}
  5.H1 { font-size: 15pt }
  6.

Абсолютные единицы

Абсолютные единицы измерения необходимо применять в том случае, если заранее известны размеры элементов. Данное значение не зависит от других величин, поэтому называется абсолютным. Абсолютными единицами являются:

  1. in – дюймы, 1 дюйм равняется 2,54 см;
  2. cm – сантиметры;
  3. mm – миллиметры;
  4. pt – точка, точка соответствует 1/72 дюйма;
  5. pc – пики, 1 пика равна 12 точкам;

Пример

  1.H1 { margin: 0.5in } /* дюймы */
  2.H2 { line-height: 3cm } /* сантиметры */
  3.H3 { word-spacing: 4mm } /* миллиметры */
  4.H4 { font-size: 12pt } /* точки */
  5.H4 { font-size: 1pc } /* пики */
  6.
  7.
В случае, если указанные величины измерения длинны не поддерживаются браузером, последний должен применить наиболее подходящее поддерживаемое значение.

Проценты

Значение выраженное в формате процентов может сопровождаться необязательными знаками "+" и "-", располагающимися перед значением, выраженным в виде числа и знаком процентов (%). Значение процентов всегда является относительным по отношению к другому значению, например, значению длинны, размеру шрифта. Каждое свойство, которое допускает проценты в качестве своего значения, зависит от другого значения. Им может быть значение другого свойства для определенного элемента, значение свойства родительского элемента или значение используемое в контексте (например, значение ширины блока).

Когда проценты используются в качестве значения свойства корневого элемента и относятся к наследуемому значению некоторого свойства, получаемое в результате этого значение процентов основывается на изначальном значения свойства. Так как дочерние элементы наследуют вычисленное значение их родительского элемента, поэтому в следующем примере дочерний элемент, для элемента P будет иметь значение равное 12pt для свойства "line-height", а не значение, выраженное в процентах.

  1.P { font-size: 10pt }
  2.P { line-height: 120% } /* 120% of ’font-size’ */

URL

URL (унифицированный указатель) определяет адрес ресурса в интернете. Новое средство определяющее ресурс названо URN (унифицированное имя ресурса). Вместе они составляют понятие URiS (унифицированный идентификатор ресурса). В CSS спецификации используется именно термин URiS.

Значение Uri в CSS спецификации обозначается через <uri>. Однако для его установки необходимо использовать "url()", например:

  1.BODY { background: url("http://www.bg.com/pinkish.gif") }

Формат значения Uri следующий: "url(" далее может следовать пробел, после чего могут следовать одинарные или двойные кавычки, после них собственно сам URI, после этого могут быть указаны одинарные или двойные кавычки, если таковые были установлены ранее, после них может быть установлен необязательный пробел. Кавычки должны соответствовать друг другу.

Пример:

  1.LI { list-style: url(http://www.redballs.com/redball.png) disc }

Круглые скобки, запятые, символ пробела, дойные и одинарные кавычки, используемые в нутрии Url должны быть экранированы, то есть сопровождаться обратным слешем "\".

В зависимости от типа Url, указанные знаки могут быть заменены специальными символами (например "("=%28, ")"=%29 и т.д.).

Спецификация CSS2 позволяет использовать вместо абсолютного значения Url относительное значение. Относительное значение зависит от базового значения для всего стиля.

Например, при использовании следующего правила:

  1.BODY { background: url("yellow") }

и при условии, что базовый Url для всего стиля будет:

  1.http://www.myorg.org/style/basic.css

фон элемента BODY будет определен изображением, расположенным по адресу:

  1.http://www.myorg.org/style/yellow

Цвета в CSS

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

Список ключевых слов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, и yellow. Указанные 16 ключевых слов соответствуют спецификации HTML 4.0.

Black = #000000 Green = #008000
Silver#C0C0C0 Lime = #00FF00
Gray = #808080 Olive = #808000
white = #FFFFFF Yellow = #FFFF00
Maroon = #800000 Navy = #000080
Red#FF0000 Blue = #0000FF
Purple = #800080 Teal = #008080
Fuchsia = #FF00FF Aqua = #00FFFF

Пример:

  1.BODY {color: black; background: white }
  2.H1 { color: maroon }
  3.H2 { color: olive }

На страницах интернета распространена следующая таблица цветов в формате rgb:

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

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

ActiveBorder Цвет рамки активного окна.
ActiveCaption Цвет активного заголовка окна.
AppWorkspace Background color of multiple document interface.
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 Цвет текст окна

Пример устанавливает такой же цвет параграфа и цвет текста как фоновый цвет окна пользователя и цвет текста этого окна

  1.P { color: WindowText; background-color: Window }

Цветовая модель в формате RGB использует числа для указания значения свойства. Во всех следующих примерах устанавливается один и тот же цвет:

  1.EM { color: #f00 } /* #rgb */
  2.EM { color: #ff0000 } /* #rrggbb */
  3.EM { color: rgb(255,0,0) } /* целое число от 0 - 255 */
  4.EM { color: rgb(100%, 0%, 0%) } /* число с плавающей точкой от 0.0% - 100.0% */

Формат значение RGB в шестнадцатеричной системе исчисления записывается с помощью знака "#" и немедленно следующих за ним трёх или шести символов. Если Вы укажете три знака в формате RGB, то они автоматически конвертируются в шесть знаков путём дублирования каждого из трёх знаков (например #rgb конвертируется в #rrggbb или #fb0 увеличится до #ffbb00).

Значение в формате RGB может быт записано с использованием списка, начинающегося с "rgb(", после чего следуют три, разделенных запятой значения в виде простого числа или процентного значения и завершающегося ")". Целое число равное 255 соответствует 100 % или F(FF) в шестнадцатеричной системе исчисления (rgb(255,255,255) = rgb(100%,100%,100%) = #FFF). Спецификация CSS допускает вокруг данных значений использовать пробел.

Соответствующие браузеры могут ограничивать цветовые оттенки. Однако, браузеры должны корректировать цвета определенные в соответствие с CSS2 в сочетании с возможностями внешнего устройства.

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

Значения, выходящие за пределы допустимых значений, сокращаются до максимально допустимого значения. Для типичного ЭЛТ монитора, гамма которого соответствует стандарту sRGB, нижеприведенные примеры равнозначны:

  1.EM { color: rgb(255,0,0) }
  2.EM { color: rgb(300,0,0) } /* сокращается до rgb(255,0,0) */
  3.EM { color: rgb(255,-10,0) } /* сокращается до rgb(255,0,0) */
  4.EM { color: rgb(110%, 0%, 0%) } /* сокращается до rgb(100%,0%,0%) */

Другие внешние устройства, например принтер, имеют другие характеристики цветовой расцветки. Одни цвета находящихся за пределами границ от 0…255, согласно стандарту sRGB могут поддерживаться внешними устройствами, другие же, хотя и находятся в пределах границ от 0 до 255, не могут поддерживаться внешними устройствами.

Несмотря на то, что большинство цветов улучшает внешнее представление документа, не следует забывать, что некоторые цвета не воспринимаются людьми, имеющими некоторые заболевания глаз. Поэтому в спецификации CSS2 настоятельно рекомендуется согласовывать цвет фона и цвет.

Единицы измерения углов

Значение углов (в CSS спецификации обозначается как <angels>) применяется совместно с использованием правил CSS для слепых и слабовидящих, о чём подробно описывается в разделе "Таблицы стилей для прослушивания".

Формат записи значения выраженного в углах, сопровождается необязательными знаками + или -, при этом по умолчанию установлен знак +, после чего немедленно следует идентификатор единиц измерения углов. Единицы измерения углов:

  1. deg: градусы
  2. grad: grads
  3. rad: радианы

Единицы измерения углов могут быть отрицательными. Однако они должны соответствовать диапазону от 0 до 360. Поэтому, значения -10deg и 350deg одинаковы. К примеру, правый угол соответствует значениям 90deg или 100 grad или 1.570796326794897rad.

Единицы времени

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

  1. ms: миллисекунды
  2. s: секунды

Значение времени любого типа не может быть отрицательным.

Частоты

Значение, выраженное в частотах, используется в таблицах стилей, рассчитанных для слепых или слабовидящих, при озвучивании содержимого элемента.

Значение состоит из числа и идентификатора, обозначающего частоту. К значениям частот относят:

  1. Hz: герц
  2. kHz: килогерц
Данные значения не могут быть отрицательными. К примеру, 200Hz (или 200hz) соответствуют басу, а 6Hz дисконту.

Строки

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

Примеры:

  1."this is a "'string'"
  2."this is a \"string\""
  3.'this is a "string"'
  4.'this is a \'string\''
  5.

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

Переход строк может использоваться, к примеру, в свойстве "content". Указанные правила позволят Вам безошибочно разделять одну строку на несколько строк, например по эстетическим или другим причинам, однако в таком случае строка должна содержать внутри себя обратный слеш. К примеру, две нижеуказанных строки CSS кода одинаковы:

  1.A[TITLE="a not s\
  2.o very long title"] {/*...*/}
  3.A[TITLE="a not so very long title"] {/*...*/}


Александр Ермаков. Хостинг - www.pwstudio.org