- •Лекция №22. Виды подключения каскадных таблиц стилей
- •Вынос таблиц css стилей в отдельный файл с помощью Link
- •Границы элемента
- •Стиль границы.
- •Толщина границы.
- •Цвет границы.
- •Границы справа слева сверху и снизу отдельно.
- •Границы таблицы.
- •Лекция №23. Слои
- •Абсолютное позиционирование
- •Относительное позиционирование
- •Универсальный подход
Толщина границы.
Свойство 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;}
|
Пример:
<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 для начинающих" так что лучше перестраховаться, рассмотрев каждый случай отдельно, не желе чем быть непонятым.
Так вот перестраховываясь, привожу пример:
<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>