Каждая таблица стилей образуется из наборов правил. Чтобы лучше понять, что же такое правила, давайте разберем их структуру. Каждое правило имеет две основные части: селектор (selector) и блок объявлений (declaration block).

Структура правила CSS

Блок объявлений состоит из одного или более объявлений (declarations), а каждое объявление представляет собой сочетание свойства (property) и значения (value).

Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. В правой части правила находится блок объявлений, образованный одним или несколькими объявлениями. Каждое объявление представляет собой сочетание свойства CSS и значения этого свойства. Выше представлен блок, содержащий два объявления. Первое определяет, что согласно правилу цвет (color) указанных элементов документа будет красным (red), а второе — что фон (background) этих элементов будет желтым (yellow). Таким образом, все элементы H1 (определённые селектором) этого документа будут выводиться красным текстом на желтом фоне.

Текущая категория

Свойства CSS — border-top-style; border-right-style; border-bottom-style; border-left-style;

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

Значения:

<?php
none 
hidden dotted dashed solid double groove |
ridge |  inset outset inherit

Начальное значение: none
Область применения: все элементы
Наследование: нет
Вычисляемое значение: как задано

Свойства задания стиля рамки для одной стороны довольно наглядны. Например, для того чтобы изменить стиль нижней рамки, можно обратиться к свойству border-bottom-style.
Нет ничего необычного в том, чтобы применить border в сочетании со свойством задания стиля с одной стороны. Предположим, надо задать сплошную рамку с трех сторон заголовка, а слева рамка должна отсутствовать.

border-top-style; border-right-style; border-bottom-style; border-left-style

Это можно сделать двумя совершенно эквивалентными способами:

<?php
h2 
{border-stylesolid solid solid none;}
/* приведенное выше аналогично нижнему */ 
h2 {border-stylesolidborder-left-stylenone;}

Текущая категория

ПОЛЕЗНЫЕ ССЫЛКИ: