Загрузка не удалась. Возможно, проблемы с правами доступа?

Различия

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

--- html:css [20/04/2010 11:12] – pdemenkov
+++ html:css [21/04/2010 17:12] (текущий) – dnaumov
@@ Строка 5: / Строка 5: @@
 CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.
-Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением ".css", либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа (см. Включение CSS в HTML документ).
+Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением «.css», либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа (см. Включение CSS в HTML документ).
 Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.
 Посмотрим на фрагмент XHTML-документа:
-<code>
+<code html>
 <h1>Сказка про Красную Шапочку</h1>
 <p>Жила однажды в далекой деревушке маленькая прелестная девочка. …</p>
 </code>
-Из служебной XHTML разметки мы видим только элемент заголовка h1  и абзаца p, и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:
+Из служебной XHTML разметки мы видим только элемент заголовка [[:html:tags:h|h1]]  и абзаца [[:html:tags:p|p]], и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:
-<code>
+<code css>
 /* оформляем заголовки: */
 h1 {
@@ Строка 34: / Строка 34: @@
 Для того, чтобы применить таблицу стилей  к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:
-    * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента link
+    * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента [[:html:tags:link|link]]
-    * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style
+    * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента [[:html:tags:style|style]]
     * применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style
@@ Строка 41: / Строка 41: @@
 ===== Внешние стили (external style sheets) =====
-Применяются с помощью элемента link, который должен располагаться внутри элемента head и нигде более.
+Применяются с помощью элемента link, который должен располагаться внутри элемента [[:html:tags:head|head]] и нигде более.
-<code>
+<code html>
 <link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”all” />
 </code>
@@ Строка 48: / Строка 48: @@
 Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций.
-Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link.
+Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом [[:html:tags:link|link]].
 ===== Таблицы стилей документа (document style sheets) =====
@@ Строка 54: / Строка 54: @@
 Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).
-CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:
+CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента [[:html:tags:style|style]]:
-<code>
+<code html>
 <style type=”text/css”>
 ...
@@ Строка 61: / Строка 61: @@
 </code>
-Сам тег style (в отличие от link) может находиться в любой части документа, но обычно его размещают внутри элемента head.
+Сам тег [[:html:tags:style|style]] (в отличие от [[:html:tags:link|link]]) может находиться в любой части документа, но обычно его размещают внутри элемента [[:html:tags:head|head]].
 Стили, подставляемые в строку (inline styles)
-Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):
+Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента [[:html:tags:style|style]]. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):
-<code>
+<code html>
 <p style=”color: red”>Я абзац, выделенный красным цветом, других таких на сайте нет</p>
 </code>
-Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body.
+Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента [[:html:tags:body|body]].
 Внутри атрибута style можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются.
@@ Строка 85: / Строка 85: @@
 Как это может выглядеть на практике? Вот три примера CSS-правил:
-<code>
+<code css>
 a {text-decoration: none;}
@@ Строка 107: / Строка 107: @@
 ===== HTML селекторы =====
-Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега <strong> селектором будет strong. Соответственно, для тега <code>
+Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить. Например, для тега [[:html:tags:strong|<strong>]] селектором будет strong. Соответственно, для тега [[:html:tags:h1|<h1>]] селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:
-<h1> селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:
+<code css>
 strong {font-weight: normal; color: red;}
 h1 { font: bold 10pt verdana; }
@@ Строка 119: / Строка 120: @@
 {{:html:css:selector_class.gif|}}
-<code>
+<code css>
 .myClass { font: bold 10pt verdana; } /* меняем шрифт для всех тегов с классом myClass */
 </code>
@@ Строка 129: / Строка 130: @@
 {{:html:css:selector_id.gif|}}
-<code>
+<code css>
 #myObj { margin: 1em; } /* изменяем поля для элемента, у которого id=”myObj” */
 span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */
@@ Строка 141: / Строка 142: @@
 Впоследствии оформление для селекторов можно переопределить индивидуально:
-<code>
+<code css>
 /* все параграфы и списки делаем красными, шрифтом Tahoma */
 p, li, ul, ol {color:red; font-face: Tahoma, sans-serif;}
@@ Строка 154: / Строка 155: @@
 Вот, посмотрите:
+<code css>
 /* все ссылки, находящиеся внутри списков, станут красными: */
 li a {color: red;}
 /* все ссылки в параграфах, находящихся внутри таблиц, станут зелеными: */
 table p a {color: green;}
+</code>
 Это самый распространённый метод создания контекстуальных селекторов, который называется «селектором потомков». Разберём его подробнее.
@@ Строка 170: / Строка 174: @@
 {{:html:css:selectors_descendant_0.gif|}}
-В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы A) вложенные в списки (элементы LI), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).
+В приведённом примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы [[:html:tags:a|A]]) вложенные в списки (элементы [[:html:tags:li|LI]]), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).
 ===== Селекторы детей =====
@@ Строка 180: / Строка 184: @@
 {{:html:css:selectors_child.gif|}}
-В приведённом примере мы находим все элементы B, вложенные непосредственно в элементы I, и выключаем для них полужирный шрифт. Все остальные элементы B в документе останутся без изменений.
+В приведённом примере мы находим все элементы [[:html:tags:b|B]], вложенные непосредственно в элементы [[:html:tags:i|I]], и выключаем для них полужирный шрифт. Все остальные элементы [[:html:tags:b|B]] в документе останутся без изменений.
 ===== Селекторы смежных элементов (Adjacent Sibling Selectors) =====
-Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки H1, следующие за параграфами P, и изменить их верхний отступ, мы напишем следующее правило CSS:
+Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки [[:html:tags:h1|H1]], следующие за параграфами [[:html:tags:p|P]], и изменить их верхний отступ, мы напишем следующее правило CSS:
 {{:html:css:selectors_adjacent.gif|}}
+<note important>
+**Важно:** будет выбран только первый (!) заголовок [[:html:tags:h1|H1]], расположенный непосредственно после [[:html:tags:p|P]]. Если между элементами [[:html:tags:p|P]] и [[:html:tags:h1|H1]] встретится любой элемент, хоть один (даже если это) – то селектор не сработает и правило не применится.
-Важно: будет выбран только первый (!) заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой элемент, хоть один (даже если это
+**Важно:** селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.
-) – то селектор не сработает и правило не применится.
+</note>
-Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.
 ====== Обзор свойств CSS ======
@@ Строка 484: / Строка 487: @@
     * 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 пунктов).
+Примеры
+<code css>
+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}
+</code>
+====== Блочная модель (Box Model) ======
+Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.
+Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model ("блочная" или "коробочная" модель).
+Предположим, мы имеем на входе:
+<code html>
+<span>Какой-то контент</span>
+</code>
+{{:html:css:box-model_explained.png|}}
+В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны.
+Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.
+Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:
+    * Собственно, содержимое элемента (контент)
+    * Бордюр (рамка, англ. "border")
+    * Пространство между содержимым элемента и бордюром (англ. "padding").
+    * Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. "margin").
+Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные").
+===== Блочные (block) элементы =====
+Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, [[html:tags:h1|h1]] является блочным элементом - всякий следующий за ним элемент будет отображен ниже.
+===== Inline- ("инлайн"-) элементы =====
+Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.
+Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1 заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.
+С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.
 ====== Приоритет в каскаде стилей (!important) ======
@@ Строка 502: / Строка 584: @@
 CSS предлагает нам четыре удобных способа указать цвет.
-    * По имени. Используются англоязычные названия цветов, например blue или red (см. Именованные цвета).
+    * По имени. Используются англоязычные названия цветов, например blue или red (см. [[html:css#imenovannye_cveta|Именованные цвета]]).
-    * В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. Безопасные (browser-safe) цвета в CSS).
+    * В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. [[html:css#bezopasnye_browser-safe_cveta_v_css|Безопасные (browser-safe) цвета в CSS]]).
     * В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.
     * В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.
 Пример
-<code>
+<code css>
 /* Несколько способов сделать параграфы зелеными: */
 p {color: lime}
@@ Строка 519: / Строка 601: @@
 В этом примере все способы задания цвета равнозначны и приведут к одному и тому же результату - цвет параграфов станет ярко-зеленым.
+====== Именованные цвета ======
-====== Задание размеров (длина, ширина) в CSS ======
+Это базовые цвета, используемые в CSS. В старые добрые времена они использовались дизайнерами для создания страниц поисковых систем, а также в дизайне сайтов с огромной аудиторией, то есть там, где нужна максимальная совместимость. Все они прекрасно отображаются даже в 256-цветном режиме работы видеокарты. Несомненно, для оригинального цветового дизайна обычных сайтов их маловато.
-Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак "." (точка).
+<html>
+<table cellspacing=1 cellpadding=5 border=0 width="100%">
+<tr>
+<td style="background-color:black">&nbsp;</td><TD>Black</td>
+<td style="background-color:Navy">&nbsp;</td><TD>Navy</td>
+</tr>
+<tr>
+<td style="background-color:Gray">&nbsp;</td><TD>Gray</td>
+<td style="background-color:Blue">&nbsp;</td><TD>Blue</td>
+</tr>
+<tr>
+<td style="background-color:Silver">&nbsp;</td><TD>Silver</td>
-Сразу после числа необходимо указать единицу измерения.
+<td style="background-color:Aqua">&nbsp;</td><TD>Aqua</td>
+</tr>
+<tr>
+<td style="background-color:White">&nbsp;</td><TD>White</td>
+<td style="background-color:Green">&nbsp;</td><TD>Green</td>
+</tr>
+<tr>
+<td style="background-color:Red">&nbsp;</td><TD>Red</td>
+<td style="background-color:Lime">&nbsp;</td><TD>Lime</td>
+</tr>
+<tr>
+<td style="background-color:Fuchsia">&nbsp;</td><TD>Fuchsia</td>
-Существует множество единиц измерения.
+<td style="background-color:Teal">&nbsp;</td><TD>Teal</td>
+</tr>
+<tr>
+<td style="background-color:Maroon">&nbsp;</td><TD>Maroon</td>
+<td style="background-color:Yellow">&nbsp;</td><TD>Yellow</td>
+</tr>
+<tr>
+<td style="background-color:Purple">&nbsp;</td><TD>Purple</td>
+<td style="background-color:Olive">&nbsp;</td><TD>Olive</td>
+</tr>
+</table>
+</html>
-em
-    Ширина буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.
-ex
-    Высота буквы x в настоящем шрифте. Применяется аналогично em.
-px
-    Размер в пикселах.
-in
-    Размер в дюймах. Один дюйм = 2.54 сантиметра.
-cm
-    Размер в сантиметрах.
-mm
-    Размер в миллиметрах.
-pt
-    Размер в пунктах. Один пункт = 1/72 дюйма (в CSS 2.1).
-pc
-    Размер в пиках. (12 пунктов).
-Примеры
+Для старых 256-цветных видеокарт рекомендуется использовать так называемые безопасные цвета. Сейчас это не очень актуально, поэтому вы можете определить в RGB-формате любой из более чем 16 млн. оттенков.
-<code>
-body {margin: 1in}
+====== Безопасные (browser-safe) цвета в CSS ======
-table {padding: 1.5cm}
-p {text-indent: -2pt}
-img.logo {height: 12px}
+Для получения любого оттенка применяются комбинации RGB-значений цвета, записанные в шестнадцатиричном формате(подробнее - см. Как задать цвет в CSS).
-p {text-indent: 3em}
-blockquote {padding-bottom: 2ex}
+Приведенные ниже 216 цветов считаются "безопасными" (browser-safe). Это значит, что даже на старом мониторе в 256-цветном режиме они должны выглядеть ровно и красиво.
-table {border-width: 7.5pc}
-</code>
+Для удобства я расположил "безопасные" цвета в три таблицы по 216 цветов, отсортированные по разным цветовым компонентам.
+<html>
+<table border=0 cellpadding=0 cellspacing=1 width="100%">
+<tr><th colspan=6>КРАСНЫЙ И СИНИЙ &#150; ДОБАВЛЯЕМ ЗЕЛЕНЫЙ</th></tr>
+<tr align=center>
+<td style="background-color: #000000; color: #999999;">000000</td>
+<td style="background-color: #000033; color: #999999;">000033</td>
+<td style="background-color: #000066; color: #999999;">000066</td>
+<td style="background-color: #000099; color: #999999;">000099</td>
+<td style="background-color: #0000CC; color: #999999;">0000CC</td>
+<td style="background-color: #0000FF; color: #999999;">0000FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #330000; color: #999999;">330000</td>
+<td style="background-color: #330033; color: #999999;">330033</td>
+<td style="background-color: #330066; color: #999999;">330066</td>
+<td style="background-color: #330099; color: #999999;">330099</td>
+<td style="background-color: #3300CC; color: #999999;">3300CC</td>
+<td style="background-color: #3300FF; color: #999999;">3300FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #660000; color: #999999;">660000</td>
+<td style="background-color: #660033; color: #999999;">660033</td>
+<td style="background-color: #660066; color: #999999;">660066</td>
+<td style="background-color: #660099; color: #999999;">660099</td>
+<td style="background-color: #6600CC; color: #999999;">6600CC</td>
+<td style="background-color: #6600FF; color: #999999;">6600FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #990000; color: #000000;">990000</td>
+<td style="background-color: #990033; color: #000000;">990033</td>
+<td style="background-color: #990066; color: #000000;">990066</td>
+<td style="background-color: #990099; color: #000000;">990099</td>
+<td style="background-color: #9900CC; color: #000000;">9900CC</td>
+<td style="background-color: #9900FF; color: #000000;">9900FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC0000; color: #000000;">CC0000</td>
+<td style="background-color: #CC0033; color: #000000;">CC0033</td>
+<td style="background-color: #CC0066; color: #000000;">CC0066</td>
+<td style="background-color: #CC0099; color: #000000;">CC0099</td>
+<td style="background-color: #CC00CC; color: #000000;">CC00CC</td>
+<td style="background-color: #CC00FF; color: #000000;">CC00FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF0000; color: #000000;">FF0000</td>
+<td style="background-color: #FF0033; color: #000000;">FF0033</td>
+<td style="background-color: #FF0066; color: #000000;">FF0066</td>
+<td style="background-color: #FF0099; color: #000000;">FF0099</td>
+<td style="background-color: #FF00CC; color: #000000;">FF00CC</td>
+<td style="background-color: #FF00FF; color: #000000;">FF00FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #003300; color: #999999;">003300</td>
+<td style="background-color: #003333; color: #999999;">003333</td>
+<td style="background-color: #003366; color: #999999;">003366</td>
+<td style="background-color: #003399; color: #999999;">003399</td>
+<td style="background-color: #0033CC; color: #999999;">0033CC</td>
+<td style="background-color: #0033FF; color: #999999;">0033FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #333300; color: #999999;">333300</td>
+<td style="background-color: #333333; color: #999999;">333333</td>
+<td style="background-color: #333366; color: #999999;">333366</td>
+<td style="background-color: #333399; color: #999999;">333399</td>
+<td style="background-color: #3333CC; color: #999999;">3333CC</td>
+<td style="background-color: #3333FF; color: #999999;">3333FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #663300; color: #999999;">663300</td>
+<td style="background-color: #663333; color: #999999;">663333</td>
+<td style="background-color: #663366; color: #999999;">663366</td>
+<td style="background-color: #663399; color: #999999;">663399</td>
+<td style="background-color: #6633CC; color: #999999;">6633CC</td>
+<td style="background-color: #6633FF; color: #999999;">6633FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #993300; color: #000000;">993300</td>
+<td style="background-color: #993333; color: #000000;">993333</td>
+<td style="background-color: #993366; color: #000000;">993366</td>
+<td style="background-color: #993399; color: #000000;">993399</td>
+<td style="background-color: #9933CC; color: #000000;">9933CC</td>
+<td style="background-color: #9933FF; color: #000000;">9933FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC3300; color: #000000;">CC3300</td>
+<td style="background-color: #CC3333; color: #000000;">CC3333</td>
+<td style="background-color: #CC3366; color: #000000;">CC3366</td>
+<td style="background-color: #CC3399; color: #000000;">CC3399</td>
+<td style="background-color: #CC33CC; color: #000000;">CC33CC</td>
+<td style="background-color: #CC33FF; color: #000000;">CC33FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF3300; color: #000000;">FF3300</td>
+<td style="background-color: #FF3333; color: #000000;">FF3333</td>
+<td style="background-color: #FF3366; color: #000000;">FF3366</td>
+<td style="background-color: #FF3399; color: #000000;">FF3399</td>
+<td style="background-color: #FF33CC; color: #000000;">FF33CC</td>
+<td style="background-color: #FF33FF; color: #000000;">FF33FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #006600; color: #000000;">006600</td>
+<td style="background-color: #006633; color: #000000;">006633</td>
+<td style="background-color: #006666; color: #000000;">006666</td>
+<td style="background-color: #006699; color: #000000;">006699</td>
+<td style="background-color: #0066CC; color: #000000;">0066CC</td>
+<td style="background-color: #0066FF; color: #000000;">0066FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #336600; color: #000000;">336600</td>
+<td style="background-color: #336633; color: #000000;">336633</td>
+<td style="background-color: #336666; color: #000000;">336666</td>
+<td style="background-color: #336699; color: #000000;">336699</td>
+<td style="background-color: #3366CC; color: #000000;">3366CC</td>
+<td style="background-color: #3366FF; color: #000000;">3366FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #666600; color: #000000;">666600</td>
+<td style="background-color: #666633; color: #000000;">666633</td>
+<td style="background-color: #666666; color: #000000;">666666</td>
+<td style="background-color: #666699; color: #000000;">666699</td>
+<td style="background-color: #6666CC; color: #000000;">6666CC</td>
+<td style="background-color: #6666FF; color: #000000;">6666FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #996600; color: #000000;">996600</td>
+<td style="background-color: #996633; color: #000000;">996633</td>
+<td style="background-color: #996666; color: #000000;">996666</td>
+<td style="background-color: #996699; color: #000000;">996699</td>
+<td style="background-color: #9966CC; color: #000000;">9966CC</td>
+<td style="background-color: #9966FF; color: #000000;">9966FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC6600; color: #000000;">CC6600</td>
+<td style="background-color: #CC6633; color: #000000;">CC6633</td>
+<td style="background-color: #CC6666; color: #000000;">CC6666</td>
+<td style="background-color: #CC6699; color: #000000;">CC6699</td>
+<td style="background-color: #CC66CC; color: #000000;">CC66CC</td>
+<td style="background-color: #CC66FF; color: #000000;">CC66FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF6600; color: #000000;">FF6600</td>
+<td style="background-color: #FF6633; color: #000000;">FF6633</td>
+<td style="background-color: #FF6666; color: #000000;">FF6666</td>
+<td style="background-color: #FF6699; color: #000000;">FF6699</td>
+<td style="background-color: #FF66CC; color: #000000;">FF66CC</td>
+<td style="background-color: #FF66FF; color: #000000;">FF66FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #009900; color: #000000;">009900</td>
+<td style="background-color: #009933; color: #000000;">009933</td>
+<td style="background-color: #009966; color: #000000;">009966</td>
+<td style="background-color: #009999; color: #000000;">009999</td>
+<td style="background-color: #0099CC; color: #000000;">0099CC</td>
+<td style="background-color: #0099FF; color: #000000;">0099FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #339900; color: #000000;">339900</td>
+<td style="background-color: #339933; color: #000000;">339933</td>
+<td style="background-color: #339966; color: #000000;">339966</td>
+<td style="background-color: #339999; color: #000000;">339999</td>
+<td style="background-color: #3399CC; color: #000000;">3399CC</td>
+<td style="background-color: #3399FF; color: #000000;">3399FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #669900; color: #000000;">669900</td>
+<td style="background-color: #669933; color: #000000;">669933</td>
+<td style="background-color: #669966; color: #000000;">669966</td>
+<td style="background-color: #669999; color: #000000;">669999</td>
+<td style="background-color: #6699CC; color: #000000;">6699CC</td>
+<td style="background-color: #6699FF; color: #000000;">6699FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #999900; color: #000000;">999900</td>
+<td style="background-color: #999933; color: #000000;">999933</td>
+<td style="background-color: #999966; color: #000000;">999966</td>
+<td style="background-color: #999999; color: #000000;">999999</td>
+<td style="background-color: #9999CC; color: #000000;">9999CC</td>
+<td style="background-color: #9999FF; color: #000000;">9999FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC9900; color: #000000;">CC9900</td>
+<td style="background-color: #CC9933; color: #000000;">CC9933</td>
+<td style="background-color: #CC9966; color: #000000;">CC9966</td>
+<td style="background-color: #CC9999; color: #000000;">CC9999</td>
+<td style="background-color: #CC99CC; color: #000000;">CC99CC</td>
+<td style="background-color: #CC99FF; color: #000000;">CC99FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF9900; color: #000000;">FF9900</td>
+<td style="background-color: #FF9933; color: #000000;">FF9933</td>
+<td style="background-color: #FF9966; color: #000000;">FF9966</td>
+<td style="background-color: #FF9999; color: #000000;">FF9999</td>
+<td style="background-color: #FF99CC; color: #000000;">FF99CC</td>
+<td style="background-color: #FF99FF; color: #000000;">FF99FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #00CC00; color: #000000;">00CC00</td>
+<td style="background-color: #00CC33; color: #000000;">00CC33</td>
+<td style="background-color: #00CC66; color: #000000;">00CC66</td>
+<td style="background-color: #00CC99; color: #000000;">00CC99</td>
+<td style="background-color: #00CCCC; color: #000000;">00CCCC</td>
+<td style="background-color: #00CCFF; color: #000000;">00CCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #33CC00; color: #000000;">33CC00</td>
+<td style="background-color: #33CC33; color: #000000;">33CC33</td>
+<td style="background-color: #33CC66; color: #000000;">33CC66</td>
+<td style="background-color: #33CC99; color: #000000;">33CC99</td>
+<td style="background-color: #33CCCC; color: #000000;">33CCCC</td>
+<td style="background-color: #33CCFF; color: #000000;">33CCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #66CC00; color: #000000;">66CC00</td>
+<td style="background-color: #66CC33; color: #000000;">66CC33</td>
+<td style="background-color: #66CC66; color: #000000;">66CC66</td>
+<td style="background-color: #66CC99; color: #000000;">66CC99</td>
+<td style="background-color: #66CCCC; color: #000000;">66CCCC</td>
+<td style="background-color: #66CCFF; color: #000000;">66CCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #99CC00; color: #000000;">99CC00</td>
+<td style="background-color: #99CC33; color: #000000;">99CC33</td>
+<td style="background-color: #99CC66; color: #000000;">99CC66</td>
+<td style="background-color: #99CC99; color: #000000;">99CC99</td>
+<td style="background-color: #99CCCC; color: #000000;">99CCCC</td>
+<td style="background-color: #99CCFF; color: #000000;">99CCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CCCC00; color: #000000;">CCCC00</td>
+<td style="background-color: #CCCC33; color: #000000;">CCCC33</td>
+<td style="background-color: #CCCC66; color: #000000;">CCCC66</td>
+<td style="background-color: #CCCC99; color: #000000;">CCCC99</td>
+<td style="background-color: #CCCCCC; color: #000000;">CCCCCC</td>
+<td style="background-color: #CCCCFF; color: #000000;">CCCCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FFCC00; color: #000000;">FFCC00</td>
+<td style="background-color: #FFCC33; color: #000000;">FFCC33</td>
+<td style="background-color: #FFCC66; color: #000000;">FFCC66</td>
+<td style="background-color: #FFCC99; color: #000000;">FFCC99</td>
+<td style="background-color: #FFCCCC; color: #000000;">FFCCCC</td>
+<td style="background-color: #FFCCFF; color: #000000;">FFCCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #00FF00; color: #000000;">00FF00</td>
+<td style="background-color: #00FF33; color: #000000;">00FF33</td>
+<td style="background-color: #00FF66; color: #000000;">00FF66</td>
+<td style="background-color: #00FF99; color: #000000;">00FF99</td>
+<td style="background-color: #00FFCC; color: #000000;">00FFCC</td>
+<td style="background-color: #00FFFF; color: #000000;">00FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #33FF00; color: #000000;">33FF00</td>
+<td style="background-color: #33FF33; color: #000000;">33FF33</td>
+<td style="background-color: #33FF66; color: #000000;">33FF66</td>
+<td style="background-color: #33FF99; color: #000000;">33FF99</td>
+<td style="background-color: #33FFCC; color: #000000;">33FFCC</td>
+<td style="background-color: #33FFFF; color: #000000;">33FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #66FF00; color: #000000;">66FF00</td>
+<td style="background-color: #66FF33; color: #000000;">66FF33</td>
+<td style="background-color: #66FF66; color: #000000;">66FF66</td>
+<td style="background-color: #66FF99; color: #000000;">66FF99</td>
+<td style="background-color: #66FFCC; color: #000000;">66FFCC</td>
+<td style="background-color: #66FFFF; color: #000000;">66FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #99FF00; color: #000000;">99FF00</td>
+<td style="background-color: #99FF33; color: #000000;">99FF33</td>
+<td style="background-color: #99FF66; color: #000000;">99FF66</td>
+<td style="background-color: #99FF99; color: #000000;">99FF99</td>
+<td style="background-color: #99FFCC; color: #000000;">99FFCC</td>
+<td style="background-color: #99FFFF; color: #000000;">99FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CCFF00; color: #000000;">CCFF00</td>
+<td style="background-color: #CCFF33; color: #000000;">CCFF33</td>
+<td style="background-color: #CCFF66; color: #000000;">CCFF66</td>
+<td style="background-color: #CCFF99; color: #000000;">CCFF99</td>
+<td style="background-color: #CCFFCC; color: #000000;">CCFFCC</td>
+<td style="background-color: #CCFFFF; color: #000000;">CCFFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FFFF00; color: #000000;">FFFF00</td>
+<td style="background-color: #FFFF33; color: #000000;">FFFF33</td>
+<td style="background-color: #FFFF66; color: #000000;">FFFF66</td>
+<td style="background-color: #FFFF99; color: #000000;">FFFF99</td>
+<td style="background-color: #FFFFCC; color: #000000;">FFFFCC</td>
+<td style="background-color: #FFFFFF; color: #000000;">FFFFFF</td>
+</tr>
+<tr><th colspan=6>КРАСНЫЙ И ЗЕЛЕНЫЙ &#150; ДОБАВЛЯЕМ СИНИЙ</th></tr>
+<tr align=center>
+<td style="background-color: #000000; color: #999999;">000000</td>
+<td style="background-color: #003300; color: #999999;">003300</td>
+<td style="background-color: #006600; color: #000000;">006600</td>
+<td style="background-color: #009900; color: #000000;">009900</td>
+<td style="background-color: #00CC00; color: #000000;">00CC00</td>
+<td style="background-color: #00FF00; color: #000000;">00FF00</td>
+</tr>
+<tr align=center>
+<td style="background-color: #330000; color: #999999;">330000</td>
+<td style="background-color: #333300; color: #999999;">333300</td>
+<td style="background-color: #336600; color: #000000;">336600</td>
+<td style="background-color: #339900; color: #000000;">339900</td>
+<td style="background-color: #33CC00; color: #000000;">33CC00</td>
+<td style="background-color: #33FF00; color: #000000;">33FF00</td>
+</tr>
+<tr align=center>
+<td style="background-color: #660000; color: #999999;">660000</td>
+<td style="background-color: #663300; color: #999999;">663300</td>
+<td style="background-color: #666600; color: #000000;">666600</td>
+<td style="background-color: #669900; color: #000000;">669900</td>
+<td style="background-color: #66CC00; color: #000000;">66CC00</td>
+<td style="background-color: #66FF00; color: #000000;">66FF00</td>
+</tr>
+<tr align=center>
+<td style="background-color: #990000; color: #000000;">990000</td>
+<td style="background-color: #993300; color: #000000;">993300</td>
+<td style="background-color: #996600; color: #000000;">996600</td>
+<td style="background-color: #999900; color: #000000;">999900</td>
+<td style="background-color: #99CC00; color: #000000;">99CC00</td>
+<td style="background-color: #99FF00; color: #000000;">99FF00</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC0000; color: #000000;">CC0000</td>
+<td style="background-color: #CC3300; color: #000000;">CC3300</td>
+<td style="background-color: #CC6600; color: #000000;">CC6600</td>
+<td style="background-color: #CC9900; color: #000000;">CC9900</td>
+<td style="background-color: #CCCC00; color: #000000;">CCCC00</td>
+<td style="background-color: #CCFF00; color: #000000;">CCFF00</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF0000; color: #000000;">FF0000</td>
+<td style="background-color: #FF3300; color: #000000;">FF3300</td>
+<td style="background-color: #FF6600; color: #000000;">FF6600</td>
+<td style="background-color: #FF9900; color: #000000;">FF9900</td>
+<td style="background-color: #FFCC00; color: #000000;">FFCC00</td>
+<td style="background-color: #FFFF00; color: #000000;">FFFF00</td>
+</tr>
+<tr align=center>
+<td style="background-color: #000033; color: #999999;">000033</td>
+<td style="background-color: #003333; color: #999999;">003333</td>
+<td style="background-color: #006633; color: #000000;">006633</td>
+<td style="background-color: #009933; color: #000000;">009933</td>
+<td style="background-color: #00CC33; color: #000000;">00CC33</td>
+<td style="background-color: #00FF33; color: #000000;">00FF33</td>
+</tr>
+<tr align=center>
+<td style="background-color: #330033; color: #999999;">330033</td>
+<td style="background-color: #333333; color: #999999;">333333</td>
+<td style="background-color: #336633; color: #000000;">336633</td>
+<td style="background-color: #339933; color: #000000;">339933</td>
+<td style="background-color: #33CC33; color: #000000;">33CC33</td>
+<td style="background-color: #33FF33; color: #000000;">33FF33</td>
+</tr>
+<tr align=center>
+<td style="background-color: #660033; color: #999999;">660033</td>
+<td style="background-color: #663333; color: #999999;">663333</td>
+<td style="background-color: #666633; color: #000000;">666633</td>
+<td style="background-color: #669933; color: #000000;">669933</td>
+<td style="background-color: #66CC33; color: #000000;">66CC33</td>
+<td style="background-color: #66FF33; color: #000000;">66FF33</td>
+</tr>
+<tr align=center>
+<td style="background-color: #990033; color: #000000;">990033</td>
+<td style="background-color: #993333; color: #000000;">993333</td>
+<td style="background-color: #996633; color: #000000;">996633</td>
+<td style="background-color: #999933; color: #000000;">999933</td>
+<td style="background-color: #99CC33; color: #000000;">99CC33</td>
+<td style="background-color: #99FF33; color: #000000;">99FF33</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC0033; color: #000000;">CC0033</td>
+<td style="background-color: #CC3333; color: #000000;">CC3333</td>
+<td style="background-color: #CC6633; color: #000000;">CC6633</td>
+<td style="background-color: #CC9933; color: #000000;">CC9933</td>
+<td style="background-color: #CCCC33; color: #000000;">CCCC33</td>
+<td style="background-color: #CCFF33; color: #000000;">CCFF33</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF0033; color: #000000;">FF0033</td>
+<td style="background-color: #FF3333; color: #000000;">FF3333</td>
+<td style="background-color: #FF6633; color: #000000;">FF6633</td>
+<td style="background-color: #FF9933; color: #000000;">FF9933</td>
+<td style="background-color: #FFCC33; color: #000000;">FFCC33</td>
+<td style="background-color: #FFFF33; color: #000000;">FFFF33</td>
+</tr>
+<tr align=center>
+<td style="background-color: #000066; color: #999999;">000066</td>
+<td style="background-color: #003366; color: #999999;">003366</td>
+<td style="background-color: #006666; color: #000000;">006666</td>
+<td style="background-color: #009966; color: #000000;">009966</td>
+<td style="background-color: #00CC66; color: #000000;">00CC66</td>
+<td style="background-color: #00FF66; color: #000000;">00FF66</td>
+</tr>
+<tr align=center>
+<td style="background-color: #330066; color: #999999;">330066</td>
+<td style="background-color: #333366; color: #999999;">333366</td>
+<td style="background-color: #336666; color: #000000;">336666</td>
+<td style="background-color: #339966; color: #000000;">339966</td>
+<td style="background-color: #33CC66; color: #000000;">33CC66</td>
+<td style="background-color: #33FF66; color: #000000;">33FF66</td>
+</tr>
+<tr align=center>
+<td style="background-color: #660066; color: #999999;">660066</td>
+<td style="background-color: #663366; color: #999999;">663366</td>
+<td style="background-color: #666666; color: #000000;">666666</td>
+<td style="background-color: #669966; color: #000000;">669966</td>
+<td style="background-color: #66CC66; color: #000000;">66CC66</td>
+<td style="background-color: #66FF66; color: #000000;">66FF66</td>
+</tr>
+<tr align=center>
+<td style="background-color: #990066; color: #000000;">990066</td>
+<td style="background-color: #993366; color: #000000;">993366</td>
+<td style="background-color: #996666; color: #000000;">996666</td>
+<td style="background-color: #999966; color: #000000;">999966</td>
+<td style="background-color: #99CC66; color: #000000;">99CC66</td>
+<td style="background-color: #99FF66; color: #000000;">99FF66</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC0066; color: #000000;">CC0066</td>
+<td style="background-color: #CC3366; color: #000000;">CC3366</td>
+<td style="background-color: #CC6666; color: #000000;">CC6666</td>
+<td style="background-color: #CC9966; color: #000000;">CC9966</td>
+<td style="background-color: #CCCC66; color: #000000;">CCCC66</td>
+<td style="background-color: #CCFF66; color: #000000;">CCFF66</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF0066; color: #000000;">FF0066</td>
+<td style="background-color: #FF3366; color: #000000;">FF3366</td>
+<td style="background-color: #FF6666; color: #000000;">FF6666</td>
+<td style="background-color: #FF9966; color: #000000;">FF9966</td>
+<td style="background-color: #FFCC66; color: #000000;">FFCC66</td>
+<td style="background-color: #FFFF66; color: #000000;">FFFF66</td>
+</tr>
+<tr align=center>
+<td style="background-color: #000099; color: #999999;">000099</td>
+<td style="background-color: #003399; color: #999999;">003399</td>
+<td style="background-color: #006699; color: #000000;">006699</td>
+<td style="background-color: #009999; color: #000000;">009999</td>
+<td style="background-color: #00CC99; color: #000000;">00CC99</td>
+<td style="background-color: #00FF99; color: #000000;">00FF99</td>
+</tr>
+<tr align=center>
+<td style="background-color: #330099; color: #999999;">330099</td>
+<td style="background-color: #333399; color: #999999;">333399</td>
+<td style="background-color: #336699; color: #000000;">336699</td>
+<td style="background-color: #339999; color: #000000;">339999</td>
+<td style="background-color: #33CC99; color: #000000;">33CC99</td>
+<td style="background-color: #33FF99; color: #000000;">33FF99</td>
+</tr>
+<tr align=center>
+<td style="background-color: #660099; color: #999999;">660099</td>
+<td style="background-color: #663399; color: #999999;">663399</td>
+<td style="background-color: #666699; color: #000000;">666699</td>
+<td style="background-color: #669999; color: #000000;">669999</td>
+<td style="background-color: #66CC99; color: #000000;">66CC99</td>
+<td style="background-color: #66FF99; color: #000000;">66FF99</td>
+</tr>
+<tr align=center>
+<td style="background-color: #990099; color: #000000;">990099</td>
+<td style="background-color: #993399; color: #000000;">993399</td>
+<td style="background-color: #996699; color: #000000;">996699</td>
+<td style="background-color: #999999; color: #000000;">999999</td>
+<td style="background-color: #99CC99; color: #000000;">99CC99</td>
+<td style="background-color: #99FF99; color: #000000;">99FF99</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC0099; color: #000000;">CC0099</td>
+<td style="background-color: #CC3399; color: #000000;">CC3399</td>
+<td style="background-color: #CC6699; color: #000000;">CC6699</td>
+<td style="background-color: #CC9999; color: #000000;">CC9999</td>
+<td style="background-color: #CCCC99; color: #000000;">CCCC99</td>
+<td style="background-color: #CCFF99; color: #000000;">CCFF99</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF0099; color: #000000;">FF0099</td>
+<td style="background-color: #FF3399; color: #000000;">FF3399</td>
+<td style="background-color: #FF6699; color: #000000;">FF6699</td>
+<td style="background-color: #FF9999; color: #000000;">FF9999</td>
+<td style="background-color: #FFCC99; color: #000000;">FFCC99</td>
+<td style="background-color: #FFFF99; color: #000000;">FFFF99</td>
+</tr>
+<tr align=center>
+<td style="background-color: #0000CC; color: #999999;">0000CC</td>
+<td style="background-color: #0033CC; color: #999999;">0033CC</td>
+<td style="background-color: #0066CC; color: #000000;">0066CC</td>
+<td style="background-color: #0099CC; color: #000000;">0099CC</td>
+<td style="background-color: #00CCCC; color: #000000;">00CCCC</td>
+<td style="background-color: #00FFCC; color: #000000;">00FFCC</td>
+</tr>
+<tr align=center>
+<td style="background-color: #3300CC; color: #999999;">3300CC</td>
+<td style="background-color: #3333CC; color: #999999;">3333CC</td>
+<td style="background-color: #3366CC; color: #000000;">3366CC</td>
+<td style="background-color: #3399CC; color: #000000;">3399CC</td>
+<td style="background-color: #33CCCC; color: #000000;">33CCCC</td>
+<td style="background-color: #33FFCC; color: #000000;">33FFCC</td>
+</tr>
+<tr align=center>
+<td style="background-color: #6600CC; color: #999999;">6600CC</td>
+<td style="background-color: #6633CC; color: #999999;">6633CC</td>
+<td style="background-color: #6666CC; color: #000000;">6666CC</td>
+<td style="background-color: #6699CC; color: #000000;">6699CC</td>
+<td style="background-color: #66CCCC; color: #000000;">66CCCC</td>
+<td style="background-color: #66FFCC; color: #000000;">66FFCC</td>
+</tr>
+<tr align=center>
+<td style="background-color: #9900CC; color: #000000;">9900CC</td>
+<td style="background-color: #9933CC; color: #000000;">9933CC</td>
+<td style="background-color: #9966CC; color: #000000;">9966CC</td>
+<td style="background-color: #9999CC; color: #000000;">9999CC</td>
+<td style="background-color: #99CCCC; color: #000000;">99CCCC</td>
+<td style="background-color: #99FFCC; color: #000000;">99FFCC</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC00CC; color: #000000;">CC00CC</td>
+<td style="background-color: #CC33CC; color: #000000;">CC33CC</td>
+<td style="background-color: #CC66CC; color: #000000;">CC66CC</td>
+<td style="background-color: #CC99CC; color: #000000;">CC99CC</td>
+<td style="background-color: #CCCCCC; color: #000000;">CCCCCC</td>
+<td style="background-color: #CCFFCC; color: #000000;">CCFFCC</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF00CC; color: #000000;">FF00CC</td>
+<td style="background-color: #FF33CC; color: #000000;">FF33CC</td>
+<td style="background-color: #FF66CC; color: #000000;">FF66CC</td>
+<td style="background-color: #FF99CC; color: #000000;">FF99CC</td>
+<td style="background-color: #FFCCCC; color: #000000;">FFCCCC</td>
+<td style="background-color: #FFFFCC; color: #000000;">FFFFCC</td>
+</tr>
+<tr align=center>
+<td style="background-color: #0000FF; color: #999999;">0000FF</td>
+<td style="background-color: #0033FF; color: #999999;">0033FF</td>
+<td style="background-color: #0066FF; color: #000000;">0066FF</td>
+<td style="background-color: #0099FF; color: #000000;">0099FF</td>
+<td style="background-color: #00CCFF; color: #000000;">00CCFF</td>
+<td style="background-color: #00FFFF; color: #000000;">00FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #3300FF; color: #999999;">3300FF</td>
+<td style="background-color: #3333FF; color: #999999;">3333FF</td>
+<td style="background-color: #3366FF; color: #000000;">3366FF</td>
+<td style="background-color: #3399FF; color: #000000;">3399FF</td>
+<td style="background-color: #33CCFF; color: #000000;">33CCFF</td>
+<td style="background-color: #33FFFF; color: #000000;">33FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #6600FF; color: #999999;">6600FF</td>
+<td style="background-color: #6633FF; color: #999999;">6633FF</td>
+<td style="background-color: #6666FF; color: #000000;">6666FF</td>
+<td style="background-color: #6699FF; color: #000000;">6699FF</td>
+<td style="background-color: #66CCFF; color: #000000;">66CCFF</td>
+<td style="background-color: #66FFFF; color: #000000;">66FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #9900FF; color: #000000;">9900FF</td>
+<td style="background-color: #9933FF; color: #000000;">9933FF</td>
+<td style="background-color: #9966FF; color: #000000;">9966FF</td>
+<td style="background-color: #9999FF; color: #000000;">9999FF</td>
+<td style="background-color: #99CCFF; color: #000000;">99CCFF</td>
+<td style="background-color: #99FFFF; color: #000000;">99FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC00FF; color: #000000;">CC00FF</td>
+<td style="background-color: #CC33FF; color: #000000;">CC33FF</td>
+<td style="background-color: #CC66FF; color: #000000;">CC66FF</td>
+<td style="background-color: #CC99FF; color: #000000;">CC99FF</td>
+<td style="background-color: #CCCCFF; color: #000000;">CCCCFF</td>
+<td style="background-color: #CCFFFF; color: #000000;">CCFFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF00FF; color: #000000;">FF00FF</td>
+<td style="background-color: #FF33FF; color: #000000;">FF33FF</td>
+<td style="background-color: #FF66FF; color: #000000;">FF66FF</td>
+<td style="background-color: #FF99FF; color: #000000;">FF99FF</td>
+<td style="background-color: #FFCCFF; color: #000000;">FFCCFF</td>
+<td style="background-color: #FFFFFF; color: #000000;">FFFFFF</td>
+</tr>
+<tr><th colspan=6>ЗЕЛЕНЫЙ И СИНИЙ &#150; ДОБАВЛЯЕМ КРАСНЫЙ</th></tr>
+<tr align=center>
+<td style="background-color: #000000; color: #999999;">000000</td>
+<td style="background-color: #000033; color: #999999;">000033</td>
+<td style="background-color: #000066; color: #999999;">000066</td>
+<td style="background-color: #000099; color: #999999;">000099</td>
+<td style="background-color: #0000CC; color: #999999;">0000CC</td>
+<td style="background-color: #0000FF; color: #999999;">0000FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #003300; color: #999999;">003300</td>
+<td style="background-color: #003333; color: #999999;">003333</td>
+<td style="background-color: #003366; color: #999999;">003366</td>
+<td style="background-color: #003399; color: #999999;">003399</td>
+<td style="background-color: #0033CC; color: #999999;">0033CC</td>
+<td style="background-color: #0033FF; color: #999999;">0033FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #006600; color: #000000;">006600</td>
+<td style="background-color: #006633; color: #000000;">006633</td>
+<td style="background-color: #006666; color: #000000;">006666</td>
+<td style="background-color: #006699; color: #000000;">006699</td>
+<td style="background-color: #0066CC; color: #000000;">0066CC</td>
+<td style="background-color: #0066FF; color: #000000;">0066FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #009900; color: #000000;">009900</td>
+<td style="background-color: #009933; color: #000000;">009933</td>
+<td style="background-color: #009966; color: #000000;">009966</td>
+<td style="background-color: #009999; color: #000000;">009999</td>
+<td style="background-color: #0099CC; color: #000000;">0099CC</td>
+<td style="background-color: #0099FF; color: #000000;">0099FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #00CC00; color: #000000;">00CC00</td>
+<td style="background-color: #00CC33; color: #000000;">00CC33</td>
+<td style="background-color: #00CC66; color: #000000;">00CC66</td>
+<td style="background-color: #00CC99; color: #000000;">00CC99</td>
+<td style="background-color: #00CCCC; color: #000000;">00CCCC</td>
+<td style="background-color: #00CCFF; color: #000000;">00CCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #00FF00; color: #000000;">00FF00</td>
+<td style="background-color: #00FF33; color: #000000;">00FF33</td>
+<td style="background-color: #00FF66; color: #000000;">00FF66</td>
+<td style="background-color: #00FF99; color: #000000;">00FF99</td>
+<td style="background-color: #00FFCC; color: #000000;">00FFCC</td>
+<td style="background-color: #00FFFF; color: #000000;">00FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #330000; color: #999999;">330000</td>
+<td style="background-color: #330033; color: #999999;">330033</td>
+<td style="background-color: #330066; color: #999999;">330066</td>
+<td style="background-color: #330099; color: #999999;">330099</td>
+<td style="background-color: #3300CC; color: #999999;">3300CC</td>
+<td style="background-color: #3300FF; color: #999999;">3300FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #333300; color: #999999;">333300</td>
+<td style="background-color: #333333; color: #999999;">333333</td>
+<td style="background-color: #333366; color: #999999;">333366</td>
+<td style="background-color: #333399; color: #999999;">333399</td>
+<td style="background-color: #3333CC; color: #999999;">3333CC</td>
+<td style="background-color: #3333FF; color: #999999;">3333FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #336600; color: #000000;">336600</td>
+<td style="background-color: #336633; color: #000000;">336633</td>
+<td style="background-color: #336666; color: #000000;">336666</td>
+<td style="background-color: #336699; color: #000000;">336699</td>
+<td style="background-color: #3366CC; color: #000000;">3366CC</td>
+<td style="background-color: #3366FF; color: #000000;">3366FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #339900; color: #000000;">339900</td>
+<td style="background-color: #339933; color: #000000;">339933</td>
+<td style="background-color: #339966; color: #000000;">339966</td>
+<td style="background-color: #339999; color: #000000;">339999</td>
+<td style="background-color: #3399CC; color: #000000;">3399CC</td>
+<td style="background-color: #3399FF; color: #000000;">3399FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #33CC00; color: #000000;">33CC00</td>
+<td style="background-color: #33CC33; color: #000000;">33CC33</td>
+<td style="background-color: #33CC66; color: #000000;">33CC66</td>
+<td style="background-color: #33CC99; color: #000000;">33CC99</td>
+<td style="background-color: #33CCCC; color: #000000;">33CCCC</td>
+<td style="background-color: #33CCFF; color: #000000;">33CCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #33FF00; color: #000000;">33FF00</td>
+<td style="background-color: #33FF33; color: #000000;">33FF33</td>
+<td style="background-color: #33FF66; color: #000000;">33FF66</td>
+<td style="background-color: #33FF99; color: #000000;">33FF99</td>
+<td style="background-color: #33FFCC; color: #000000;">33FFCC</td>
+<td style="background-color: #33FFFF; color: #000000;">33FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #660000; color: #999999;">660000</td>
+<td style="background-color: #660033; color: #999999;">660033</td>
+<td style="background-color: #660066; color: #999999;">660066</td>
+<td style="background-color: #660099; color: #999999;">660099</td>
+<td style="background-color: #6600CC; color: #999999;">6600CC</td>
+<td style="background-color: #6600FF; color: #999999;">6600FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #663300; color: #999999;">663300</td>
+<td style="background-color: #663333; color: #999999;">663333</td>
+<td style="background-color: #663366; color: #999999;">663366</td>
+<td style="background-color: #663399; color: #999999;">663399</td>
+<td style="background-color: #6633CC; color: #999999;">6633CC</td>
+<td style="background-color: #6633FF; color: #999999;">6633FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #666600; color: #000000;">666600</td>
+<td style="background-color: #666633; color: #000000;">666633</td>
+<td style="background-color: #666666; color: #000000;">666666</td>
+<td style="background-color: #666699; color: #000000;">666699</td>
+<td style="background-color: #6666CC; color: #000000;">6666CC</td>
+<td style="background-color: #6666FF; color: #000000;">6666FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #669900; color: #000000;">669900</td>
+<td style="background-color: #669933; color: #000000;">669933</td>
+<td style="background-color: #669966; color: #000000;">669966</td>
+<td style="background-color: #669999; color: #000000;">669999</td>
+<td style="background-color: #6699CC; color: #000000;">6699CC</td>
+<td style="background-color: #6699FF; color: #000000;">6699FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #66CC00; color: #000000;">66CC00</td>
+<td style="background-color: #66CC33; color: #000000;">66CC33</td>
+<td style="background-color: #66CC66; color: #000000;">66CC66</td>
+<td style="background-color: #66CC99; color: #000000;">66CC99</td>
+<td style="background-color: #66CCCC; color: #000000;">66CCCC</td>
+<td style="background-color: #66CCFF; color: #000000;">66CCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #66FF00; color: #000000;">66FF00</td>
+<td style="background-color: #66FF33; color: #000000;">66FF33</td>
+<td style="background-color: #66FF66; color: #000000;">66FF66</td>
+<td style="background-color: #66FF99; color: #000000;">66FF99</td>
+<td style="background-color: #66FFCC; color: #000000;">66FFCC</td>
+<td style="background-color: #66FFFF; color: #000000;">66FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #990000; color: #000000;">990000</td>
+<td style="background-color: #990033; color: #000000;">990033</td>
+<td style="background-color: #990066; color: #000000;">990066</td>
+<td style="background-color: #990099; color: #000000;">990099</td>
+<td style="background-color: #9900CC; color: #000000;">9900CC</td>
+<td style="background-color: #9900FF; color: #000000;">9900FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #993300; color: #000000;">993300</td>
+<td style="background-color: #993333; color: #000000;">993333</td>
+<td style="background-color: #993366; color: #000000;">993366</td>
+<td style="background-color: #993399; color: #000000;">993399</td>
+<td style="background-color: #9933CC; color: #000000;">9933CC</td>
+<td style="background-color: #9933FF; color: #000000;">9933FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #996600; color: #000000;">996600</td>
+<td style="background-color: #996633; color: #000000;">996633</td>
+<td style="background-color: #996666; color: #000000;">996666</td>
+<td style="background-color: #996699; color: #000000;">996699</td>
+<td style="background-color: #9966CC; color: #000000;">9966CC</td>
+<td style="background-color: #9966FF; color: #000000;">9966FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #999900; color: #000000;">999900</td>
+<td style="background-color: #999933; color: #000000;">999933</td>
+<td style="background-color: #999966; color: #000000;">999966</td>
+<td style="background-color: #999999; color: #000000;">999999</td>
+<td style="background-color: #9999CC; color: #000000;">9999CC</td>
+<td style="background-color: #9999FF; color: #000000;">9999FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #99CC00; color: #000000;">99CC00</td>
+<td style="background-color: #99CC33; color: #000000;">99CC33</td>
+<td style="background-color: #99CC66; color: #000000;">99CC66</td>
+<td style="background-color: #99CC99; color: #000000;">99CC99</td>
+<td style="background-color: #99CCCC; color: #000000;">99CCCC</td>
+<td style="background-color: #99CCFF; color: #000000;">99CCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #99FF00; color: #000000;">99FF00</td>
+<td style="background-color: #99FF33; color: #000000;">99FF33</td>
+<td style="background-color: #99FF66; color: #000000;">99FF66</td>
+<td style="background-color: #99FF99; color: #000000;">99FF99</td>
+<td style="background-color: #99FFCC; color: #000000;">99FFCC</td>
+<td style="background-color: #99FFFF; color: #000000;">99FFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC0000; color: #000000;">CC0000</td>
+<td style="background-color: #CC0033; color: #000000;">CC0033</td>
+<td style="background-color: #CC0066; color: #000000;">CC0066</td>
+<td style="background-color: #CC0099; color: #000000;">CC0099</td>
+<td style="background-color: #CC00CC; color: #000000;">CC00CC</td>
+<td style="background-color: #CC00FF; color: #000000;">CC00FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC3300; color: #000000;">CC3300</td>
+<td style="background-color: #CC3333; color: #000000;">CC3333</td>
+<td style="background-color: #CC3366; color: #000000;">CC3366</td>
+<td style="background-color: #CC3399; color: #000000;">CC3399</td>
+<td style="background-color: #CC33CC; color: #000000;">CC33CC</td>
+<td style="background-color: #CC33FF; color: #000000;">CC33FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC6600; color: #000000;">CC6600</td>
+<td style="background-color: #CC6633; color: #000000;">CC6633</td>
+<td style="background-color: #CC6666; color: #000000;">CC6666</td>
+<td style="background-color: #CC6699; color: #000000;">CC6699</td>
+<td style="background-color: #CC66CC; color: #000000;">CC66CC</td>
+<td style="background-color: #CC66FF; color: #000000;">CC66FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CC9900; color: #000000;">CC9900</td>
+<td style="background-color: #CC9933; color: #000000;">CC9933</td>
+<td style="background-color: #CC9966; color: #000000;">CC9966</td>
+<td style="background-color: #CC9999; color: #000000;">CC9999</td>
+<td style="background-color: #CC99CC; color: #000000;">CC99CC</td>
+<td style="background-color: #CC99FF; color: #000000;">CC99FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CCCC00; color: #000000;">CCCC00</td>
+<td style="background-color: #CCCC33; color: #000000;">CCCC33</td>
+<td style="background-color: #CCCC66; color: #000000;">CCCC66</td>
+<td style="background-color: #CCCC99; color: #000000;">CCCC99</td>
+<td style="background-color: #CCCCCC; color: #000000;">CCCCCC</td>
+<td style="background-color: #CCCCFF; color: #000000;">CCCCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #CCFF00; color: #000000;">CCFF00</td>
+<td style="background-color: #CCFF33; color: #000000;">CCFF33</td>
+<td style="background-color: #CCFF66; color: #000000;">CCFF66</td>
+<td style="background-color: #CCFF99; color: #000000;">CCFF99</td>
+<td style="background-color: #CCFFCC; color: #000000;">CCFFCC</td>
+<td style="background-color: #CCFFFF; color: #000000;">CCFFFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF0000; color: #000000;">FF0000</td>
+<td style="background-color: #FF0033; color: #000000;">FF0033</td>
+<td style="background-color: #FF0066; color: #000000;">FF0066</td>
+<td style="background-color: #FF0099; color: #000000;">FF0099</td>
+<td style="background-color: #FF00CC; color: #000000;">FF00CC</td>
+<td style="background-color: #FF00FF; color: #000000;">FF00FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF3300; color: #000000;">FF3300</td>
+<td style="background-color: #FF3333; color: #000000;">FF3333</td>
+<td style="background-color: #FF3366; color: #000000;">FF3366</td>
+<td style="background-color: #FF3399; color: #000000;">FF3399</td>
+<td style="background-color: #FF33CC; color: #000000;">FF33CC</td>
+<td style="background-color: #FF33FF; color: #000000;">FF33FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF6600; color: #000000;">FF6600</td>
+<td style="background-color: #FF6633; color: #000000;">FF6633</td>
+<td style="background-color: #FF6666; color: #000000;">FF6666</td>
+<td style="background-color: #FF6699; color: #000000;">FF6699</td>
+<td style="background-color: #FF66CC; color: #000000;">FF66CC</td>
+<td style="background-color: #FF66FF; color: #000000;">FF66FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FF9900; color: #000000;">FF9900</td>
+<td style="background-color: #FF9933; color: #000000;">FF9933</td>
+<td style="background-color: #FF9966; color: #000000;">FF9966</td>
+<td style="background-color: #FF9999; color: #000000;">FF9999</td>
+<td style="background-color: #FF99CC; color: #000000;">FF99CC</td>
+<td style="background-color: #FF99FF; color: #000000;">FF99FF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FFCC00; color: #000000;">FFCC00</td>
+<td style="background-color: #FFCC33; color: #000000;">FFCC33</td>
+<td style="background-color: #FFCC66; color: #000000;">FFCC66</td>
+<td style="background-color: #FFCC99; color: #000000;">FFCC99</td>
+<td style="background-color: #FFCCCC; color: #000000;">FFCCCC</td>
+<td style="background-color: #FFCCFF; color: #000000;">FFCCFF</td>
+</tr>
+<tr align=center>
+<td style="background-color: #FFFF00; color: #000000;">FFFF00</td>
+<td style="background-color: #FFFF33; color: #000000;">FFFF33</td>
+<td style="background-color: #FFFF66; color: #000000;">FFFF66</td>
+<td style="background-color: #FFFF99; color: #000000;">FFFF99</td>
+<td style="background-color: #FFFFCC; color: #000000;">FFFFCC</td>
+<td style="background-color: #FFFFFF; color: #000000;">FFFFFF</td>
+</tr>
+</table>
+</html>
+Подготовлено по материалам [[http://css.manual.ru|http://css.manual.ru]]

Инструменты

меню и быстрый поиск

быстрый поиск

статус сайта

«хлебные крошки»

Инструменты страницы

мета-данные страницы

Различия