Общие сведения

CSS (Cascading Style Sheets — каскадные таблицы стилей) – одна из базовых технологий в современном Интернете. Нечасто можно встретить сайт, свёрстанный без примененения CSS.

CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.

Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением «.css», либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа (см. Включение CSS в HTML документ).

Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.

Посмотрим на фрагмент XHTML-документа:

<h1>Сказка про Красную Шапочку</h1>
<p>Жила однажды в далекой деревушке маленькая прелестная девочка. …</p>

Из служебной XHTML разметки мы видим только элемент заголовка h1 и абзаца p, и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:

/* оформляем заголовки: */
h1 {
  color: red;
  background-color: yellow;
  font: Tahoma 2em;
}
/* оформляем абзацы текста: */
p {
  color: grey;
  line-height: 150%;
}

Включение CSS в HTML документ

Для того, чтобы применить таблицу стилей к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:

  • применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента link
  • встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style
  • применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style

Разберём эти способы подробнее.

Внешние стили (external style sheets)

Применяются с помощью элемента link, который должен располагаться внутри элемента head и нигде более.

<link rel=”stylesheet” type=text/css” href=”mystyle.css” media=”all” />

Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций.

Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link.

Таблицы стилей документа (document style sheets)

Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).

CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:

<style type=text/css”>
...
</style>

Сам тег style (в отличие от link) может находиться в любой части документа, но обычно его размещают внутри элемента head. Стили, подставляемые в строку (inline styles)

Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):

<p style=color: red”>Я абзац, выделенный красным цветом, других таких на сайте нет</p>

Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body.

Внутри атрибута style можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются.

Замечание: избегайте использования вышеописанного способа. Inline-стили смешивают содержимое документа и его дизайн, в то время как идеологически более правильно отделять содержимое документа и информацию о его оформлении.

Синтаксис CSS

Все CSS-правила состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css-свойства и его значения.

Как обычно выглядит css-правило

Как это может выглядеть на практике? Вот три примера CSS-правил:

a {text-decoration: none;}
 
p.announce {border: 1px dashed black;} /* здесь селектор - p.announce */
 
p.note {
  display: block; /* да, объявлений может быть несколько */
  float: right;   /* и их не обязательно писать на одной строке */
}

Каждое правило начинается с селектора (по-русски – указателя), указывающего на те html-элементы, к которым мы собираемся применить css-правило.

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

Селекторы

Чтобы применить css-оформление к HTML-элементу или множеству элементов, обычно используются селекторы – специальные указатели на HTML-объекты, к которым мы планируем применить css-правило.

Вот три основных вида селекторов.

HTML селекторы

Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега <strong> селектором будет strong. Соответственно, для тега <h1> селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:

strong {font-weight: normal; color: red;}
h1 { font: bold 10pt verdana; }

Селекторы класса

«Класс» - это некое имя, строка, которое мы можем применить к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени класса. В качестве имени класса вы можете использовать практически любую строку. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса:

.myClass { font: bold 10pt verdana; } /* меняем шрифт для всех тегов с классом myClass */

ID селекторы (или идентификаторы)

Любой идентификатор (ID) – это некое имя, которое вы, так же, как и в случае с классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа:

#myObj { margin: 1em; } /* изменяем поля для элемента, у которого id=”myObj” */
span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */

Применение одного стиля к нескольким селекторам

Очень распространённая задача – применить один набор правил к нескольким разным селекторам. Это делается элементарно – достаточно перечислить селекторы через запятую:

Впоследствии оформление для селекторов можно переопределить индивидуально:

/* все параграфы и списки делаем красными, шрифтом Tahoma */
p, li, ul, ol {color:red; font-face: Tahoma, sans-serif;}
/* переопределяем цвет на синий для нумерованных списков */
ol {color: blue;}

Селекторы, зависящие от контекста

Мы научились устанавливать стили для элементов HTML независимо от того, где именно в документе они расположены. Но CSS чуть гибче, чем кажется. Мы можем «прицеливаться» точнее и определять стили для элементов в зависимости от контекста (англ. Contextual Selectors).

Вот, посмотрите:

/* все ссылки, находящиеся внутри списков, станут красными: */
li a {color: red;}
/* все ссылки в параграфах, находящихся внутри таблиц, станут зелеными: */
table p a {color: green;}

Это самый распространённый метод создания контекстуальных селекторов, который называется «селектором потомков». Разберём его подробнее.

Селекторы потомков

«Потомками» элемента HTML называются любые вложенные в него элементы: это его «дети» (то есть непосредственно вложенные), дети его детей, и так далее, вглубь иерархии тегов.

Правильно используя селекторы, мы можем прицельно применить CSS стили к нужным элементам, сославшись на их родительский элемент. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их пробелом.

В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы A) вложенные в списки (элементы LI), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).

Селекторы детей

«Детьми» или «дочерними элементами» элемента HTML называются непосредственно вложенные в него элементы, он для них является «родительским» элементом. Элементы, находящиеся на 2-м и более глубоких уровнях вложенности, «детьми» не являются – это дети детей, то есть «потомки» (см. предыдущий раздел).

CSS позволяет нам создать селектор для выбора дочерних элементов любого элемента и изменить их свойства, применив CSS стили. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их знаком >.

В приведённом примере мы находим все элементы B, вложенные непосредственно в элементы I, и выключаем для них полужирный шрифт. Все остальные элементы B в документе останутся без изменений.

Селекторы смежных элементов (Adjacent Sibling Selectors)

Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки H1, следующие за параграфами P, и изменить их верхний отступ, мы напишем следующее правило CSS:

Важно: будет выбран только первый (!) заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой элемент, хоть один (даже если это) – то селектор не сработает и правило не применится.

Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.

Обзор свойств CSS

Справочник опирается на актуальную сейчас спецификацию CSS 2.1, соответственно, приведенный ниже список css-свойств ограничен рамками спецификации.

Основные свойства

Список базовых свойств, которые должен знать даже начинающий веб-мастер:

margin, padding, border, background-color, color, font-family, font-size, float

Фон

background

  Сокращенный вариант записи для свойств background-color, background-image, background-repeat, background-attachment и background-position.

background-attachment

  Устанавливает, должна ли фоновая картинка скролиться или должна быть зафиксирована в окне браузера.

background-color

  Устанавливает цвет фона для элемента.

background-image

  Устанавливает фоновую картинку для элемента.

background-position

  Устанавливает первоначальное положение для фоновой картинки.

background-repeat

  Управляет циклическим повторением фоновой картинки.

Рамка (граница, бордюр)

Влияют на все четыре рамки

border

  Краткий вариант записи для свойств border-width, border-style и border-color. Влияет на все четыре границы элемента.

border-color

  Устанавливает цвет рамки со всех сторон элемента.

border-width

  Устанавливает толщину рамки со всех сторон элемента.

border-style

  Определяет стиль оформления рамки вокруг элемента.

border-collapse

  Указывает ячейкам таблицы, иметь ли собственный бордюр или общий с соседней ячейкой.

border-spacing

  Устанавливает расстояние между ячейками таблицы.

Верхняя рамка

border-top

  Краткий вариант доступа к свойствам border-top-width, border-top-style и border-top-color.

border-top-color

  Устанавливает цвет верхнего бордюра.

border-top-style

  Устанавливает стиль линии верхнего бордюра.

border-top-width

  Устанавливает ширину верхнего бордюра.

Нижняя рамка

border-bottom

  Краткий вариант доступа к свойствам border-bottom-width, border-bottom-style и border-bottom-color.

border-bottom-color

  Устанавливает цвет нижнего бордюра.

border-bottom-style

  Устанавливает стиль линии нижнего бордюра.

border-bottom-width

  Устанавливает ширину нижнего бордюра.

Левая рамка

border-left

  Краткий вариант доступа к свойствам border-left-width, border-left-style and border-left-color.

border-left-color

  Устанавливает цвет левого бордюра.

border-left-style

  Устанавливает стиль линии левого бордюра.

border-left-width

  Устанавливает ширину левого бордюра.

Правая рамка

border-right

  Краткий вариант доступа к свойствам volume, border-right-style и border-right-color.

border-right-color

  Устанавливает цвет правого бордюра.

border-right-style

  Устанавливает стиль линии правого бордюра.

volume

  Устанавливает ширину правого бордюра.

Шрифт

font

  Краткий вариант записи свойств font-style, font-variant, font-weight, font-size, line-height и font-family.

font-family

  Определяет шрифт(ы) для отображения текста.

font-size

  Управляет размером шрифта.

font-style

  Управляет наклоном шрифта (курсив).

font-variant

  Управляет внешним видом строчных букв (строчные как прописные, "капитель").

font-weight

  Управляет толщиной (насыщенностью) шрифта.

Позиционирование

position

  Определяет порядок, в соответствии с которым элемент отображается на веб-странице.

bottom

  Сдвигает элемент относительно нижнего края. Используется совместно со свойством position.

left

  Сдвигает элемент относительно левого края. Используется совместно со свойством position.

page-break-before

  Сдвигает элемент относительно верхнего края. Используется совместно со свойством position.

right

  Сдвигает элемент относительно правого края. Используется совместно со свойством position.

z-index

  Определяет порядок, в соответствии с которым элементы накладываются друг на друга, если необходимо отобразить их на одном месте.

Форматирование

clear

  Запрещает/разрешает элементу обтекать "floated" объекты.

clip

  Определяет область элемента, которая должна отображаться на странице.

display

  Изменяет базовые свойства элементов.

float

  Сдвигает элемент к правому или левому краю.

height

  Определяет высоту прямоугольной области вокруг элемента.

overflow

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

visibility

  Управляет настройкой видимости элемента.

width

  Определяет ширину прямоугольной области вокруг элемента.

Списки

list-style

  позволяет одновременно задать три параметра для маркеров пунктов списка: list-style-type, list-style-position и/или list-style-image.

list-style-image

  Устанавливает изображение, которое будет использоваться для маркировки пунктов списка.

list-style-position

  Определяет, как отобразить на странице маркер пункта в списке: внутри того же прямоугольника, в котором располагается элемент списка или вне его.

list-style-type

  Определяет, какой вид будет иметь маркер пункта в списке..

Текст

direction

  Применяется при создании сайтов на языках, в которых чтение страницы идет справа налево.

letter-spacing

  Определяет длину интервала между буквами.

page-break-inside

  Определяет размер межстрочного интервала.

text-align

  Выравнивает содержимое блочного элемента (текст или изображение) относительно границ блока, а так же содержимое ячеек таблицы по горизонтали.

text-decoration

  Определяет, какой оформительский прием нужно применить к тексту.

text-indent

  Определяет размер отступа первой строки в тексте.

text-transform

  Управляет написанием прописных или строчных букв в тексте.

vertical-align

  Определяет высоту содержимого внутри инлайн элемента или внутри ячейки таблицы.

white-space

  Определяет как отображать пробелы, символы табуляции и пустой строки.

word-spacing

  Определяет расстояние между словами.

[collapse collapsed]

Печать

widows

  Позволяет избежать появления висячей строки.

orphans

  Позволяет избежать появления одинокой первой строки.

page-break-after

  Определяет наличие или отсутствие разрыва страницы после элемента при печати.

page-break-before

  Определяет наличие или отсутствие разрыва страницы перед элементом при печати.

page-break-inside

  Определяет наличие или отсутствие разрыва страницы внутри элемента при печати.

Поля

padding

  Сокращенный способ задать следующие параметры: padding-top, padding-right, padding-bottom и/или padding-left.

padding-bottom

  Определяет ширину пространства между содержимым элемента и нижним бордюром.

padding-left

  Определяет ширину пространства между содержимым элемента и левым бордюром.

padding-right

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

padding-top

  Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.

Прочее

caption-side

  Определяет, где будет отображаться заголовок таблицы: над ней или под ней.

color

  Устанавливает цвет текста элемента.

content

  Применяется для того, чтобы вставить текст или изображение до или после какого-либо элемента.

counter-increment

  Задает значения приращений счетчика.

counter-reset

  Устанавливает идентификатор, который хранит счетчик отображений какого-либо элемента и устанавливает начальное значение этого счетчика.

cursor

  Определяет вид курсора при наведении мышки на некий элемент.

empty-cells

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

margin

  Сокращенный способ задать следующие параметры: margin-top, margin-right, margin-bottom и/или margin-left

margin-bottom

  Определяет ширину внешнего пространства между нижним бордюром и невидимой границей прямоугольника.

margin-left

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

margin-right

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

margin-top

  Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.

max-height

  Определяет максимальную высоту элемента.

max-width

  Определяет максимальную ширину элемента.

min-height

  Определяет минимальную высоту элемента.

min-width

  Определяет минимальную ширину элемента.

outline

  Это быстрый способ задать следующие параметры: outline-width, outline-style и/или outline-color.

outline-color

  Определяет цвет контура вокруг элемента.

outline-style

  Определяет вид контура вокруг элемента.

outline-width

  Определяет ширину контура вокруг элемента.

quotes

  Определяет вид открывающей и закрывающей кавычки в тексте.

table-layout

  Определяет ширину столбцов в таблице.

Сокращённые свойства CSS

Некоторые свойства CSS принято называть сокращениями или сокращёнными свойствами (shorthand property). Они предоставляют короткий, компактный способ записи для нескольких других, более узкоспециализированных свойств. Например, сокращённое свойство border управляет внешним видом рамки вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину рамки. Иначе для этого понадобились бы свойства border-width, border-style и border-color. Список сокращённых свойств:

font - сокращенное свойство для свойств шрифта:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

background - сокращенный вариант записи для свойств фона:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

margin - сокращенное свойство для управления внешними отступами:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

padding - сокращенное свойство для управления внутренними отступами:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

border - сокращенный вариант записи для свойств бордюра:

  • border-width
  • border-style
  • border-color

Задание размеров (длина, ширина) в CSS

Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак «.» (точка).

Сразу после числа необходимо указать единицу измерения.

Существует множество единиц измерения.

em

  Ширина буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.

ex

  Высота буквы x в настоящем шрифте. Применяется аналогично em.

px

  Размер в пикселах.

in

  Размер в дюймах. Один дюйм = 2.54 сантиметра.

cm

  Размер в сантиметрах.

mm

  Размер в миллиметрах.

pt

  Размер в пунктах. Один пункт = 1/72 дюйма (в CSS 2.1).

pc

  Размер в пиках. (12 пунктов).

Примеры

body {margin: 1in}
table {padding: 1.5cm}
p {text-indent: -2pt}
img.logo {height: 12px}
p {text-indent: 3em}
blockquote {padding-bottom: 2ex}
table {border-width: 7.5pc}

Блочная модель (Box Model)

Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.

Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model («блочная» или «коробочная» модель).

Предположим, мы имеем на входе:

<span>Какой-то контент</span>

В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны.

Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.

Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:

  • Собственно, содержимое элемента (контент)
  • Бордюр (рамка, англ. «border»)
  • Пространство между содержимым элемента и бордюром (англ. «padding»).
  • Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. «margin»).

Существует два типа элементов - блочные («block») и внутритекстовые («inline», можно называть как «встроенные»).

Блочные (block) элементы

Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже.

Inline- ("инлайн"-) элементы

Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.

Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу «block», а какой - к «inline». Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.

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

Приоритет в каскаде стилей (!important)

Объявление !important переводится на русский как !важно.

Если к паре свойство - значение приписать объявление !important, тогда это значение CSS-свойства получит максимальный приоритет в каскаде стилей. Проще говоря, это объявление сработает для элемента независимо от наличия других правил CSS для этого же элемента.

!important добавляется вот так:

Внимание! Очень распространённая ошибка – располагать !important после точки с запятой. Браузер игнорирует такие записи.

Задание цвета в CSS

CSS предлагает нам четыре удобных способа указать цвет.

  • По имени. Используются англоязычные названия цветов, например blue или red (см. Именованные цвета).
  • В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. Безопасные (browser-safe) цвета в CSS).
  • В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.
  • В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.

Пример

/* Несколько способов сделать параграфы зелеными: */
p {color: lime}
p {color: rgb(0,255,0)}
p {color: #0f0}
p {color: #00ff00}
p {color: rgb(0%, 100%, 0%)}

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

Именованные цвета

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

 Black  Navy
 Gray  Blue
 Silver  Aqua
 White  Green
 Red  Lime
 Fuchsia  Teal
 Maroon  Yellow
 Purple  Olive

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

Безопасные (browser-safe) цвета в CSS

Для получения любого оттенка применяются комбинации RGB-значений цвета, записанные в шестнадцатиричном формате(подробнее - см. Как задать цвет в CSS).

Приведенные ниже 216 цветов считаются «безопасными» (browser-safe). Это значит, что даже на старом мониторе в 256-цветном режиме они должны выглядеть ровно и красиво.

Для удобства я расположил «безопасные» цвета в три таблицы по 216 цветов, отсортированные по разным цветовым компонентам.

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

Подготовлено по материалам http://css.manual.ru

html/css.txt · Последние изменения: 21/04/2010 16:12 — dnaumov
CC Attribution-Noncommercial 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0