мета-данные страницы
Загрузка не удалась. Возможно, проблемы с правами доступа?
Различия
Показаны различия между двумя версиями страницы.
Следующая версия | Предыдущая версия | ||
html:css [20/04/2010 10:56] – создано pdemenkov | html:css [21/04/2010 17:12] (текущий) – dnaumov | ||
---|---|---|---|
Строка 5: | Строка 5: | ||
CSS-код – это список инструкций для браузера, | CSS-код – это список инструкций для браузера, | ||
- | Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением | + | Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением |
Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа. | Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа. | ||
Посмотрим на фрагмент XHTML-документа: | Посмотрим на фрагмент XHTML-документа: | ||
- | < | + | < |
< | < | ||
< | < | ||
</ | </ | ||
- | Из служебной XHTML разметки мы видим только элемент заголовка h1 и абзаца p, и ни слова об оформлении — шрифтах, | + | Из служебной XHTML разметки мы видим только элемент заголовка |
- | < | + | < |
/* оформляем заголовки: | /* оформляем заголовки: | ||
h1 { | h1 { | ||
Строка 34: | Строка 34: | ||
Для того, чтобы применить таблицу стилей | Для того, чтобы применить таблицу стилей | ||
- | * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента link | + | * применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента |
- | * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style | + | * встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента |
* применить inline-стиль, | * применить inline-стиль, | ||
Строка 41: | Строка 41: | ||
===== Внешние стили (external style sheets) ===== | ===== Внешние стили (external style sheets) ===== | ||
- | Применяются с помощью элемента link, который должен располагаться внутри элемента head и нигде более. | + | Применяются с помощью элемента link, который должен располагаться внутри элемента |
- | < | + | < |
<link rel=”stylesheet” type=”text/ | <link rel=”stylesheet” type=”text/ | ||
</ | </ | ||
Строка 48: | Строка 48: | ||
Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, | Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, | ||
- | Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link. | + | Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом |
===== Таблицы стилей документа (document style sheets) ===== | ===== Таблицы стилей документа (document style sheets) ===== | ||
Строка 54: | Строка 54: | ||
Называются так потому, | Называются так потому, | ||
- | CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style: | + | CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента |
- | < | + | < |
<style type=”text/ | <style type=”text/ | ||
... | ... | ||
Строка 61: | Строка 61: | ||
</ | </ | ||
- | Сам тег style (в отличие от link) может находиться в любой части документа, | + | Сам тег |
Стили, подставляемые в строку (inline styles) | Стили, подставляемые в строку (inline styles) | ||
- | Иногда нужно назначить стиль отдельному элементу на странице, | + | Иногда нужно назначить стиль отдельному элементу на странице, |
- | < | + | < |
<p style=”color: | <p style=”color: | ||
</ | </ | ||
- | Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body. | + | Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента |
Внутри атрибута style можно написать несколько CSS объявлений, | Внутри атрибута style можно написать несколько CSS объявлений, | ||
Строка 85: | Строка 85: | ||
Как это может выглядеть на практике? | Как это может выглядеть на практике? | ||
- | < | + | < |
a {text-decoration: | a {text-decoration: | ||
Строка 107: | Строка 107: | ||
===== HTML селекторы ===== | ===== HTML селекторы ===== | ||
- | Это простейший случай – в качестве селектора мы используем имя того html-элемента, | + | Это простейший случай – в качестве селектора мы используем имя того html-элемента, |
- | <h1> селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе: | + | |
+ | <code css> | ||
strong {font-weight: | strong {font-weight: | ||
h1 { font: bold 10pt verdana; } | h1 { font: bold 10pt verdana; } | ||
Строка 119: | Строка 120: | ||
{{: | {{: | ||
- | < | + | < |
.myClass { font: bold 10pt verdana; } /* меняем шрифт для всех тегов с классом myClass */ | .myClass { font: bold 10pt verdana; } /* меняем шрифт для всех тегов с классом myClass */ | ||
</ | </ | ||
Строка 129: | Строка 130: | ||
{{: | {{: | ||
- | < | + | < |
#myObj { margin: 1em; } /* изменяем поля для элемента, | #myObj { margin: 1em; } /* изменяем поля для элемента, | ||
span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */ | span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */ | ||
Строка 141: | Строка 142: | ||
Впоследствии оформление для селекторов можно переопределить индивидуально: | Впоследствии оформление для селекторов можно переопределить индивидуально: | ||
- | < | + | < |
/* все параграфы и списки делаем красными, | /* все параграфы и списки делаем красными, | ||
p, li, ul, ol {color:red; font-face: Tahoma, sans-serif; | p, li, ul, ol {color:red; font-face: Tahoma, sans-serif; | ||
Строка 154: | Строка 155: | ||
Вот, посмотрите: | Вот, посмотрите: | ||
+ | |||
+ | <code css> | ||
/* все ссылки, | /* все ссылки, | ||
li a {color: red;} | li a {color: red;} | ||
/* все ссылки в параграфах, | /* все ссылки в параграфах, | ||
table p a {color: green;} | table p a {color: green;} | ||
+ | </ | ||
Это самый распространённый метод создания контекстуальных селекторов, | Это самый распространённый метод создания контекстуальных селекторов, | ||
Строка 170: | Строка 174: | ||
{{: | {{: | ||
- | В приведённом примере мы вроде бы создали список селекторов, | + | В приведённом примере мы вроде бы создали список селекторов, |
===== Селекторы детей ===== | ===== Селекторы детей ===== | ||
Строка 180: | Строка 184: | ||
{{: | {{: | ||
- | В приведённом примере мы находим все элементы B, вложенные непосредственно в элементы I, и выключаем для них полужирный шрифт. Все остальные элементы B в документе останутся без изменений. | + | В приведённом примере мы находим все элементы |
===== Селекторы смежных элементов (Adjacent Sibling Selectors) ===== | ===== Селекторы смежных элементов (Adjacent Sibling Selectors) ===== | ||
- | Иногда нам надо выбрать элемент, | + | Иногда нам надо выбрать элемент, |
{{: | {{: | ||
+ | <note important> | ||
+ | **Важно: | ||
+ | |||
+ | **Важно: | ||
+ | </ | ||
+ | |||
+ | ====== Обзор свойств CSS ====== | ||
+ | |||
+ | Справочник опирается на актуальную сейчас спецификацию CSS 2.1, соответственно, | ||
+ | |||
+ | ===== Основные свойства ===== | ||
+ | |||
+ | Список базовых свойств, | ||
+ | |||
+ | margin, padding, border, background-color, | ||
+ | |||
+ | ===== Фон ===== | ||
+ | |||
+ | background | ||
+ | Сокращенный вариант записи для свойств background-color, | ||
+ | background-attachment | ||
+ | Устанавливает, | ||
+ | background-color | ||
+ | Устанавливает цвет фона для элемента. | ||
+ | background-image | ||
+ | Устанавливает фоновую картинку для элемента. | ||
+ | background-position | ||
+ | Устанавливает первоначальное положение для фоновой картинки. | ||
+ | background-repeat | ||
+ | Управляет циклическим повторением фоновой картинки. | ||
+ | |||
+ | ===== Рамка (граница, | ||
+ | |||
+ | ==== Влияют на все четыре рамки ==== | ||
+ | |||
+ | border | ||
+ | Краткий вариант записи для свойств border-width, | ||
+ | border-color | ||
+ | Устанавливает цвет рамки со всех сторон элемента. | ||
+ | border-width | ||
+ | Устанавливает толщину рамки со всех сторон элемента. | ||
+ | border-style | ||
+ | Определяет стиль оформления рамки вокруг элемента. | ||
+ | border-collapse | ||
+ | Указывает ячейкам таблицы, | ||
+ | border-spacing | ||
+ | Устанавливает расстояние между ячейками таблицы. | ||
+ | |||
+ | ==== Верхняя рамка ==== | ||
+ | |||
+ | border-top | ||
+ | Краткий вариант доступа к свойствам border-top-width, | ||
+ | border-top-color | ||
+ | Устанавливает цвет верхнего бордюра. | ||
+ | border-top-style | ||
+ | Устанавливает стиль линии верхнего бордюра. | ||
+ | border-top-width | ||
+ | Устанавливает ширину верхнего бордюра. | ||
+ | |||
+ | ==== Нижняя рамка ==== | ||
+ | |||
+ | |||
+ | border-bottom | ||
+ | Краткий вариант доступа к свойствам border-bottom-width, | ||
+ | border-bottom-color | ||
+ | Устанавливает цвет нижнего бордюра. | ||
+ | border-bottom-style | ||
+ | Устанавливает стиль линии нижнего бордюра. | ||
+ | border-bottom-width | ||
+ | Устанавливает ширину нижнего бордюра. | ||
+ | |||
+ | ==== Левая рамка ==== | ||
+ | |||
+ | border-left | ||
+ | Краткий вариант доступа к свойствам border-left-width, | ||
+ | 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-family | ||
+ | Определяет шрифт(ы) для отображения текста. | ||
+ | font-size | ||
+ | Управляет размером шрифта. | ||
+ | font-style | ||
+ | Управляет наклоном шрифта (курсив). | ||
+ | font-variant | ||
+ | Управляет внешним видом строчных букв (строчные как прописные, | ||
+ | font-weight | ||
+ | Управляет толщиной (насыщенностью) шрифта. | ||
+ | |||
+ | ===== Позиционирование ===== | ||
+ | |||
+ | |||
+ | position | ||
+ | Определяет порядок, | ||
+ | bottom | ||
+ | Сдвигает элемент относительно нижнего края. Используется совместно со свойством position. | ||
+ | left | ||
+ | Сдвигает элемент относительно левого края. Используется совместно со свойством position. | ||
+ | page-break-before | ||
+ | Сдвигает элемент относительно верхнего края. Используется совместно со свойством position. | ||
+ | right | ||
+ | Сдвигает элемент относительно правого края. Используется совместно со свойством position. | ||
+ | z-index | ||
+ | Определяет порядок, | ||
+ | |||
+ | ===== Форматирование ===== | ||
+ | |||
+ | clear | ||
+ | Запрещает/ | ||
+ | clip | ||
+ | Определяет область элемента, | ||
+ | display | ||
+ | Изменяет базовые свойства элементов. | ||
+ | float | ||
+ | Сдвигает элемент к правому или левому краю. | ||
+ | height | ||
+ | Определяет высоту прямоугольной области вокруг элемента. | ||
+ | overflow | ||
+ | Определят как отображать блочный элемент в случае, | ||
+ | visibility | ||
+ | Управляет настройкой видимости элемента. | ||
+ | width | ||
+ | Определяет ширину прямоугольной области вокруг элемента. | ||
+ | |||
+ | ===== Списки ===== | ||
+ | |||
+ | list-style | ||
+ | позволяет одновременно задать три параметра для маркеров пунктов списка: | ||
+ | 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-bottom | ||
+ | Определяет ширину пространства между содержимым элемента и нижним бордюром. | ||
+ | padding-left | ||
+ | Определяет ширину пространства между содержимым элемента и левым бордюром. | ||
+ | padding-right | ||
+ | Определяет ширину внешнего пространства между правым бордюром и невидимой границей прямоугольника. | ||
+ | padding-top | ||
+ | Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника. | ||
+ | |||
+ | ===== Прочее ===== | ||
+ | |||
+ | |||
+ | caption-side | ||
+ | Определяет, | ||
+ | color | ||
+ | Устанавливает цвет текста элемента. | ||
+ | content | ||
+ | Применяется для того, чтобы вставить текст или изображение до или после какого-либо элемента. | ||
+ | counter-increment | ||
+ | Задает значения приращений счетчика. | ||
+ | counter-reset | ||
+ | Устанавливает идентификатор, | ||
+ | cursor | ||
+ | Определяет вид курсора при наведении мышки на некий элемент. | ||
+ | empty-cells | ||
+ | Определяет, | ||
+ | margin | ||
+ | Сокращенный способ задать следующие параметры: | ||
+ | margin-bottom | ||
+ | Определяет ширину внешнего пространства между нижним бордюром и невидимой границей прямоугольника. | ||
+ | margin-left | ||
+ | Определяет ширину внешнего пространства между левым бордюром и невидимой границей прямоугольника. | ||
+ | margin-right | ||
+ | Определяет ширину внешнего пространства между правым бордюром и невидимой границей прямоугольника. | ||
+ | margin-top | ||
+ | Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника. | ||
+ | max-height | ||
+ | Определяет максимальную высоту элемента. | ||
+ | max-width | ||
+ | Определяет максимальную ширину элемента. | ||
+ | min-height | ||
+ | Определяет минимальную высоту элемента. | ||
+ | min-width | ||
+ | Определяет минимальную ширину элемента. | ||
+ | outline | ||
+ | Это быстрый способ задать следующие параметры: | ||
+ | outline-color | ||
+ | Определяет цвет контура вокруг элемента. | ||
+ | outline-style | ||
+ | Определяет вид контура вокруг элемента. | ||
+ | outline-width | ||
+ | Определяет ширину контура вокруг элемента. | ||
+ | quotes | ||
+ | Определяет вид открывающей и закрывающей кавычки в тексте. | ||
+ | table-layout | ||
+ | Определяет ширину столбцов в таблице. | ||
+ | |||
+ | ====== Сокращённые свойства CSS ====== | ||
+ | |||
+ | Некоторые свойства CSS принято называть сокращениями или сокращёнными свойствами (shorthand property). Они предоставляют короткий, | ||
+ | Список сокращённых свойств: | ||
+ | |||
+ | 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 | ||
+ | |||
+ | ====== Задание размеров (длина, | ||
+ | |||
+ | Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак «.» (точка). | ||
+ | |||
+ | Сразу после числа необходимо указать единицу измерения. | ||
+ | |||
+ | Существует множество единиц измерения. | ||
+ | |||
+ | em | ||
+ | Ширина буквы 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: | ||
+ | img.logo {height: 12px} | ||
+ | p {text-indent: | ||
+ | blockquote {padding-bottom: | ||
+ | table {border-width: | ||
+ | </ | ||
+ | |||
+ | |||
+ | ====== Блочная модель (Box Model) ====== | ||
+ | |||
+ | Как известно, | ||
+ | |||
+ | Практически любой элемент браузер воспринимает как прямоугольную область, | ||
+ | |||
+ | Предположим, | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | В приведенном примере бордюры изображены для наглядности, | ||
+ | |||
+ | Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, | ||
+ | |||
+ | Прямоугольная область, | ||
+ | |||
+ | * Собственно, | ||
+ | * Бордюр (рамка, | ||
+ | * Пространство между содержимым элемента и бордюром (англ. " | ||
+ | * Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. " | ||
+ | |||
+ | Существует два типа элементов - блочные (" | ||
+ | |||
+ | ===== Блочные (block) элементы ===== | ||
+ | |||
+ | Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, | ||
+ | | ||
+ | |||
+ | ===== Inline- (" | ||
+ | |||
+ | Имеют ширину как у своего содержимого. Это означает, | ||
+ | |||
+ | Любой веб-браузер содержит некий базовый встроенный набор правил, | ||
+ | |||
+ | С помощью CSS мы можем переопределять эти правила, | ||
+ | |||
+ | |||
+ | |||
+ | ====== Приоритет в каскаде стилей (!important) ====== | ||
+ | |||
+ | Объявление !important переводится на русский как !важно. | ||
+ | |||
+ | Если к паре свойство - значение приписать объявление !important, тогда это значение CSS-свойства получит максимальный приоритет в каскаде стилей. Проще говоря, | ||
+ | |||
+ | !important добавляется вот так: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Внимание! Очень распространённая ошибка – располагать !important после точки с запятой. Браузер игнорирует такие записи. | ||
+ | |||
+ | |||
+ | ====== Задание цвета в CSS ====== | ||
+ | |||
+ | CSS предлагает нам четыре удобных способа указать цвет. | ||
+ | |||
+ | * По имени. Используются англоязычные названия цветов, | ||
+ | * В шестнадцатиричном RGB (например, | ||
+ | * В десятичном формате RGB (например, | ||
+ | * В формате RGB с указанием величин в процентах, | ||
+ | |||
+ | Пример | ||
+ | <code css> | ||
+ | /* Несколько способов сделать параграфы зелеными: | ||
+ | p {color: lime} | ||
+ | p {color: rgb(0, | ||
+ | p {color: #0f0} | ||
+ | p {color: #00ff00} | ||
+ | p {color: rgb(0%, 100%, 0%)} | ||
+ | </ | ||
+ | |||
+ | В этом примере все способы задания цвета равнозначны и приведут к одному и тому же результату - цвет параграфов станет ярко-зеленым. | ||
+ | |||
+ | ====== Именованные цвета ====== | ||
+ | |||
+ | Это базовые цвета, используемые в CSS. В старые добрые времена они использовались дизайнерами для создания страниц поисковых систем, | ||
+ | |||
+ | < | ||
+ | <table cellspacing=1 cellpadding=5 border=0 width=" | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | Для старых 256-цветных видеокарт рекомендуется использовать так называемые безопасные цвета. Сейчас это не очень актуально, | ||
+ | |||
+ | ====== Безопасные (browser-safe) цвета в CSS ====== | ||
+ | |||
+ | |||
+ | Для получения любого оттенка применяются комбинации RGB-значений цвета, записанные в шестнадцатиричном формате(подробнее - см. Как задать цвет в CSS). | ||
+ | |||
+ | Приведенные ниже 216 цветов считаются " | ||
+ | |||
+ | Для удобства я расположил " | ||
+ | |||
+ | < | ||
+ | <table border=0 cellpadding=0 cellspacing=1 width=" | ||
+ | < | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | < | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | < | ||
+ | |||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | |||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | |||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </tr> | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
- | Важно: будет выбран только первый (!) заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой элемент, | + | <td style=" |
- | ) – то селектор не сработает и правило не применится. | + | <td style=" |
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | </ | ||
+ | <tr align=center> | ||
+ | <td style=" | ||
+ | <td style=" | ||
+ | <td style=" | ||
- | Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, | + | <td style=" |
+ | <td style=" | ||
+ | <td style=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | Подготовлено по материалам [[http:// |