 |
Границы справа слева сверху и снизу отдельно.
|
|
|
|
Для того, что бы определить стиль, цвет и ширину бордюра для одной из сторон элемента, пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними "коллегами по цеху" список которых приведён ниже:
border-bottom - Определяет стиль, цвет и ширину нижней границы элемента.
- border-bottom-color - Устанавливает цвет нижней границы элемента.
- border-bottom-style - Определяет стиль нижней границы элемента.
- border-bottom-width - Определяет ширину нижней границы элемента.
border-left - Определяет стиль, цвет и ширину левой границы элемента.
- border-left-color - Устанавливает цвет левой границы элемента.
- border-left-style - Определяет стиль левой границы элемента.
- border-left-width - Определяет ширину левой границы элемента.
border-right - Определяет стиль, цвет и ширину правой границы элемента.
- border-right-color - Устанавливает цвет правой границы элемента.
- border-right-style - Определяет стиль правой границы элемента.
- border-right-width - Определяет ширину правой границы элемента.
border-top - Определяет стиль, цвет и ширину верхней границы элемента.
- border-top-color - Устанавливает цвет верхней границы элемента.
- border-top-style - Определяет стиль верхней границы элемента.
- border-top-width - Определяет ширину верхней границы элемента.
Не буду описывать каждый из них, думаю и так понятно, что дело обстоит, так же как и с их сородичами, свойствами border-style, border-width и border-color, кроме того факта, что в данном случае свойства указываются для одной из сторон границы элемента.
Приведу пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Граница слева</title>
<style type="text/css">
div{
border-left: 10px solid #008000;
background: #c6f2de;
}
</style>
</head>
<body>
<div>
<p>В этом примере у контейнера div мы обозначили только его левую границу с помощью свойства border-left написав:</p>
div{<br>
border-left: 10px solid #008000;<br>
background: #c6f2de;<br>
}
<p>Такого же результата можно было бы добиться прописывая свойства стиля, толщины и цвета для левой границы элемента отдельно.</p>
<p>Это выглядело бы вот так:</p>
div{<br>
border-left-color: #008000;<br>
border-left-style: solid;<br>
border-left-width: 10px;<br>
background: #c6f2de;<br>
}
<p>Кстати Вам этот блок ничего не напоминает?:)</p>
</div>
</body>
</html>
|
|
|
Смотреть пример
Border
Свойство border - базовый атрибут одновременно определяет стиль, цвет и толщину границы элемента.
Так как атрибут border является базовым, значения родственных свойств указываются в любом порядке через пробел.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>border</title>
<style type="text/css">
div{
border: RGB(25, 125, 25) 6px ridge;
}
</style>
</head>
<body>
<div>
<h3>А знаете ли Вы что:</h3>
<p>Слон - символ положительного характера - используется в Азии как царское верховное животное и высоко ценится за ум и хитрость.</p>
.........
</div>
</body>
</html>
Смотреть пример
Однако если Вы хотите присвоить разные свойства различным сторонам границы элемента или только одной из них, пользуйтесь свойствами border-bottom, border-left, border-right, border-top.
Границы таблицы.
Свойство CSS border-collapse определяет стиль отображения границ таблицы.
По умолчанию каждая ячейка таблицы имеет собственную рамку (ну если конечно использован атрибут HTML border или одноимённое свойство CSS), так вот в местах соприкосновения ячеек образуется двойная линия, border-collapse заставляет браузер анализировать таковые места и поступать с ними согласно присвоенному значению данному свойству.
Внешний вид границ таблицы может принимать следующий вид:
- separate - ячейки таблицы отделены друг от друга (по умолчанию).
- collapse - ячейки таблицы не имеют промежутков между собой.
- inherit - свойства наследуются у родителя элемента. (работает далеко не во всех браузерах.)
Пример:
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Стиль таблицы</title>
</head>
<body>
<table cellpadding="5" border="5">
<caption>Таблица с бордюром по умолчанию</caption>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
</table>
<hr>
<table cellpadding="5" border="5" style=" border-collapse: collapse ">
<caption>А эта таблица использует свойство CSS border-collapse с значением collapse</caption>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
</table>
</body>
</html>
Смотреть пример
Свойство border-collapse применяется только к тегу <table> и элементам, у которых атрибут display имет значение table или inline-table. О свойстве display расскажу в отдельной главе.
Полезные советы:
· Довольно часто слышу вопрос: - "Как сделать вертикальную линию, по аналогии с тегом <hr> - горизонтальная разделительная линия?".
Один из способов решения данной задачи является использование блока "пустышки" нужных размеров с левым или правым бордюром (свойства: border-left или border-right) необходимого стиля, который собственно и будет выступать в роли вертикальной линии.
Глава 6
|
|
|
G) ограниченная функция снизу и сверху
V1: Понятие границы применения кредита на макро- и микроуровнях
А в данном ударе вынос колена идет по восходящей траектории или все-таки по круговой сбоку, и имеет ли значение вход сверху вниз?
А- вид сверху, Б- вид снизу
АДМІНІСТРАТИВНЕ ПРОВАДЖЕННЯ У СПРАВАХ ПРО АДМІНІСТРАТИВНІ ПРАВОПОРУШЕННЯ
АКТ СОГЛАСОВАНИЯ МЕСТОПОЛОЖЕНИЯ ГРАНИЦЫ
Алгоритм здійснення соціальної роботи з девіантними підлітками Службою у справах дітей Черкаської міської ради
Биосфера, ее структура и границы
В блиндаже командования 62-й армией. Слева направо генералы: Крылов Н.И., Чуйков В.И., Гуров К.А., Родимцев А.И., Сталинград 1942 г.
В нижней части и справа окна находятся полосы прокрутки (горизонтальная и вертикальная соответственно)
