Границы элементов в CSS
В этой главе мы рассмотрим стили границ элементов, используемые в таблицах стилей и их значения.
Границы элементов необходимы в ряде случаев для выделения этих самых элементов, что создает привлекательность странички и удобочитаемый текст. В свойствах границ элементов применяются следующие атрибуты:
border-top-color: - задает цвет верхней границы элемента страницы.
border-top-color: {Цвет}; Может задаваться посредством имени цвета или его шестнадцатиричным эквивалентом.
Пример:
border-top-color: red; <!--цвет верхней границы - красный-->border-bottom-color: - задает цвет нижней границы элемента страницы.
border-bottom-color: {Цвет}; Может задаваться посредством имени цвета или его шестнадцатиричным эквивалентом.
Пример:
border-bottom-color: #FF0000; <!--цвет нижней границы - красный-->border-left-color: - задает цвет левой границы элемента страницы.
border-left-color: {Цвет}; Может задаваться посредством имени цвета или его шестнадцатиричным эквивалентом.
Пример:
border-left-color: green; <!--цвет левой границы - зеленый-->border-right-color: - задает цвет правой границы элемента страницы.
border-right-color: {Цвет}; Может задаваться посредством имени цвета или его шестнадцатиричным эквивалентом.
Пример:
border-right-color: #008000; <!--цвет правой границы - зеленый-->border-color: - (для IE) задает цвет всех границ элемента страницы. Заменяет атрибуты border-top-color, border-right-color, border-bottom-color и border-left-color.
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится к верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.
Пример:
border-color: red; green; blue; <!--верхняя граница - красная, левая-правая - зеленая, нижняя - синяя-->border-color: - (для NN) задает цвет границ элемента страницы.
border-color: none|{Цвет};
Может быть задано либо цветное значение, либо none, обозначающее отсутствие границ.
Пример:
border-color: none; <!--без границ-->border: - задает все свойства границ элемента страницы в один прием. Заменяет атрибуты border-color, border-style и border-width. Значения этих атрибутов могут располагаться в любом порядке.
border: [{border-color}] [{border-style}] [{border-width}];
Значение по умолчанию none none medium.
Значение по умолчанию none none medium.
Пример:
border: none; none; medium; <!--границы без цвета, без типа, толщина - средняя-->border-top-style: - задает тип верхней границы элемента страницы.
border-top-style: none; - запрещает рисование границы (значение по умолчанию);
border-top-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-top-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-top-style: solid; - рисует сплошную линию;
border-top-style: double; - рисует двойную сплошную линию;
border-top-style: groove; - рисует трехмерную вдавленную границу;
border-top-style: ridge; - рисует трехмерную выпуклую границу;
border-top-style: inset; - рисует трехмерную "ступеньку вверх";
border-top-style: outset; - рисует трехмерную "ступеньку вниз".
border-top-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-top-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-top-style: solid; - рисует сплошную линию;
border-top-style: double; - рисует двойную сплошную линию;
border-top-style: groove; - рисует трехмерную вдавленную границу;
border-top-style: ridge; - рисует трехмерную выпуклую границу;
border-top-style: inset; - рисует трехмерную "ступеньку вверх";
border-top-style: outset; - рисует трехмерную "ступеньку вниз".
Пример:
border-top-style: solid; <!--рисует сплошную линию-->border-bottom-style: - задает тип нижней границы элемента страницы.
border-bottom-style: none; - запрещает рисование границы (значение по умолчанию);
border-bottom-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-bottom-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-bottom-style: solid; - рисует сплошную линию;
border-bottom-style: double; - рисует двойную сплошную линию;
border-bottom-style: groove; - рисует трехмерную вдавленную границу;
border-bottom-style: ridge; - рисует трехмерную выпуклую границу;
border-bottom-style: inset; - рисует трехмерную "ступеньку вверх";
border-bottom-style: outset; - рисует трехмерную "ступеньку вниз".
border-bottom-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-bottom-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-bottom-style: solid; - рисует сплошную линию;
border-bottom-style: double; - рисует двойную сплошную линию;
border-bottom-style: groove; - рисует трехмерную вдавленную границу;
border-bottom-style: ridge; - рисует трехмерную выпуклую границу;
border-bottom-style: inset; - рисует трехмерную "ступеньку вверх";
border-bottom-style: outset; - рисует трехмерную "ступеньку вниз".
Пример:
border-bottom-style: solid; <!--рисует сплошную линию-->border-left-style: - задает тип левой границы элемента страницы.
border-left-style: none; - запрещает рисование границы (значение по умолчанию);
border-left-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-left-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-left-style: solid; - рисует сплошную линию;
border-left-style: double; - рисует двойную сплошную линию;
border-left-style: groove; - рисует трехмерную вдавленную границу;
border-left-style: ridge; - рисует трехмерную выпуклую границу;
border-left-style: inset; - рисует трехмерную "ступеньку вверх";
border-left-style: outset; - рисует трехмерную "ступеньку вниз".
border-left-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-left-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-left-style: solid; - рисует сплошную линию;
border-left-style: double; - рисует двойную сплошную линию;
border-left-style: groove; - рисует трехмерную вдавленную границу;
border-left-style: ridge; - рисует трехмерную выпуклую границу;
border-left-style: inset; - рисует трехмерную "ступеньку вверх";
border-left-style: outset; - рисует трехмерную "ступеньку вниз".
Пример:
border-left-style: solid; <!--рисует сплошную линию-->border-right-style: - задает тип правой границы элемента страницы.
border-right-style: none; - запрещает рисование границы (значение по умолчанию);
border-right-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-right-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-right-style: solid; - рисует сплошную линию;
border-right-style: double; - рисует двойную сплошную линию;
border-right-style: groove; - рисует трехмерную вдавленную границу;
border-right-style: ridge; - рисует трехмерную выпуклую границу;
border-right-style: inset; - рисует трехмерную "ступеньку вверх";
border-right-style: outset; - рисует трехмерную "ступеньку вниз".
border-right-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-right-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-right-style: solid; - рисует сплошную линию;
border-right-style: double; - рисует двойную сплошную линию;
border-right-style: groove; - рисует трехмерную вдавленную границу;
border-right-style: ridge; - рисует трехмерную выпуклую границу;
border-right-style: inset; - рисует трехмерную "ступеньку вверх";
border-right-style: outset; - рисует трехмерную "ступеньку вниз".
Пример:
border-right-style: solid; <!--рисует сплошную линию-->border-style: - задает тип сразу всех границ элемента страницы в один прием. Заменяет атрибуты border-top-style, border-right-style, border-bottom-style и border-left-style.
border-style: none; - запрещает рисование границы (значение по умолчанию);
border-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-style: solid; - рисует сплошную линию;
border-style: double; - рисует двойную сплошную линию;
border-style: groove; - рисует трехмерную вдавленную границу;
border-style: ridge; - рисует трехмерную выпуклую границу;
border-style: inset; - рисует трехмерную "ступеньку вверх";
border-style: outset; - рисует трехмерную "ступеньку вниз".
border-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-style: solid; - рисует сплошную линию;
border-style: double; - рисует двойную сплошную линию;
border-style: groove; - рисует трехмерную вдавленную границу;
border-style: ridge; - рисует трехмерную выпуклую границу;
border-style: inset; - рисует трехмерную "ступеньку вверх";
border-style: outset; - рисует трехмерную "ступеньку вниз".
Пример:
border-style: ridge; <!--рисует трехмерную выпуклую границу-->border-top-width: - задает толщину верхней границы элемента страницы.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Значение по умолчанию medium.
Пример:
border-top-width: 3; <!--толщина верхней рамки-->border-bottom-width: - задает толщину нижней границы элемента страницы.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Значение по умолчанию medium.
Пример:
border-bottom-width: thin; <!--толщина нижней рамки - тонкая-->border-left-width: - задает толщину левой границы элемента страницы.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Значение по умолчанию medium.
Пример:
border-left-width: medium; <!--толщина левой рамки - средняя-->border-right-width: - задает толщину правой границы элемента страницы.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Значение по умолчанию medium.
Пример:
border-right-width: thick; <!--толщина правой рамки - толстая-->border-width: - задает толщину всех границ элемента страницы. Заменяет атрибуты border-top-width, border-right-width, border-bottom-width и border-left-width.
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится в верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick,, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick,, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Пример:
border-width: 2; 3; <!--толщина верхней и нижней рамки; толщина левой и правой рамки-->border-top: - задает все свойства верхней границы элемента страницы за один прием. Заменяет атрибуты border-top-color, border-top-style и border-top-width. Значения этих атрибутов могут располагаться в любом порядке.
border-top: [{border-top-color}] [{border-top-style}] [{border-top-width}];
Значение по умолчанию none medium none.
Значение по умолчанию none medium none.
Пример:
border-top: red; medium; 3; <!--цвет, тип и толщина верхней рамки-->border-bottom: - задает все свойства нижней границы элемента страницы за один прием. Заменяет атрибуты border-bottom-color, border-bottom-style и border-bottom-width. Значения этих атрибутов могут располагаться в любом порядке.
border-bottom: [{border-bottom-color}] [{border-bottom-style}] [{border-bottom-width}];
Значение по умолчанию none medium none.
Значение по умолчанию none medium none.
Пример:
border-bottom: red; medium; 3; <!--цвет, тип и толщина нижней рамки-->border-left: - задает все свойства левой границы элемента страницы за один прием. Заменяет атрибуты border-left-color, border-left-style и border-left-width. Значения этих атрибутов могут располагаться в любом порядке.
border-left: [{border-left-color}] [{border-left-style}] [{border-left-width}];
Значение по умолчанию none medium none.
Значение по умолчанию none medium none.
Пример:
border-left: red; medium; 3; <!--цвет, тип и толщина левой рамки-->border-right: - задает все свойства правой границы элемента страницы за один прием. Заменяет атрибуты border-right-color, border-right-style и border-right-width. Значения этих атрибутов могут располагаться в любом порядке.
border-right: [{border-right-color}] [{border-right-style}] [{border-right-width}];
Значение по умолчанию none medium none.
Значение по умолчанию none medium none.
Пример:
border-right: red; medium; 3; <!--цвет, тип и толщина правой рамки-->border-collapse: - задает, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет. Применяется только для тега <TABLE>.
border-collapse: separate; - разделяет границу таблицы и границы ее ячеек (значение по умолчанию);
border-collapse: collapse; - объединяет их.
border-collapse: collapse; - объединяет их.
Пример:
border-collapse: separate; <!--разделяет границу таблицы и границы ее ячеек-->
Шадуро Николай 