Границы элемента.В этой главе мы поговорим о том, как сделать с помощью CSS рамку - бордюр, вокруг того или иного элемента. В HTML эта задача лежала на плечах атрибута border, однако его можно было применить далеко не к каждому тегу (элементу) да и не всегда он мог решить ту или иную дизайнерскую задумку. В CSS эту задачу берёт на себя одноимённое базовое свойство border и значительно расширяет круг возможностей при работе со стилем границы любого(!) элемента выводимого на экран. Стиль границы.Если в HTML бордюр мог быть только в виде сплошной линии вокруг элемента, то в CSS это уже достаточно широкий набор возможных стилей рамок. Свойство border-style может присваивать элементу один из ниже перечисленных стилей границы.
Пример: <!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. Таковых значений может быть от одного до четырёх по числу сторон элемента. В каждом из четырёх случаев действуют свои "правила" по присуждению стиля рамки той или иной стороне элемента, которые приведены в таблице ниже:
Толщина границы.Свойство border-width - устанавливает ширину границы элемента. Ширина бордюра может быть заданна с помощью следующих аргументов:
А также в пикселях или любых других единицах измерения принятых в 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: 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. Цвет бордюра может иметь следующие значения:
Ну и так же как и в случаях с толщиной и стилем, цвет бордюра тоже может иметь от одного до четырёх цветовых значений при каждом "раскладе" окрашивая нужные стороны бордюра как показано в таблице ниже.
Что то уж больно много почти идентичных таблиц получилось.. ну не судите строго у каждого читателя свой уровень подготовки, да и учебник этот с маркой: -"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-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 заставляет браузер анализировать таковые места и поступать с ними согласно присвоенному значению данному свойству. Внешний вид границ таблицы может принимать следующий вид:
Пример: <!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 расскажу в отдельной главе. Полезные советы:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Субота, 18.01.2025, 06:59
Гость |
Мішатронік |
|
|