Справочник свойств css

Владение на профессиональном уровне каскадными таблицами стилей (CSS) озна- чает знание того, как использовать огромное количество свойств CSS, которые управляют внешним видом текста, изображений, таблиц и форм. Чтобы помочь вам в ваших поисках, я собрал в этом приложении свойства и их значения, которые вы будете использовать для создания собственных стилей. Этот список охватывает практически все стандартные свойства CSS 2.1 — те, которые поддерживает боль- шинство браузеров, а также ряд наиболее полезных и поддерживаемых браузерами свойств CSS3.

ПРИМЕЧАНИЕ Самая последняя CSS-спецификация имеет довольно большой объем. Фактически, чтобы лучше справиться с разрастанием CSS, консорциум W3C разбил CSS на множество модулей — каждый модуль описывает конкретное свойство или набор родственных свойств. Чтобы получить полную информацию из первых рук, просмотрите самые последние спецификации CSS от World Wide Web Consortium по адресу www.w3.org/Style/CSS/current-work.

Значения css

У каждого свойства CSS есть соответствующее ему значение. Свойство color, которое форматирует цвет шрифта, требует установки значения, чтобы определить, какой цвет вы хотите использовать. Свойство color: #FFF; задает белый текст. Разные свойства требуют указания различных значений, каждое из которых относится к одной из четырех основных категорий: цвета, размеры, ключевые слова и адреса URL. Цвета Вы можете назначать цвета многим свойствам, включая свойства для шрифта, фона и границ. CSS предоставляет несколько различных способов определения цвета. Ключевые слова. Ключевое слово, обозначающее цвет, — это просто название цвета, например white или black (белый или черный). В настоящее время суще- ствует 17 признанных ключевых слов, обозначающих цвета: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white и yellow. Некоторые браузеры принимают больше ключевых слов, а CSS3 обещает предложить их еще больше в будущем http://www.w3.org/TR/css3-color

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

Hex-значения. Это метод, обычно используемый в Сети для идентификации цвета. Hex-значения цветов состоят из трех двухсимвольных чисел в шестнадцатеричной (то есть с основанием 16) системе счисления. #FF0033 представляет RGB-значение, составленное из красного (FF, что равняется 255 в десятичной системе счисления), зеленого (00) и синего (33). Символ # указывает CSS, что впереди следует ожидать шестнадцатеричное число, и является обязательным. Если вы пропустите #, браузер не отобразит нужный цвет. СОВЕТ Если во всех трех значениях цифры повторяются, можно сократить Hex-значение, используя только первое число каждой пары. Например, #361 означает то же самое, что и #336611.  Проценты RGB. Вы также можете определить цвет, используя значения в процентах, например: rgb (100%, 0%, 33%). Вы можете получить эти числа из программ редактирования изображений и дизайна, которые могут определять цвета, используя проценты.  Целочисленные значения. И наконец, для задания RGB-цвета можно использовать целочисленные значения. Формат такой же, как и для процентных значений, но для указания каждого цвета применяется число от 0 до 255: rgb (255, 0, 33).

RGBA. RGBA добавляет к смешанным цветам прозрачность. То есть можно сделать цвет, через который просматриваются расположенные ниже фоновые цвета, изображения или текст. Последним к цвету RGB добавляется значение от 0 (полная невидимость) до 1 (полная непрозрачность). Для задания цветовых составляющих можно использовать либо процентные, либо десятичные значения, а для прозрачности можно применять только десятичные значения. Например, оба следующих объявления создают светло-серый цвет, с 50-процентной прозрачностью: rgba(50%,50%,50%,.5) rgba(122,122,122,.5) 

HSL означает hue — тон, saturation — насыщенность и lightness — осветленность (последняя буква иногда расшифровывается как luminance — светимость). Это еще один способ задания цвета. Он не поддерживается в InternetExplorer 8 и более ранних версиях, но работает во всех остальных браузерах. Если вы привыкли использовать RGB- или Hex-цвета, синтаксис HSL может показаться немного непривычным. Вот как выглядит задание ярко-красного цвета: hsl(0, 100%, 50%); Первое число (hue) является углом от 0 до 360°, представляющим цветовой спектр на круге оттенков, где и 0, и 360° представляют красный, а 180° — зеленый цвет. Второе число задает насыщенность, или степень чистоты цвета, и выражается процентами от 0 (тусклый серый цвет) до 100 % (яркий и живой цвет). Последнее значение задает осветленность и также выражается процентами от 0 (полностью черный цвет) до 100 % (полностью белый цвет). Как и у RGB- цвета, существует версия HSL, поддерживающая прозрачность. Она называется HSLA: hsla(0, 100%, 50%, .5). Неважно, какой метод вы используете, — все они работают. Для последовательности вы должны выбрать один способ определения RGB-значения и придерживаться этого способа. Но проще и удобнее может быть применение ключевых слов, например white и black. В операционных системах Windows и Mac есть средства выбора цвета, которые позволяют подобрать идеально подходящий цвет из всей палитры цветов, а затем показывают вам его RGB-значение. В качестве альтернативы можно применять бесплатное средство выбора цвета с сайта www.ficml.org/jemimap/style/color/wheel.html или более совершенное средство, позволяющее создавать и сохранять палитру цветов, которое находится на сайте http://kuler.adobe.com.