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

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

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

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

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

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

Эти свойства определяют ширину, цвет и стиль нижней(bottom), верхней(top), левой(left) и правой(right) рамки элемента. Как и в свойстве border, отсутствие значения стиля рамки ведет к ее отсутствию.

Значения:

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

Начальное значение: для сокращенной формы записи свойств не определено
Область применения: все элементы
Наследование: нет
Вычисляемое значение: смотри отдельные свойства (border-width и другие)

К сожалению, сокращенные варианты задания свойств, такие как border-color и border-style, не всегда так уж полезны, как может показаться. Предположим, вам захотелось применить толстую серую сплошную рамку ко всем элементам h2, но только снизу. Ограничившись уже рассмотренными свойствами, для задания такой рамки придется потратить немало времени. Вот два примера:

<?php
hi 
{
border-bottom-widththick;
border-bottom-stylesolid;
border-bottom-colorgray;
}     
/* вариант #1 */
hi {
border-width0 0 thick;
border-stylenone none solid
border-colorgray;
}     
/* вариант #2 */

Ни один из них не является на самом деле удобным, поскольку приходится набирать значительный объем текста. Есть лучшее решение:

<?php
h3 
{border-bottomthick solid gray;}

В результате значения применяются только к нижней рамке

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

<?php
hi 
{
border-leftЗрх solid green
border-rightblack 0.25em dotted
border-topthick silver inset;
border-bottomdouble red 10px;
}

таких сокращенных форм записи свойств всего четыре

Как видно, порядок значений не важен. Следующие три правила обеспечат совершенно аналогичную рамку:

<?php
h1 
{border-bottomЗрх solid gray;} 
h2 {border-bottomsolid gray Зрх;} 
h3 {border-bottomЗрх gray solid;}

Некоторые значения можно опустить и позволить вступить в силу значениям по умолчанию, как здесь:

<?php
h3 
{
colorgray;
border-bottomЗрх solid;
}

Поскольку цвет рамки не объявлен, вместо него подставляется значение по умолчанию (основной цвет элемента). Только помните, что если стиль рамки пропустить, то его стандартное значение none обеспечит ее отсутствие. А если задать только стиль, рамка будет.

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

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