border
Суммирующее свойство, позволяющее присвоить значения свойствам border-color, border-style и border-width одной строкой. Либо любым нескольким из них. Необходимо просто перечислить необходимые значения нужных свойств через пробелы, в любом порядке, а браузер сам определит, что к чему относится. Экономия времени и места. Синтаксис свойства:
border: border-width || border-style || border-color
Также можно работать с каждой стороной по отдельности, для этого используются свойства
border-left, border-right, border-top, border-bottom.
Пример:
<div style="
border:dashed lime 1px; border-bottom: medium solid green; text-align:center">результат воздействия</div> -
результат воздействия
а)
border-color
Цвет границ. Может указывать либо цвет всех сторон элемента одновременно, либо цвет каждой границы в отдельности, либо цвета определённых комбинаций сторон. Выбор варианта автоматически определяется браузером по количеству указанных через пробел значений цвета. Возможные варианты:
1 значение - цвет задаётся для всех границ элемента
2 значения - первый аргумент задаёт цвет верхней и нижней границ, второй - левой и правой
3 значения - первый аргумент задаёт цвет верхней границы, второй - левой и правой, третий - нижней
4 значения - последовательно задаются значения для верхней, правой, нижней и левой границ
Можно также обратиться к цвету отдельной стороны с помощью свойств
border-left-color, border-right-color, border-top-color, border-bottom-color.
В качестве значения кроме непосредственного
указания цвета можно использовать слово
transparent (прозрачный цвет). Также отмечу, что цвет имеет смысл задавать только совместно с использованием свойства border-style.
Примеры:
<table style="border-style:solid;
border-color:orange; border-top-color:transparent"> . . . </table> -
| Ячейка | Ячейка
|
| Ячейка | Ячейка
|
<table style="border-style:solid;
border-color:red yellow green"> . . . </table> -
| Ячейка | Ячейка
|
| Ячейка | Ячейка
|
(transparent - англ. прозрачный)
б)
border-style
Стиль границ. Может указывать либо стиль всех сторон элемента одновременно, либо стиль каждой границы в отдельности, либо стили определённых комбинаций сторон. Выбор варианта автоматически определяется браузером по количеству указанных через пробел значений стиля. Возможные варианты:
1 значение - стиль задаётся для всех границ элемента
2 значения - первый аргумент задаёт стиль верхней и нижней границ, второй - левой и правой
3 значения - первый аргумент задаёт стиль верхней границы, второй - левой и правой, третий - нижней
4 значения - последовательно задаются значения для верхней, правой, нижней и левой границ
Можно также обратиться к стилю отдельной стороны с помощью свойств
border-left-style, border-right-style, border-top-style, border-bottom-style.
Возможные значения:
| none
| рамка отсутствует (по умолчанию)
| Образец
| Образец2
| Образец3
| none - англ. никакой, ничто
|
| dotted
| точечная линия рамки
| Образец
| Образец2
| Образец3
| dot - англ. точка
|
| dashed
| прерывистая линия
| Образец
| Образец2
| Образец3
| dash - англ. штрих, черта, тире
|
| solid
| сплошная одинарная линия
| Образец
| Образец2
| Образец3
| solid - англ. сплошной, цельный
|
| double
| сплошная двойная линия
| Образец
| Образец2
| Образец3
| double - англ. двойной
|
| groove
| трёхмерная вдавленная линия
| Образец
| Образец2
| Образец3
| groove - англ. канавка, желоб
|
| ridge
| трёхмерная выпуклая линия
| Образец
| Образец2
| Образец3
| ridge - англ. гребень горы/борозды, топорщиться
|
| inset
| трёхмерная граница типа ступенька вниз
(текст как бы расположен в своеобразном углублении)
| Образец
| Образец2
| Образец3
| inset - англ. помещать внутрь
|
| outset
| трёхмерная граница типа ступенька вверх
(текст возвышается над прочим содержимым)
| Образец
| Образец2
| Образец3
| outset - англ. извлекать наружу
|
(Отображение стилей groove, ridge, inset и outset сильно зависит от браузера.)
Примеры:
<div style="
border-style:dashed; border-bottom-style:solid; text-align:center">результат воздействия</div> -
результат воздействия
<div style="
border-style:double none; text-align:center">результат воздействия</div> -
результат воздействия
в)
border-width
Толщина границы. Может указывать либо толщину всех сторон элемента одновременно, либо толщину каждой границы в отдельности, либо толщины определённых комбинаций сторон. Выбор варианта автоматически определяется браузером по количеству указанных через пробел значений толщины. Возможные варианты:
1 значение - толщина задаётся для всех границ элемента
2 значения - первый аргумент задаёт толщину верхней и нижней границ, второй - левой и правой
3 значения - первый аргумент задаёт толщину верхней границы, второй - левой и правой, третий - нижней
4 значения - последовательно задаются толщины для верхней, правой, нижней и левой границ
Можно также обратиться к толщине отдельной стороны с помощью свойств
border-left-width, border-right-width, border-top-width, border-bottom-width.
Толщину имеет смысл задавать только при прописанном свойстве border-style. Возможные значения border-width указаны ниже. Уточню, что словесным обозначениям в различных браузерах сопоставлены чуточку различные пикселные эквиваленты. Значение по умолчанию - medium.
| thin
| тонкая граница
(≈ 1-2 px)
| Образец
| thin - англ. тонкий, слабый
|
| medium
| граница средней толщины
(≈ 3-4 px)
| Образец
| medium - англ. середина, средний
|
| thick
| толстая граница
(≈ 5-6 px)
| Образец
| thick - англ. толстый, густой
|
| или можно точно указать ширину рамки элемента в одной из абсолютных единиц измерения CSS.
|
Примеры:
<div style="border-style:solid;
border-width:1px; border-bottom-width:medium; text-align:center">результат воздействия</div> -
результат воздействия
<div style="border-style:solid;
border-width:1px thin medium thick; text-align:center">результат воздействия</div> -
результат воздействия
outline
Суммирующее свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента одновременно. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину.
Синтаксис свойства:
outline: outline-style || outline-color || outline-width
Значение outline-style обязательно должно быть указано, иначе outline-color и outline-width применять будет не к чему.
Свойство не функционировало в IE7, но заработало в IE8.
Наблюдение: IE не функционирует, если в качестве определения типа элемента использовано <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> , <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> (без URL-адреса) или определения типа документа вообще нет. В 4-х других случаях работает.
г)
outline-color
Цвет внешней границы элемента. Имеет смысл использовать только совместно со свойством outline-style, иначе окрашиваться будет нечему.
Пример:
| <div style="border:1px solid blue; height:80px; width:160px; outline-style:dashed; outline-width:10px; outline-color: pink">Образец</div>
| Образец
|
д)
outline-style
Стиль внешней границы элемента.
Возможные значения:
| none
| рамка отсутствует (по умолчанию)
| Образец
|
| Образец2
|
| Образец3
| none - англ. никакой, ничто
|
| dotted
| точечная линия рамки
| Образец
|
| Образец2
|
| Образец3
| dot - англ. точка
|
| dashed
| прерывистая линия
| Образец
|
| Образец2
|
| Образец3
| dash - англ. штрих, черта, тире
|
| solid
| сплошная одинарная линия
| Образец
|
| Образец2
|
| Образец3
| solid - англ. сплошной, цельный
|
| double
| сплошная двойная линия
| Образец
|
| Образец2
|
| Образец3
| double - англ. двойной
|
| groove
| трёхмерная вдавленная линия
| Образец
|
| Образец2
|
| Образец3
| groove - англ. канавка, желоб
|
| ridge
| трёхмерная выпуклая линия
| Образец
|
| Образец2
|
| Образец3
| ridge - англ. гребень горы/борозды, топорщиться
|
| inset
| трёхмерная граница типа ступенька вниз
(текст как бы расположен в своеобразном углублении)
| Образец
|
| Образец2
|
| Образец3
| inset - англ. помещать внутрь
|
| outset
| трёхмерная граница типа ступенька вверх
(текст возвышается над прочим содержимым)
| Образец
|
| Образец2
|
| Образец3
| outset - англ. извлекать наружу
|
(Отображение стилей groove, ridge, inset и outset сильно зависит от браузера.)
е)
outline-width
Ширина внешней границы элемента. Имеет смысл использовать только совместно со свойством outline-style, иначе масштабироваться будет нечему.
Возможные значения:
(по умолчанию)
(3px)
| Образец
| <div style="border:1px solid blue; height:80px; width:160px; outline-style:dotted">Образец</div>
|
thin
(обычно 1px)
| Образец
| <div style="border:1px solid blue; height:80px; width:160px; outline-style:dotted; outline-width:thin">Образец</div>
|
medium
(3px)
| Образец
| <div style="border:1px solid blue; height:80px; width:160px; outline-style:dotted; outline-width:medium">Образец</div>
|
thick
(6px)
| Образец
| <div style="border:1px solid blue; height:80px; width:160px; outline-style:dotted; outline-width:thick">Образец</div>
|
Абсолютные единицы
измерения CSS
| Пример
| <div style="border:1px solid blue; height:80px; width:160px; outline-style:dotted; outline-width:8px">Пример</div>
|
