Глава 5. Границы элемента
В этой главе мы поговорим о том, как сделать с помощью CSS рамку-бордюр вокруг того или иного элемента. В HTML эта задача лежала на плечах атрибута border, однако его можно было применить далеко не к каждому тегу (элементу), да и не всегда он мог решить ту или иную дизайнерскую задумку.
В CSS эту задачу берёт на себя одноимённое базовое свойство border и значительно расширяет круг возможностей при работе со стилем границы любого(!) элемента выводимого на экран.
Стиль границы
Если в HTML бордюр мог быть только в виде сплошной линии вокруг элемента, то в CSS это уже достаточно широкий набор возможных стилей рамок.
Свойство border-style может присваивать элементу 1 из ниже перечисленных стилей границы.
Пример:
<title>Стиль границы</title>
<style>p{background:#f5f}</style>
<p style=border-style:none>граница отсутствует
<p style=border-style:dotted>граница из ряда точек
<p style=border-style:dashed>пунктирная граница
<p style=border-style:solid>сплошная граница
<p style=border-style:double>двойная граница
<p style=border-style:groove>граница "бороздка"
<p style=border-style:ridge>граница "гребень"
<p style=border-style:inset>вдавленная граница
<p style=border-style:outset>выдавленная граница
Стиль бордюра может быть задан как для всех сторон элемента одновременно, так и для каждой его стороны отдельно в зависимости от того, сколько значений присвоено свойству border-style. Таковых значений может быть от 1 до 4 по числу сторон элемента.
В каждом из 4 случаев действуют свои "правила" по присуждению стиля рамки той или иной стороне элемента, которые приведены в таблице ниже:
Число значений | Результат | ||||||
---|---|---|---|---|---|---|---|
1 |
Пример:div{border-style:solid} 2 |
| Пример:div{border-style:solid double} 3 |
| Пример:div{border-style:solid double dashed} 4 |
| Пример:div{border-style:solid double dashed ridge} |
Толщина границы
Свойство border-width - устанавливает ширину границы элемента.
Ширина бордюра может быть заданна с помощью следующих аргументов:
А также в пикселях или любых других единицах измерения принятых в CSS.
По аналогии со стилем, толщина бордюра тоже может иметь от 1 до 4 значений и в каждом случае устанавливает ёе для тех или иных сторон бордюра как показано в таблице ниже.
Число значений | Результат | ||||||
---|---|---|---|---|---|---|---|
1 |
Пример:div{border-style:solid;border-width:1px} 2 |
| Пример:div{border-style:solid;border-width:1px 4px} 3 |
| Пример:div{border-style:solid;border-width:1px 4px 7px} 4 |
| Пример:div{border-style:solid;border-width:1px 4px 7px 5px} |
Пример:
<title>Толщина границы</title>
<div style="border-style:solid;border-width:3px 1px 10px 4px">
Толщина границ данного блока:
<li>Сверху 3 пикселя
<li>Справа 1 пиксель
<li>Снизу 10px
<li>Слева 4 пикселя
</ul>
</div>
<p>
<div style=border-style:double;border-width:thick>В этом блоке границы со всех сторон одинаково толстые</div>
Цвет границы
Цвет рамки или её сторон по отдельности определяется свойством border-color.
Цвет бордюра может иметь следующие значения:
Ну и так же как и в случаях с толщиной и стилем, цвет бордюра тоже может иметь от 1 до 4 цветовых значений при каждом "раскладе" окрашивая нужные стороны бордюра как показано в таблице ниже.
Число значений | Результат | ||||||
---|---|---|---|---|---|---|---|
1 |
Пример:div{border-style:solid;border-width:3px;border-color:#008} 1-е значение - Устанавливает единый цвет бордюра со всех сторон. 2 |
| Пример:div{border-style:solid;border-width:3px;border-color:#008 #0ff} 3 |
| Пример:div{border-style:solid;border-width:3px;border-color:#008 #0ff #ff0} 4 |
| Пример:div{border-style:solid;border-width:3px;border-color:#008 #0ff #ff0 #f00} |
Так вот перестраховываясь, привожу пример:
<title>Цвет границы</title>
<div style="border-style:solid;border-width:10px;border-color:#ff0 #f00 #00f #0ff">
<p style="border-style:double;border-width:5px;border-color:#008">Зелёный
<p style="border-style:double;border-width:5px;border-color:red;">Красный
<p style="border-style:double;border-width:5px;border-color:rgb(0,0,255);">Синий
</div>
Границы справа слева сверху и снизу отдельно
Для того, что бы определить стиль, цвет и ширину бордюра для 1 из сторон элемента, пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними "коллегами по цеху" список которых приведён ниже: border-bottom - Определяет стиль, цвет и ширину нижней границы элемента.
Не буду описывать каждый из них, думаю и так понятно, что дело обстоит, так же как и с их сородичами, свойствами border-style, border-width и border-color, кроме того факта, что в данном случае свойства указываются для 1 из сторон границы элемента.
Приведу пример:
<title>Граница слева</title>
<style>div{border-left:10px solid #008;background:#c6f}</style>
<div>
<p>В этом примере у контейнера div мы обозначили только его левую границу с помощью свойства border-left написав:
div{<p>
border-left:10px solid #008;<p>
background:#c6f;<p>}
<p>Такого же результата можно было бы добиться прописывая свойства стиля, толщины и цвета для левой границы элемента отдельно.
<p>Это выглядело бы вот так:
div{<p>
border-left-color:#008;<p>
border-left-style:solid;<p>
border-left-width:10px;<p>
background:#c6f;<p>} <p>Кстати Вам этот блок ничего не напоминает?
</div>
Border
Свойство border - базовый атрибут одновременно определяет стиль, цвет и толщину границы элемента.
Так как атрибут border является базовым, значения родственных свойств указываются в любом порядке через пробел.
Пример:
<title>border</title>
<style>div{border:RGB(25,125,25)6px ridge}</style>
<div>
<h3>А знаете ли Вы что:</h3>
<p>Слон - символ положительного характера - используется в Азии как царское верховное животное и высоко ценится за ум и хитрость.
. . .
</div>
Однако если Вы хотите присвоить разные свойства различным сторонам границы элемента или только 1 из них, пользуйтесь свойствами border-bottom, border-left, border-right, border-top.
Границы таблицы
Свойство CSS border-collapse определяет стиль отображения границ таблицы.
По умолчанию каждая ячейка таблицы имеет собственную рамку (ну если конечно использован атрибут HTML border или одноимённое свойство CSS), так вот в местах соприкосновения ячеек образуется двойная линия, border-collapse заставляет браузер анализировать таковые места и поступать с ними согласно присвоенному значению данному свойству.
Внешний вид границ таблицы может принимать следующий вид:
Пример:
<title>Стиль таблицы</title>
<table cellpadding=5 border=5>
<caption>Таблица с бордюром по умолчанию</caption>
<tr>
<td>ячейка<td>ячейка<td>ячейка<td>ячейка
<tr>
<td>ячейка<td>ячейка<td>ячейка<td>ячейка
</table>
<hr>
<table cellpadding=5 border=5 style="border-collapse:collapse">
<caption>А эта таблица использует свойство CSS border-collapse с значением collapse</caption>
<tr>
<td>ячейка<td>ячейка<td>ячейка<td>ячейка
<tr>
<td>ячейка<td>ячейка<td>ячейка<td>ячейка
</table>
Свойство border-collapse применяется только к тегу <table> и элементам, у которых атрибут display имет значение table или inline-table.О свойстве display расскажу в отдельной главе.
Полезные советы:
Довольно часто слышу вопрос: "Как сделать вертикальную линию, по аналогии с тегом hr - горизонтальная разделительная линия"?
1 из способов решения данной задачи является использование блока "пустышки" нужных размеров с левым или правым бордюром (свойства:border-left или border-right) необходимого стиля, который собственно и будет выступать в роли вертикальной линии.