Параметры рамки
Толщина рамки
CSS3 дает возможность веб-дизайнеру создавать рамку по границе элемента html-страницы. Для этих целей предназначены следующие атрибуты стиля:
- border-left-width - задает толщину левой стороны рамки;
- border-top-width - задает толщину верхней стороны рамки;
- border-right-width - задает толщину правой стороны рамки;
- border-bottom-width - задает толщину нижней стороны рамки.
Толщину рамки можно задавать либо абсолютным числовым значением, либо относительным, либо одним из предопределенных значений:
- thin - тонкая линия;
- medium - линия средней толщины;
- thick - толстая линия.
Атрибут стиля border-width указывает значения толщины сразу для всех сторон рамки:
border-width: <thickness 1>[<thickness 2>[<thickness 3>[<thickness 4>]]]
ПРИМЕР:
.class1 {border-width: 1px 1px 1px 1px} - первое значение задает толщину верхней линии; второе - правой линии; третье - нижней линии; четвертое - левой линии;
.class2 {border-width: 1px 1px 1px} - первое значение задает толщину верхней линии; второе - левой и правой линий; третье - нижней линии;
.class3 {border-width: 1px 1px} - первое значение задает толщину верхней и нижней линий; второе - левой и правой линий;
.class4 {border-width: 1px} - единственное значение задает толщину всех линий границ веб-элемента.
|
Цвет рамки
Цвет линии границы веб-элемента html-страницы задается атрибутами стиля:
- border-left-color - задает цвет левой стороны рамки;
- border-top-color - задает цвет верхней стороны рамки;
- border-right-color - задает цвет правой стороны рамки;
- border-bottom-color - задает цвет нижней стороны рамки.
Цвет рамки задается "явно", иначе она может быть не нарисована. Значение transparent задает "прозрачный" цвет рамки.
Атрибут стиля border-color задает цвет всех сторон рамки:
border-color: <color 1>[<color 2>[<color 3>[<color 4>]]]
Действие атрибута стиля border-color аналогично действию border-width.
ПРИМЕР:
H2 {
border-bottom-width: 3px;
border-bottom-color: yellow
}
TD {
border-width: medium;
border-color: olive
}
|
Вид рамки
Вид рамки задается атрибутами стиля:
- border-left-style - задает вид левой стороны рамки;
- border-top-style - задает вид верхней стороны рамки;
- border-right-style - задает вид правой стороны рамки;
- border-bottom-style - задает вид нижней стороны рамки.
Возможные значения:
- none - рамка отсутствует;
- hidden - рамка отсутствует;
- dotted - пунктирная линия;
- dashed - штриховая линия;
- solid - сплошная линия;
- double - двойная линия;
- groove - "вдавленная" трехмерная линия;
- ridge - "выпуклая" трехмерная линия;
- inset - трехмерная "выпуклость";
- outset - трехмерное "углубление".
Атрибут стиля border-style указывает вид линии для всех сторон рамки:
border-style: <style 1>[<style 2>[<style 3>[<style 4>]]]
Действие атрибута стиля border-style аналогично действию border-width и border-color.
ПРИМЕР:
H2 {
border-bottom-width: 3px;
border-bottom-color: yellow;
border-bottom-style: dashed
}
TD {
border-width: medium;
border-color: olive;
border-style: dotted
}
|
CSS3 позволяет веб-дизайнеру задавать сразу все параметры (толщину, вид, цвет) для левой, верхней, правой и нижней стороны рамки. Это делается при помощи атрибутов стиля: border-left; border-top; border-right; border-bottom.
Атрибут стиля border дает возможность задавать все параметры сразу для всех сторон рамки.
ПРИМЕР:
H2 {
border-bottom: 3px dashed yellow
}
TD {
border: medium dotted olive
}
|
Веб-мастер должен помнить, что рамки, как и отступы, изменяют размеры элемента html-страницы.
