Оформление линий CSS
Оформление линий CSS
| |
 Тематические порталы
|
Оформление линиями на странице — очень важное мероприятие для общего восприятия посетителями сайта. Оформлять линии можно присвоенному блоку <div>, <span>, таблице <table> и её отдельным ячейкам, а также можно оформлять общие линии, которые имеют тэг <hr>.
Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.
Оформление объектов линиями CSS
Чтобы обрамить блок, таблицу, рисунок линией в CSS файле пишем:
#name {border: 1px solid blue;}
получаем:
- #name - название div, которое было присвоено
- В фигурных скобках вписываются значения настроек элемента div, в данном случае border - означает "линия", 1px - толщина линии, которую можно увеличивать и линия будет толще, solid - означает непрерывная линия, blue - цвет линии, который можно также менять.
- Имеем в виду, что при оформлении картинок на странице можно каждой картинку оформить в <div> и присвоить ей конкретное имя, либо можно обрамить все картинки на сайте одной строкой в css:
img {border: 1px solid red;}
В данном случае все картинки на сайте будут обрамлены красной линией. К слову говоря через эту глобальную настройку картинко можно задавать размеры картинок и другие css настройки
Виды линий
Типы линий CSS
В настройках CSS можно менять вид линий, например параметр solid можно поменять на нижеследующие:
- none - линия отсутствует (по умолчанию).
- dotted - линия из ряда точек.
- ridge - линия "гребень"
- dashed - пунктирная линия.
- double - двойная линия
- groove - линия "бороздка"
- inset - вдавленная линия
- outset - выдавленная линия
- solid - сплошная линия
Стоит отметить, что не все типы линий поддерживаются тем или иным браузером.
- Вот пример, как выглядят "solid", "dashed" и "dotted":
Закругление линий CSS
Кроме того, есть возможность закруглить углы того или иного объекта (параметры закругления задаются в пикселях - px):
#name {
border: 1px solid grey;
padding: 5px;
border-radius: 8px;
}
Получаем:
Добавлены внутренние отступы, чтобы было лучше видно свойства закругления.
Цвет линий в CSS
Цвет линий можно менять простыми английскими словами black - чёрный, white - белый, red - красный и так далее, но можно также задавать цвет специальным кодом, который можно взять с программ таких, как Photoshop или в редакторах страниц. И цвет обозначается следующим образом #29809C, вот пример настройки цвета линий в CSS:
#name {border: 1px solid blue;}
#name {border: 1px solid #29809C;}
#name {border: 1px solid #277A03;}
Получаем:
Есть возможность менять цвет и толщину всех четырёх линий по отдельности через знак ";", задаётся это параметрами. В дальнейшем все различные настройки div разделяются этим знаком
- border-top - верхняя линия
- border-bottom - нижняя линия
- border-left - левая линия
- border-right - правая линия
Например в CSS пишем:
#name {
border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid #277A03;
border-right: 1px solid green;
}
Получаем:
Все вышеперечисленные настройки можно менять по своему желанию.
CSS тэги для оформления линий
|
|
|
|
Примечание
Если же есть какие-либо вопросы в отношении оформление линий и другие вопросы относительно CSS настроек, то можно задать вопросы и обсудить тему на странице обсуждения нашего форума.
