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

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

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

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

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

Свойства CSS — border

Внутри полей элемента находятся его рамки (borders). Рамка элемента — это одна или несколько линий, окружающих содержимое и отступы элемента. Таким образом, фон элемента будет ограничен внешним краем рамки, поскольку фон не распространяется на поля, а рамки как раз граничат с внутренней стороны полей.

Каждая рамка характеризуется тремя параметрами: ее шириной (толщиной), стилем (представлением) и цветом.
border сокращенная форма задания значений свойств рамки элемента. Обратите внимание, что хотя ни одно из значений не является обязательным, отсутствие значения стиля рамки приведет к ее отсутствию, поскольку по умолчанию стиль рамки — none.

Значения:

<?php
[ <border-width> || <border-style> || <border-color> ] | inherit

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

Преимущество данного свойства состоит в его исключительной компактности, хотя она и вводит некоторые ограничения. Если вы хотите, чтобы все элементы hi имели толстую серебряную рамку, пишим стиль:

<?php
hi 
{
borderthick silver solid;
}

Если вы хотите, чтобы все элементы hi имели толстую серебряную

Значения применяются ко всем четырем сторонам рамки. Эту альтернативу, конечно, надо предпочесть следующему варианту:

<?php
hi 
{
border-topthick silver solid;
border-bottomthick silver solid;
border-rightthick silver solid
border-leftthick silver solid;
}

Недостаток свойства border — стиль, ширина и цвет могут быть заданы только глобально. Иначе говоря, значения border будут применяться ко всем четырем сторонам рамки. Для того чтобы рамка элемента была разной с каждой стороны, задавая ее, придется применять сокращенные формы задания свойства.

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

<?php
h4 
{border-styledashed solid double;}
h4 {bordermedium green;}

Здесь во втором правиле не задан стиль рамки, т. е. будет подставлено значение по умолчанию none, а у элементов h4 вообще не будет рамки.

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

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