яндекс

понедельник, 9 июля 2018 г.

Глава 5 Границы элемента

Глава 5

Границы элемента.

В этой главе мы поговорим о том, как сделать с помощью CSS рамку - бордюр, вокруг того или иного элемента. В HTML эта задача лежала на плечах атрибута border, однако его можно было применить далеко не к каждому тегу (элементу) да и не всегда он мог решить ту или иную дизайнерскую задумку.
В CSS эту задачу берёт на себя одноимённое базовое свойство border и значительно расширяет круг возможностей при работе со стилем границы любого(!) элемента выводимого на экран.

Стиль границы.

Если в HTML бордюр мог быть только в виде сплошной линии вокруг элемента, то в CSS это уже достаточно широкий набор возможных стилей рамок.
Свойство border-style может присваивать элементу один из ниже перечисленных стилей границы.
  • none - граница отсутствует (по умолчанию).
  • dotted - граница из ряда точек.
  • dashed - пунктирная граница.
  • solid - сплошная граница
  • double - двойная граница
  • groove - граница "бороздка"
  • ridge - граница "гребень"
  • inset - вдавленная граница
  • outset - выдавленная граница
Пример:
<!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">
p {
background-color: #f5f5f5;
text-align: center;
}
</style>
</head>
<body>
<p style="border-style: none;">граница отсутствует</p>
<p style="border-style: dotted;">граница из ряда точек</p>
<p style="border-style: dashed;">пунктирная граница</p>
<p style="border-style: solid;">сплошная граница</p>
<p style="border-style: double;">двойная граница</p>
<p style="border-style: groove;">граница "бороздка"</p>
<p style="border-style: ridge;">граница "гребень"</p>
<p style="border-style: inset;">вдавленная граница</p>
<p style="border-style: outset;">выдавленная граница</p>
</body>
</html>
Стиль бордюра может быть задан как для всех сторон элемента одновременно, так и для каждой его стороны отдельно в зависимости от того, сколько значений присвоено свойству border- style. Таковых значений может быть от одного до четырёх по числу сторон элемента.
В каждом из четырёх случаев действуют свои "правила" по присуждению стиля рамки той или иной стороне элемента, которые приведены в таблице ниже:
Число значенийРезультат
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 - устанавливает ширину границы элемента.
Ширина бордюра может быть заданна с помощью следующих аргументов:
  • thin - тонкая граница
  • medium - средняя толщина границы
  • thick - толстая граница
А также в пикселях или любых других единицах измерения принятых в CSS.
По аналогии со стилем, толщина бордюра тоже может иметь от одного до четырёх значений и в каждом случае устанавливает ёе для тех или иных сторон бордюра как показано в таблице ниже.
Число значенийРезультат
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;}
  • Первое значение - Устанавливает толщину верхней границы элемента.
  • Второе значение - Устанавливает толщину правой границы элемента.
  • Третье значение - Устанавливает толщину нижней границы элемента.
  • Четвёртое значение - Устанавливает толщину левой границы элемента.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Толщина границы</title>
</head>
<body>
<div style="border-style: solid; border-width: 3px 1px 10px 4px">
Толщина границ данного блока:
<ul>
<li>Сверху 3 пикселя
<li>Справа 1 пиксель
<li>Снизу 10 пикселей
<li>Слева 4 пикселя
</ul>
</div>
<br><br>
<div style="border-style: double; border-width: thick">В этом блоке границы со всех сторон одинаково толстые</div>
</body>
</html>

Цвет границы.

Цвет рамки или её сторон по отдельности определяется свойством border-color.
Цвет бордюра может иметь следующие значения:
  • #ff0000 - шестнадцатеричное значение цвета RGB.
  • red - именное значение цвета.
  • RGB(255,0,0) - значение цвета RGB.
  • transparent - прозрачная граница.
Ну и так же как и в случаях с толщиной и стилем, цвет бордюра тоже может иметь от одного до четырёх цветовых значений при каждом "раскладе" окрашивая нужные стороны бордюра как показано в таблице ниже.
Число значенийРезультат
1
Пример: div {border-style: solid; border-width: 3px; border-color: #008000;}
  • Первое значение - Устанавливает единый цвет бордюра со всех сторон.
2
Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff;}
  • Первое значение - Устанавливает цвет верхней и нижней границы элемента.
  • Второе значение - Устанавливает цвет левой и правой границы элемента.
3
Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000;}
  • Первое значение - Устанавливает цвет верхней границы элемента.
  • Второе значение - Устанавливает цвет левой и правой границы элемента.
  • Третье значение - Устанавливает цвет нижней границы элемента.
4
Пример: div {border-style: solid; border-width: 3px; border-color: #008000 #0000ff #ff0000 #ffff00;}
  • Первое значение - Устанавливает цвет верхней границы элемента.
  • Второе значение - Устанавливает цвет правой границы элемента.
  • Третье значение - Устанавливает цвет нижней границы элемента.
  • Четвёртое значение - Устанавливает цвет левой границы элемента.
Что то уж больно много почти идентичных таблиц получилось.. ну не судите строго у каждого читателя свой уровень подготовки, да и учебник этот с маркой: -"CSS для начинающих" так что лучше перестраховаться, рассмотрев каждый случай отдельно, нежеле чем быть непонятым..
Так вот перестраховываясь, привожу пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Цвет границы</title>
</head>
<body>
<div style="border-style: solid; border-width: 10px; border-color: #ff0000 #ffff00 #00ff00 #0000ff;">
<p style="border-style: double; border-width: 5px; border-color: #008000;">Зелёный</p>
<p style="border-style: double; border-width: 5px; border-color: red;">Красный</p> 
<p style="border-style: double; border-width: 5px; border-color: rgb(0,0,255);">Синий</p>
</div>
</body>
</html>

Границы справа слева сверху и снизу отдельно.

Для того, что бы определить стиль, цвет и ширину бордюра для одной из сторон элемента, пользуйтесь свойствами 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) необходимого стиля, который собственно и будет выступать в роли вертикальной линии
Автор: на

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)