С помощью каскадных таблиц стилей можно простыню текста превратить в ясную, логически чёткую и красивую
веб-страницу. Для этого используются различные приёмы акцентирования и выделения, одним из которых является
заключение части текста внутрь области, имеющей чёткие границы. Причём границы могут быть самыми разными:
одиночными, двойными, сплошными, пунктирными, разноцветными и т.д. Здесь вы можете проявить всю свою
фантазию и талант дизайнера. Давайте посмотрим, как и что можно сделать с помощью CSS с границами.
Как мы уже знаем, за оформление границ отвечает универсальное свойство border. С его помощью мы
можем установить толщину, стиль и цвет границ, причём это всё можно делать одновременно, то есть в
описании одного свойства. При этом значения просто разделяются пробелом, при разборе браузер сам определит, что
к чему относится.
Теперь давайте пройдём конкретно по каждому пункту:
border-width - определяет толщину границы, значение задаётся в пикселях, например:
border-width: 5px;;
border-style - определяет внешний вид границы, может принимать следующие значения:
dotted - пунктирная линия,
dashed - линия в виде штрихов,
solid - сплошная линия, непрерывная,
double - двойная сплошная линия,
groove - линия-канавка, углубленная,
ridge - линия в виде гребня, выступающая,
inset - граница в виде внутреннего скоса,
outset - наоборот, внешний скос.
border-color - устанавливает цвет границы, может указываться любым, допустимым CSS, способом.
Для наглядности, посмотрим на конкретном примере:
Может быть соблазнительно разместить всего понемногу на домашней странице, но на самом деле лучше
использовать ее для выделения других областей контента на сайте и направления на них трафика. Используйте
домашнюю страницу как любую другую страницу на сайте и определите для нее некоторое назначение
(например, показать, что есть нового, предоставить обзор, просто представить группу и направить людей
дальше на сайт и т.д.).
Описание правил CSS для этого случая:
Кроме того, вы можете для каждой стороны элемента описать свой цвет, толщину и стиль! А можете описать границу только с
одной или 2 сторон, тогда получится тоже очень интересный эффект. Для этого нужно использовать свойства border-top,
border-right, border-bottom и border-left, например:
В большинстве Web-браузеров текст, помеченный как предварительно форматированный, будет выводиться
пользователю в том же виде, как он представлен в источнике, иногда с помощью шрифта фиксированной ширины
(моноширинный), что придает тексту вид как бы отпечатанного на машинке.
Описание правил CSS в этом случае:
Пробуйте и экспериментируйте. До встречи в следующем уроке!
