Оформление линий CSS

Материал из Викижурнал
Перейти к навигации Перейти к поиску
Портал 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 тэги для оформления линий

  • border - задаёт параметры всех линий объекта.
  • border-bottom - задаёт параметры нижней линии объекта.
  • border-bottom-color - задаёт параметры цвета нижней линии объекта.
  • border-bottom-left-radius - задаёт параметры радиуса нижнего, левого угла объекта.
  • border-bottom-right-radius - задаёт параметры радиуса нижнего, правого угла объекта.
  • border-bottom-style
  • border-bottom-width
  • border-collapse - задаёт одну линию в таблицах.
  • border-color - задаёт параметры цвета всех линий объекта.
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color - задаёт параметры цвета левой линии объекта.
  • border-left-style
  • border-left-width
  • border-radius - задаёт параметры радиуса всех углов объекта.
  • border-right - задаёт параметры правой линии объекта.
  • border-right-color - задаёт параметры цвета правой линии объекта.
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top - задаёт параметры верхней линии объекта.
  • border-top-color - задаёт параметры цвета верхней линии объекта.
  • border-top-left-radius - - задаёт параметры радиуса верхнего, левого угла объекта.
  • border-top-right-radius - - задаёт параметры радиуса верхнего, правого угла объекта.
  • border-top-style
  • border-top-width
  • border-width

Примечание

Если же есть какие-либо вопросы в отношении оформление линий и другие вопросы относительно CSS настроек, то можно задать вопросы и обсудить тему на странице обсуждения нашего форума.

Статьи по теме CSS