| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Параметры рамки
|
|
Параметры рамки
CSS также позволяет нам создать сплошную, пунктирную или точечную рамку по воображаемой границе элемента Web-страницы. Атрибуты стиля border-left-width, border-top-width, border-right-width и border-bottom-width задают толщину, соответственно, левой, верхней, правой и нижней сторон рамки:
border-left-width|border-top-width|border-right-width|
border-bottom-width: thin|medium|thick|<толщина>|inherit
Мы можем указать либо абсолютное или относительное числовое значение толщины рамки, либо одно из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая). В последнем случае реальная толщина рамки зависит от Web-обозревателя. Значение толщины по умолчанию также зависит от Web-обозревателя, поэтому ее всегда лучше устанавливать явно. В листинге 11.2 мы указали толщину рамки у ячеек таблицы, равную одному пикселу.
Листинг 11.2
td, th {border-left-width: thin;
border-top-width: thin;
border-right-width: thin;
border-botton-width: thin }
А вот стиль, создающий у всех заголовков первого уровня рамку из одной только нижней стороны толщиной 5 пикселов:
h1 { border-bottom-width: 5px }
Фактически все заголовки первого уровня окажутся подчеркнутыми. Атрибут стиля border-width позволяет указать значения толщины сразу для всех сторон рамки:
border-width: <толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]
Если указано одно значение, оно задаст толщину всех сторон рамки.
Если указаны два значения, первое задаст толщину верхней и нижней, а второе — левой и правой сторон рамки.
Если указаны три значения, первое задаст толщину верхней, второе — левой и правой, а третье — нижней сторон рамки.
Если указаны четыре значения, первое задаст толщину верхней, второе — правой, третье — нижней, а четвертое — левой сторон рамки.
Пример:
td, th { border-width: thin }
Атрибуты стиля border-left-color, border-top-color, border-right-color и border-bottom-color задают цвет, соответственно, левой, верхней, правой и нижней сторон рамки:
border-left-color|border-top-color|border-right-color|
border-bottom-color: transparent|<цвет>|inherit
Значение transparent задает "прозрачный" цвет, сквозь который будет "просвечивать" фон родительского элемента.
На заметку!
Цвет рамки всегда следует задавать явно — в противном случае она может быть не нарисована.
Пример:
h1 { border-bottom-width: 5px
border-bottom-color: red }
Атрибут стиля border-color позволяет указать цвет сразу для всех сторон рамки:
border-color: <цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]
Он ведет себя так же, как и аналогичный атрибут стиля border-width:
td, th { border-width: thin;
border-color: black }
Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:
border-left-style|border-top-style|border-right-style|
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|
ridge|inset|outset|inherit
Здесь доступны следующие значения:
none и hidden — рамка отсутствует (обычное поведение);
dotted — пунктирная линия;
dashed — штриховая линия;
solid — сплошная линия;
double — двойная линия;
groove — "вдавленная" трехмерная линия;
ridge — "выпуклая" трехмерная линия;
inset — трехмерная "выпуклость";
outset — трехмерное "углубление".
Пример:
h1 { border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double }
Атрибут стиля border-style позволяет указать стиль сразу для всех сторон рамки:
border-style: <стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]
Он ведет себя так же, как и аналогичные атрибуты стиля border-width и border-color.
Пример:
td, th { border-width: thin;
border-color: black;
border-style: dotted }
Атрибуты стиля border-left, border-top, border-right и border-bottom позволяют задать все параметры для, соответственно, левой, верхней, правой и нижней стороны рамки:
border-left|border-top|border-right|border-bottom:
<толщина> <стиль> <цвет> | inherit
Во многих случаях эти атрибуты стиля оказываются предпочтительнее:
h1 { border-bottom: 5px double red }
"Глобальный" атрибут стиля border позволяет задать все параметры сразу для всех сторон рамки:
border: <толщина> <стиль> <цвет> | inherit
td, th { border: thin dotted black }
Рамки также увеличивают размеры элемента Web-страницы. Поэтому, если мы создадим рамки у блочных контейнеров, формирующих дизайн Web-страницы, то должны будем соответственно изменить размеры этих контейнеров, иначе они сместятся, и дизайн будет нарушен.
 
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
