Просмотр кода страницы Учебник по CSS3

оригинал статьи: http://www.wisdomweb.ru/CSS/css-first.php
-----
==Введение==
CSS расшифровывается '''C'''ascading '''S'''tyle '''S'''heets (Каскадные Документы Стилей).

С помощью CSS Вы можете оформлять HTML документы.

CSS было представлено вместе с HTML 4.0 и создавалось для разрешения проблем с оформлением, возникающих в предыдущих версиях HTML.

 #css table
 {
 border-collapse:collapse;
 font-family:'arial';
 }
 #css th
 {
 background-color:#DC63C2;
 padding:7px;
 font-size:1.1em;
 border:1px black solid;
 color:white;
 }
 #css td
 {
 padding:7px;
 border:1px solid;
 }


== CSS синтаксис ==

Таблицы стилей состоят из набора правил(1). Каждое правило состоит из одного или нескольких селекторов(3) и блока определения(2) выделяющегося фигурными скобками.

Блок определения может содержать одно или несколько свойств(4) отделенных точкой с запятой (;) (после последнего свойства точка с запятой необязательна). Каждое свойство должно иметь значение(5) отделенное двоеточием (:).

[[Файл:Csssyntax.jpg]]


=== CSS комментарии ===


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

Комментарии полностью игнорируются браузером при разборе таблиц стилей.

В CSS комментарии начинаются с "/*", и заканчиваются "*/", например:

 /* Правило перекрасит абзацы HTML документа в зеленый цвет */
 p {color:green;}
'''Обратите внимание:''' разбираться в коде с пояснениями намного проще, так что старайтесь использовать пояснения как можно чаще.



== Селекторы CSS ==
С помощью селекторов Вы можете выбирать элементы на странице, которые хотите оформить.
=== Селекторы тэгов ===
Вы можете выбирать элементы на странице для оформления по названию тэга.
 Пример
 p
 {
 color:green;
 }
 h2
 {
 color:red;
 }


=== Селектор id ===


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

Индикатор для элемента задается с помощью атрибута id (<p id="идентификатор">текст</p>).

Для того, чтобы затем оформить данный элемент необходимо обратится к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор {color:red}).

 Пример
 /* Оформим элемент с id="test1" */
 #test1 
 {
 color:green;
 font-family:verdana;
 font-size:1.2em;
 }

=== Селектор class ===


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

С помощью атрибута class можно задать, что элемент относится к группе (<p class="имя_группы">текст</p>).

Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).

 Пример
 /* Свойства будут применены ко всем элементам с class="test1" */
 .test1 
 {
 color:green;
 font-family:verdana;
 font-size:1.2em;
 }
 
'''Обратите внимание:''' имя группы и идентификатор может состоять только из латинских букв и не может начинаться с цифр.


 

=== Селекторы атрибутов ===


Элементы на странице могут быть выбраны по их атрибутам.

 Пример
 /* Оформит все элементы имеющие атрибут src */
 [src]
 {
 border:solid green 3px;
 }

Пример ниже оформит все элементы, которые ссылаются на главную страницу нашего сайта:

 Пример
 /* Оформит все элементы, атрибут href которых имеет значение http://www.wisdomweb.ru */
 [href="http://www.wisdomweb.ru"]
 {color:green;}


== Комбинирование селекторов ==

Для более точного выбора элементов в CSS может использоваться комбинирование селекторов.

Например, Вы можете комбинировать селекторы тэгов с селекторами class:

 Пример
 /* Свойства будут применены только к тем элементам с class="test1", которые являются заголовками */
 h2.test1 
 {
 color:green;
 font-family:verdana;
 font-size:1.2em;
 }

Также Вы можете комбинировать селекторы тэгов:

 Пример
 /* Свойства будут применены только к тем элементам p, которые находятся внутри элементов div */
 div p
 {
 color:green;
 font-family:verdana;
 font-size:1.2em;
 }

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

 Пример
 /* Свойства будут применены только к тем элементам p, которые идут сразу после элементов div */
 div+p
 {
 color:green;
 font-family:verdana;
 font-size:1.2em;
 }


=== Группировка селекторов ===

Часто при оформлении HTML документов с помощью CSS приходится применять одинаковые свойства для разных селекторов, например:

 h1
 {
 font-family:verdana;
 color:green;
 }
 h2
 {
 font-family:verdana;
 color:green
 }
 p
 {
 font-family:verdana;
 color:green;
 }

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

 Пример
 h1,h2,p
 {
 font-family:verdana;
 color:green;
 }
==Включения==


=== Внешнее объявление стилей ===


Внешнее объявление стилей используется в случаях, когда оформление задается для группы связанных HTML документов (например для целого веб-сайта).

В этом случае все оформление выносится в один внешний файл, на который должны ссылаться все документы веб-сайта.

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

Для того, чтобы подключить внешний файл стилей необходимо в секции head каждой страницы веб-сайта указать ссылку на него с помощью элемента <link>:

 Пример:
 <head>
 <link rel="stylesheet" type="text/css" href="адрес_внешнего_файла_стилей" />
 </head>

Внешний файл стилей является обычным текстовым файлом с расширением .css.

 Пример содержимого внешнего файла стилей:
 h1 {color:red;}
 p {margin-right:38px;}
 div {float:left;}
===Внутреннее объявление стилей===
Внутреннее объявление стилей используются в случаях, когда стиль нужно задать только для одного отдельного HTML документа.

В этом случае оформление определяется в секции head с помощью тэга style:

 Пример:
 <head>
 <style type='text/css'>
 h1 {color:red;}
 p {margin-right:38px;}
 div {float:left;}
 </style>
 </head>
===Строковое объявление стилей===
Строковое объявление стилей используется в случаях, когда необходимо оформить только один определенный элемент в HTML документе.

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

Атрибут style может содержать любые CSS свойства.

 Пример:
 <p style="font-size:1.3em"> Абзац оформленный с помощью CSS.</p>
===Приоритет стилей===

Стили подключенные разным способом имеют разный приоритет:
*Внешние стили: 1
*Внутренние стили: 2
*Строковые стили: 3

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

 Пример:
 /* Внутренние стили: */
 h1 {color:red}
 /* Строковые стили: */
 h1 {color:green}
 /* В результате заголовок будет зеленого цвета так как строковые стили имеют более высокий приоритет */

==Текст==
===Цвет текста===

С помощью CSS свойства color Вы можете изменять цвет текста HTML элементов.

Цвет может быть задан следующими способами:

*С помощью названия цвета (например 'red' задаст красный цвет);
*С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет);
*С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).

Пояснения:

Первый способ в основном используется для задания основных цветов, названия которых хорошо известны. Например red определит красный, blue - синий, white - белый.

Второй способ может использоваться для задания любых цветов и оттенков.

Синтаксис:

*rgb(красный,зеленый,голубой)
::красный число от 0 до 255 указывающее как много красного будет в итоговом оттенке.
::зеленый число от 0 до 255 указывающее как много зеленого будет в итоговом оттенке.
::голубой число от 0 до 255 указывающее как много голубого будет в итоговом оттенке.
Например rgb(255,0,0) задаст красный цвет, а rgb(0,255,0) зеленый. Смешивая красный с зеленым rgb(255,255,0) мы получим желтый.
[[Таблица цветов]]

Третий способ по функциональности эквивалентен второму, но более компактен. На практике в основном используют именно этот способ.

Синтаксис:

<nowiki>#красныйзеленыйголубой</nowiki>
*красный шестнадцатеричное число от 0 до ff указывающее как много красного будет в итоговом оттенке.
*зеленый шестнадцатеричное число от 0 до ff указывающее как много зеленого будет в итоговом оттенке.
*голубой шестнадцатеричное число от 0 до ff указывающее как много голубого будет в итоговом оттенке.

Например #ff0000 задаст красный цвет, а #00ff00 зеленый. Смешивая красный с зеленым #ffff00 мы получим желтый.

Перекрасим абзацы в зеленый цвет всеми перечисленными выше способами:
 p {color:green;}
 p {color:rgb(0,255,0);}
 p {color:#00ff00;}

'''Обратите внимание:''' удобно выбирать необходимые оттенки цвета можно с помощью подборщика цветов.

===Выравнивание текста===

С помощью CSS свойства text-align Вы можете выравнять текст элемента по горизонтали.

Текст может быть выравнен:

*По центру (значение center);
*По левому краю (left);
*По правому краю (right);
*По ширине (justify).

'''Обратите внимание:''' по ширине (justify) текст выравнивается путем растягивания всех строчек до одинаковой длины. Этот метод выравнивания часто используется в газетах и журналах.

 Пример
 p.ta1 {text-align:center;}
 p.ta2 {text-align:left;}
 p.ta3 {text-align:right;}
 p.ta4 {text-align:justify;}
 
===Свойство text-decoration===

С помощью CSS свойства text-decoration Вы можете сделать текст HTML элемента:

*Подчеркнутым (значение underline)
*Перечеркнутым (line-through)
*Отобразить над текстом элемента линию (overline)

 Пример
 p.td1 {text-decoration:underline;}
 p.td2 {text-decoration:line-through;}
 p.td3 {text-decoration:overline;}

Свойство text-decoration со значением none "очищает" текст от всех вышеперечисленных эффектов. Это может использоваться для создания не подчеркнутых ссылок.

 Пример
 a:link {text-decoration:none;}
 a:visited {text-decoration:none;}
 
'''Обратите внимание:''' подчеркивать обычный текст не рекомендуется, так как пользователи могут перепутать его со ссылкой.

===Отступ между словами и буквами в тексте===

С помощью CSS свойства letter-spacing Вы можете увеличивать или уменьшать отступ между буквами в тексте HTML элементов.

 Пример
 p.ls1 {letter-spacing:10px;}
 
С помощью свойства word-spacing Вы можете увеличивать или уменьшать отступ между словами в тексте HTML элементов.

 Пример
 p.ws1 {word-spacing:15px;}

===Основные CSS свойства оформления текста===

<table id="extab" border="1">
<tr>
<th>Свойство</th>
<th>Описание</th>
<th>Значения</th>
</tr>
<tr>
<td><b>direction</b></td>
<td> Устанавливает направление текста.
 p
 {
 direction:rtl;
 }
</td>
<td>*'''ltr''' - Текст будет отображается слева направо. Является значением по умолчанию.<br />
*'''rtl''' - Текст будет отображен справа налево.</td>
</tr>
<tr>
<td><b>line-height</b></td>
<td> Устанавливает высоту строки.</td>
<td>*'''normal''' - Браузер автоматически устанавливает высоту строк. Является значением по умолчанию.<br />
*'''пиксели'''- Высота строк устанавливается пользователем и может быть задана в px, em, cm, %. <br />
</td>
</tr>
<tr>
<td><b>text-indent</b></td>
<td> Устанавливает величину отступа первого символа текста.
 /* Величина отступа первого символа 
 элемента будет равна 30 пикселям */
 .ex1
 {
 text-indent:30px;
 }
</td>
<td>Позволяет задать величину отступа в px, em, cm, %.
</td>
</tr>
<tr>
<td><b>text-transform</b></td>
<td> Устанавливает регистр букв текста элемента.
 /* Все буквы элемента будут отображены заглавными */
 .ex1
 {
 text-transform:uppercase;
 }
</td>
<td>*'''none''' - Текст элемента будет отображен как есть. Является значением по умолчанию.<br />
*'''capitalize''' - Первая буква каждого слова в тексте элемента будет заглавной.<br />
*'''uppercase''' - Все буквы элемента будут отображены как заглавные.<br />
*'''lowercase''' - Все буквы элемента будут отображены как строчные.</td>
</tr>
<tr>
<td><b>vertical-align</b></td>
<td>Устанавливает вертикальное выравнивание элемента. 
 .ex1
 {
 vertical-align:top;
 }
 .ex2
 {
 vertical-align:bottom;
 }
</td>
<td>*'''sub''' - Выравнивает элемент как нижний индекс.
*'''super''' - Выравнивает элемент как верхний индекс.
*'''top''' - Выравнивает верхнюю часть элемента с верхней частью самого высокого элемента на линии.
*'''middle'''
*'''bottom''' - Выравнивает нижнюю часть элемента с нижней частью самого низкого элемента на линии.
*'''пиксели'''
*'''%'''
</td>
</tr>
<tr>
<td><b>white-space</b></td>
<td>Устанавливает как должны обрабатываться пробелы внутри элемента.
 /* Пробелы будут отображаться в том месте где они были употреблены */
 ex1
 {
 white-space:pre;
 }
</td>
<td>
*'''normal'''-Последовательность из подряд идущих пробелов будет сжата в один пробел. Текст будет переносится на новую строку когда это необходимо. Является значением по умолчанию.
*'''nowrap'''-Последовательность из подряд идущих пробелов будет сжата в один пробел. Текст не будет переносится на новую строку до тех пор пока не встретится тэг br.
*'''pre'''-Пробелы сохраняются. Текст может быть перенесен на новую строку только на разрывах строки (enter). Действие аналогично HTML тэгу pre.
*'''pre-line'''-Последовательность из подряд идущих пробелов будет сжата в один пробел. Текст будут переносится на новую строку когда это необходимо и на разрывах строки.
*'''pre-wrap'''-Пробелы сохраняются. Текст будут переносится на новую строку когда это необходимо и на разрывах строки.
</td>
</tr>
</table>

==Шрифт==
==Фон==
==Ссылки==
==Списки==
==Таблицы==
==Блоковая модель==
==Границы==
==Отступы==
==Отображение==
==Размещение==
==Выравнивание==
==Псевдо-классы==
==Усл. комментарии==
==Заключение==
===CSS свойства текста===
<p>Для того, чтобы узнать о желаемом свойстве больше и посмотреть
пример с его использованием щелкните на его названии.</p>
<table id="extab" border="1" style="margin-left: 0px;">
<tr>
<th style="width: 27%;">Свойство</th>
<th style="width: 61%;">Описание</th>
<th style="width: 12%;">Введено в</th>
</tr>

<tr>
<td><b>@font-face</b></td>
<td>Позволяет подключить к веб-страницам произвольные шрифты. 
<p>@font-face является контейнером, который включает в себя различные свойства для описания подключаемого шрифта.</p>

<p><b>Обратите внимание:</b> IE поддерживает шрифты только в формате .eof, а все остальные браузеры в форматах .ttf и .otf.</p>
<p>Свойства описания шрифта (<i>могут использоваться только внутри контейнера @font-face</i>):</p>

</td>
<td style="color: rgb(255, 0, 0);">
 @font-face {
 /* Задаем имя шрифта */
 font-family:heinrich; 
 /* Указываем местонахождение шрифта в формате .ttf */
 src:url('heinrich.ttf'),
 /* Указываем местонахождение шрифта в формате .eot */
 url('heinrich.eot')
 }
 // Применяем подключенный шрифт к div элементам страницы
 div {
 font-family:heinrich 
 }
</td>
</tr>



<tr>
<td><b>font</b></td>
<td>Позволяет установить все свойства шрифта (font-family,
font-size, font-style, font-variant, font-width) за одно определение. </td>
<td>CSS1</td>
</tr>



<tr>
<td><b>font-family</b></td>
<td>Позволяет установить шрифт текста.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>font-size</b></td>
<td>Позволяет установить размер текста.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>color</b></td>
<td>Позволяет установить цвет текста.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>text-shadow</b></td>
<td>Позволяет привязать тень (или несколько теней) к тексту
элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>text-decoration</b></td>
<td>Позволяет оформить текст элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>text-align</b></td>
<td>Позволяет определить горизонтальное выравнивание текста.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>letter-spacing</b></td>
<td>Позволяет определить расстояние между символами текста.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>word-spacing</b></td>
<td>Позволяет определить расстояние между словами текста.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>line-height</b></td>
<td>Позволяет установить высоту строк.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>font-style</b></td>
<td>Позволяет установить стиль шрифта элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>font-variant</b></td>
<td>Позволяет отобразить текст элемента капителью.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>font-width</b></td>
<td>Позволяет установить толщину шрифта.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>text-overflow</b></td>
<td>Позволяет указать как должен отображаться текст вышедший за
пределы границ элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>vertical-align</b></td>
<td>Позволяет установить вертикальное выравнивание текста.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>text-transform</b></td>
<td>Позволяет управлять регистром символов в тексте.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>text-indent</b></td>
<td>Позволяет установить величину отступа первого символа текста.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>text-justify</b></td>
<td>Позволяет установить алгоритм выравнивания для свойства
"text-align:justify".</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>word-wrap</b></td>
<td>Позволяет указать должны ли длинные слова, выходящие за
пределы родительского элемента, разбиваться и переносится на новую
строку или нет.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>white-space</b></td>
<td>Позволяет установить как должны оформляться пробелы в тексте
элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>quotes</b></td>
<td>Позволяет установить как должны оформляться кавычки
вставленные тэгом &lt;q&gt;.</td>
<td>CSS1</td>
</tr>

</table>

===CSS свойства выравнивания===
<p>Для того, чтобы узнать о желаемом свойстве больше и посмотреть
пример с его использованием щелкните на его названии.</p>
<table id="extab" border="1" style="margin-left: 0px;">

<tr>
<th style="width: 27%;">Свойство</th>
<th style="width: 61%;">Описание</th>
<th style="width: 12%;">Введено в</th>
</tr>
<tr>
<td><b>height</b></td>
<td>Позволяет установить высоту элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>width</b></td>
<td>Позволяет установить ширину элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>margin</b></td>
<td>Позволяет установить величину всех внешних отступов за одно
определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>margin-top</b></td>
<td>Позволяет установить величину внешнего отступа от верхней
части элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>margin-right</b></td>
<td>Позволяет установить величину внешнего отступа от правой
части элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>margin-bottom</b></td>
<td>Позволяет установить величину внешнего отступа от нижней
части элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>margin-left</b></td>
<td>Позволяет установить величину внешнего отступа от левой части
элемента. </td>
<td>CSS1</td>
</tr>
<tr>
<td><b>padding</b></td>
<td>Позволяет установить величину всех внутреннего отступов за
одно определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>padding-top</b></td>
<td>Позволяет установить величину внутреннего отступа от верхней
части элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>padding-right</b></td>
<td>Позволяет установить величину внутреннего отступа от правой
части элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>padding-bottom</b></td>
<td>Позволяет установить величину внутреннего отступа от нижней
части элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>padding-left</b></td>
<td>Позволяет установить величину внутреннего отступа от левой
части элемента. </td>
<td>CSS1</td>
</tr>
<tr>
<td><b>float</b></td>
<td>Прижимает элемент к указанной стороне родительского элемента
и заставляет последующие за ним элементы страницы "обтекать" его.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>position</b></td>
<td>Позволяет установить метод размещения элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>top</b></td>
<td>Позволяет установить величину отступа от верхней стороны
элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>right</b></td>
<td>Позволяет установить величину отступа от правой стороны
элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>bottom</b></td>
<td>Позволяет установить величину отступа от нижней стороны
элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>left</b></td>
<td>Позволяет установить величину отступа от левой стороны
элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>clear</b></td>
<td>Позволяет "очистить" элемент от действия float. </td>
<td>CSS2</td>
</tr>
<tr>
<td><b>max-height</b></td>
<td>Позволяет определить максимальную высоту элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>max-width</b></td>
<td>Позволяет определить максимальную ширину элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>min-height</b></td>
<td>Позволяет определить минимальную высоту элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>min-width</b></td>
<td>Позволяет определить минимальную ширину элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>z-index</b></td>
<td>Позволяет установить порядок отображения элементов в случае
их наложения друг на друга.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>clip</b></td>
<td>Позволяет обрезать элемент размещенный абсолютно.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>column-count</b></td>
<td>Позволяет разбить на указанное количество столбцов текст
элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>column-gap</b></td>
<td>Позволяет установить величину отступа между столбцами текста.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>column-width</b></td>
<td>Позволяет установить ширину столбцов.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>column-rule</b></td>
<td>Позволяет установить все свойства оформления разделителя для
столбцов текста за одно определение.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>column-rule-color</b></td>
<td>Позволяет установить цвет разделителя.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>column-rule-style</b></td>
<td>Позволяет установить стиль разделителя.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>column-rule-width</b></td>
<td>Позволяет установить ширину разделителя.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>column-span</b></td>
<td>Позволяет установить на сколько столбцов должен растягиваться
элемент.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>box-align</b></td>
<td>Позволяет установить способ выравнивания элементов потомков.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>box-direction</b></td>
<td>Позволяет установить направление отображения элементов
потомков.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>box-flex</b></td>
<td>Позволяет установить должны ли элементы потомки быть гибкими
в размерах или нет.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>box-ordinal-group</b></td>
<td>Позволяет установить порядок отображения элементов потомков.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>box-orient</b></td>
<td>Позволяет установить как должен быть ориентирован элемент.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>box-pack</b></td>
<td>Позволяет установить позицию элементов потомков в по
горизонтали в горизонтально ориентированных элементах и позицию по
вертикали в вертикально ориентированных элементах.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>

</table>
===CSS свойства фона===
<p>Для того, чтобы узнать о желаемом свойстве больше и посмотреть
пример с его использованием щелкните на его названии.</p>
<table border="1" id="extab" style="margin-left: 0px;">

<tr>
<th style="width: 27%;">Свойство</th>
<th style="width: 61%;">Описание</th>
<th style="width: 12%;">Введено в</th>
</tr>
<tr>
<td><b>background</b></td>
<td>Позволяет установить все свойства фона за одно определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>background-size</b></td>
<td>Позволяет установить размер фонового изображения.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>background-attachment</b></td>
<td>Позволяет определить должна ли фоновая картинка быть
закреплена или должна прокручиваться с остальным содержимым страницы.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>background-color</b></td>
<td>Позволяет установить цвет фона элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>background-image</b></td>
<td>Позволяет установить фоновую картинку для элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>background-position</b></td>
<td>Позволяет установить координаты местоположения фоновой
картинки.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>background-repeat</b></td>
<td>Позволяет установить как должна повторятся фоновая картинка
для того, чтобы заполнить фон элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>background-clip</b></td>
<td>Позволяет указывать как должен обрезаться фон элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>background-origin</b></td>
<td>Позволяет задать позицию, от которой будет отсчитываться
местоположение фонового изображения.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>

</table>
===CSS свойства границ===
<p>Для того, чтобы узнать о желаемом свойстве больше и посмотреть
пример с его использованием щелкните на его названии.</p>
<table border="1" id="extab" style="margin-left: 0px;">

<tr>
<th style="width: 27%;">Свойство</th>
<th style="width: 61%;">Описание</th>
<th style="width: 12%;">Введено в</th>
</tr>
<tr>
<td><b>border</b></td>
<td>Позволяет установить все свойства границ за одно определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-color</b></td>
<td>Позволяет определить цвет для всех границ элемента за одно
определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-style</b></td>
<td>Позволяет определить стиль для всех границ элемента за одно
определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-width</b></td>
<td>Позволяет установить ширину всех границ элемента за одно
определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-radius</b></td>
<td>Позволяет определить форму всех углов элемента за одно
определение.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>border-bottom-left-radius</b></td>
<td>Позволяет определить форму нижнего левого угла элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>border-bottom-right-radius</b></td>
<td>Позволяет определить форму нижнего правого угла элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>border-top-left-radius</b></td>
<td>Позволяет определить форму верхнего левого угла элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>border-top-right-radius</b></td>
<td>Позволяет определить форму верхнего правого угла элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>border-image</b></td>
<td>Позволяет использовать изображение в качестве границы
элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>border-top</b></td>
<td>Позволяет установить все свойства для верхней границы
элемента за одно определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-top-color</b></td>
<td>Позволяет определить цвет верхней границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-top-style</b></td>
<td>Позволяет определить стиль верхней границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-top-width</b></td>
<td>Позволяет определить ширину верхней границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-left</b></td>
<td>Позволяет установить все свойства для левой границы элемента
за одно определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-left-color</b></td>
<td>Позволяет определить цвет левой границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-left-style</b></td>
<td>Позволяет определить стиль левой границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-left-width</b></td>
<td>Позволяет определить ширину левой границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-bottom</b></td>
<td>Позволяет установить все свойства нижней границы за одно
определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-bottom-color</b></td>
<td>Позволяет определить цвет нижней границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-bottom-style</b></td>
<td>Позволяет определить стиль нижней границы элемента.</td>
</tr>
<tr>
<td><b>border-bottom-width</b></td>
<td>Позволяет определить ширину нижней границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-right</b></td>
<td>Позволяет установить все свойства для правой границы элемента
за одно определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-right-color</b></td>
<td>Позволяет определить цвет правой границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-right-style</b></td>
<td>Позволяет определить стиль правой границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-rigth-width</b></td>
<td>Позволяет определить ширину правой границы элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>outline</b></td>
<td>Позволяет установить все свойства внешней границы за одно
определение.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>outline-color</b></td>
<td>Позволяет определить цвет внешней границы элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>outline-style</b></td>
<td>Позволяет определить стиль внешней границы элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>outline-width</b></td>
<td>Позволяет определить ширину внешней границы элемента.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>outline-offset</b></td>
<td>Позволяет установить величину смещения внешней границы от
границы элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
</table>
===CSS свойства переходов и анимации===
<p>Для того, чтобы узнать о желаемом свойстве больше и посмотреть
пример с его использованием щелкните на его названии.</p>
<table  border="1" id="extab" style="margin-left: 0px;">
<tr>
<th style="width: 27%;">Свойство</th>
<th style="width: 61%;">Описание</th>
<th style="width: 12%;">Введено в</th>
</tr>
<tr>
<td><b>@keyframes</b></td>
<td>Блок для определения анимации.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>animation</b></td>
<td>Позволяет установить все свойства анимации (<i>кроме
animation-play-state</i>) за одно определение.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>animation-name</b></td>
<td>Позволяет установить имя анимации.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>animation-duration</b></td>
<td>Позволяет указать время выполнения анимации в секундах.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>animation-timing-function</b></td>
<td>Позволяет указать функцию смягчения отвечающую за плавность
выполнения анимации.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>animation-delay</b></td>
<td>Позволяет установить величину задержки перед началом
выполнения анимации.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>animation-iteration-count</b></td>
<td>Позволяет установить количество повторов анимации.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>animation-direction</b></td>
<td>Позволяет указать должна ли анимация выполняться в обратном
порядке или нет.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>animation-play-state</b></td>
<td>Позволяет указать должна ли анимация выполняться или быть
остановлена.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>transition</b></td>
<td>Позволяет задать все свойства переходов за одно определение.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>transition-property</b></td>
<td>Позволяет указать CSS свойства, которые будут задействованы
для создания перехода.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>transition-duration</b></td>
<td>Позволяет указать время, в течении которого будет совершен
переход.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>transition-timing-function</b></td>
<td>Позволяет указать функцию смягчения отвечающую за плавность
выполнения перехода.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>transition-delay</b></td>
<td>Позволяет установить величину задержки перед началом
выполнения перехода.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
</table>
===CSS свойства таблиц и списков===
<p>Для того, чтобы узнать о желаемом свойстве больше и посмотреть
пример с его использованием щелкните на его названии.</p>
<table  border="1" id="extab" style="margin-left: 0px;">
<tr>
<th style="width: 27%;">Свойство</th>
<th style="width: 61%;">Описание</th>
<th style="width: 12%;">Введено в</th>
</tr>
<tr>
<td><b>list-style</b></td>
<td>Позволяет определить все свойства списков за одно определение.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>list-style-image</b></td>
<td>Позволяет установить произвольную картинку вместо маркера
списка.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>list-style-position</b></td>
<td>Позволяет определить где должен отображаться маркер списка. </td>
<td>CSS1</td>
</tr>
<tr>
<td><b>list-style-type</b></td>
<td>Позволяет определить вид маркера списка.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>border-collapse</b></td>
<td>Позволяет установить должны ли границы таблицы и ячеек
соединится.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>border-spacing</b></td>
<td>Позволяет установить расстояние между границами смежных ячеек.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>caption-side</b></td>
<td>Позволяет установить место расположения табличного заголовка.
</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>empty-cells</b></td>
<td>Позволяет установить как должны отображаться пустые табличные
ячейки. </td>
<td>CSS2</td>
</tr>

</table>
===CSS остальные свойства===
<p>Для того, чтобы узнать о желаемом свойстве больше и посмотреть
пример с его использованием щелкните на его названии.</p>
<table border="1" id="extab" style="margin-left: 0px;">

<tr>
<th style="width: 27%;">Свойство</th>
<th style="width: 61%;">Описание</th>
<th style="width: 12%;">Введено в</th>
</tr>
<tr>
<td><b>display</b></td>
<td>Позволяет установить способ отображения элемента.</td>
<td>CSS1</td>
</tr>
<tr>
<td><b>opacity</b></td>
<td>Позволяет установить уровень прозрачности элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>appearance</b></td>
<td>Позволяет превратить тэг в указанный элемент
пользовательского интерфейса.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>resize</b></td>
<td>Позволяет сделать элемент растягиваемым.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>overflow</b></td>
<td>Позволяет указать, что должно случится если содержимое
элемента выйдет за его границы.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>visibility</b></td>
<td>Позволяет установить должен ли элемент быть видимым.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>cursor</b></td>
<td>Позволяет установить вид курсора мыши.</td>
<td>CSS2</td>
</tr>
<tr>
<td><b>transform</b></td>
<td>Позволяет трансформировать элемент.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>transform-origin</b></td>
<td>Позволяет изменить местоположение трансформированного
элемента.</td>
<td><span style="color: rgb(255, 0, 0);">CSS3</span></td>
</tr>
<tr>
<td><b>content</b></td>
<td>Позволяет вставлять произвольное содержимое.</td>
<td>CSS2</td>
</tr>
</table>