Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Расположение и границы : border-style
Материал из Справочник Web-языков.
Содержание |
[править] Атрибут border-style | Свойство borderStyle
Это свойство устанавливает стиль для всех границ элемента одновременно.
[править] Синтаксис
| HTML | { border-style : sStyle } |
| Скрипты | [ sStyle = ] object.style.borderStyle |
[править] Возможные значения
- sStyle
- Строка, которая может определять и принимать одно из следующих значений:
none Значение по умолчанию. Линия не отображается, и значение ее толщины обнуляется. Значение borderWidth не принимается во внимание. dotted Граница представляет собой линию, состоящую из набора точек. Это значение поддерживается на платформе Macintosh, начиная с браузера Microsoft Internet Explorer 4.01 и на платформе Windows, начиная с браузера Internet Explorer 5.5. На платформах Unix и Windows с ранними версиями браузера Internet Explorer граница, для которой установлено это значение, отображается в виде сплошной линии. dashed Граница представляет собой пунктирную линию, состоящую из серии коротких отрезков. Это значение поддерживается на платформе Macintosh, начиная с браузера Microsoft Internet Explorer 4.01 и на платформе Windows, начиная с браузера Internet Explorer 5.5. На платформах Unix и Windows с ранними версиями браузера Internet Explorer граница, для которой установлено это значение, отображается в виде сплошной линии. solid Граница представляет собой сплошную линию. double Граница представляет собой двойную линию. Суммарная толщина двух отдельных линий и расстояние между ними зависит от значения параметра borderWidth. Оно должно быть равно по крайней мере 3 пикселям, чтобы граница могла быть отображена в виде двойной линии. groove Граница отображается в виде вдавленной линии. ridge Граница отображается в виде рельефной линии. inset Граница отображается в виде вдавленной псевдотрехмерной линии. outset Граница отображается в виде выпуклой псевдотрехмерной линии. window-inset Граница отображается также как при значении inset, но добавляется дополнительная тонкая выпуклая рамка. Доступно в браузере Internet Explorer, начиная с версии 6. hidden Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще. Границы со значением none имеют меньший приоритет. Доступно в браузере Internet Explorer, начиная с версии 8.
Свойство borderStyle не наследуется, то есть должно быть определено отдельно для каждого элемента. Значением по умолчанию является none.
Одновременно может быть определено до четырех значений для данного свойства:
Одно значение Стиль задается одновременно для всех границ элемента. Два значения Первое задает стиль верхней и нижней границ, а второе - левой и правой. Три значения Первое задает стиль верхней границы, второе - одновременно левой и правой, третье - нижней. Четыре значения Значения для границ задаются по часовой стрелке, начиная с верхней границы. Порядок задания стиля: верхняя, правая, нижняя и левая границы.
[править] Замечания
Если свойство borderWidth больше нуля, то чтобы оно применялось, его необходимо задать для атрибута border-style.
В Internet Explorer 5.5 borderStyle применяется для строковых объектов. В ранних версиях Windows Internet Explorer строковые объекты должны были быть описаны с помощью position: absolute, чтобы использовать это свойство. Формат элемента устанавливается путем задания значений свойствам height и width.
[править] Примеры
Следующие примеры иллюстрируют применение свойства borderStyle и атрибута border-style для задания стиля границ объекта.
В первом примере используется атрибут border-style для задания стиля groove границам элемента при наведении на него курсора мыши.
<head>
<style type="text/css">
td {
border-style: solid;
border-width: 0.5cm;
}
.change {
border-style: groove;
}
</style>
</head>
<body>
<table border="">
<tr>
<td onmouseover="this.className='change'" onmouseout="this.className=''">
<img src="sphere.jpg" alt="spere image">
</td>
</tr>
</table>
Во втором примере для изменения стиля границ элемента на groove применяется свойство borderStyle.
<td onmouseover="this.style.borderWidth='0.5cm';
this.style.borderStyle='groove'">
[править] Стандарты
Это свойство определено в
[править] Поддерживаемые браузеры
Internet Explorer 8.0, в версиях 6.0 и 7.0 возможны ошибки
Opera 8.0, 9.2, 9.5
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0
[править] Смотри также
[править] Ссылки на источники
