Как сделать линию html css
Перейти к содержимому

Как сделать линию html css

  • автор:

Прямая линия HTML

Прямая линия очень интересный элемент html. .

Несмотря на свою простоту, расположенная в нужном месте, она придаёт контенту неповторимый вид, а так же её саму можно сделать очень красивой

Для создания прямой линии в HTML применяется тег


. Он является блочным элементом и, значит, всегда начинается с новой строки.

Это одиночный тег и не имеет закрывающей части, что можно использовать при веб программировании, так как одиночных тегов в html раз-два и обчёлся.

Изменять внешний вид линии, мы будем при помощи стилевых свойств, так как почти все теги и атрибуты HTML, создающие внешний вид элемента, на данный момент уже являются устаревшими.

В представленных ниже вариантах кода, я использую атрибут style , значения которого являются по сути свойствами css.

< hr style color: #008080;">width:90% «> — длина относительно блока контента, по умолчанию прямая линия занимает 100%

Чтоб увеличить толщину линии в код вводится свойство height с цифровым значением, которое задаётся в любых доступных в веб размерах.

< hr style color: #008080;">width:90%; height:5px; » >

Цвет линии задаётся свойством background , в значении которого указывается код цвета.

< hr style color: #008080;">width:90%; height:10px; background:#037FFC; «>

Можно взять линию в рамку. Для этого в код вводится свойство border .

Причём рамка может быть любого вида доступного для рамок html.

< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border:2px solid #FC0307; «>
< hr style color: #008080;">width:50%; height:10px; background:#037FFC; border:dashed 2px #FC0307; «>
< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border:dotted 2px #FC0307; «>

Можно убрать боковые грани рамки и сделать линию как-бы трёхцветную.

Для этого в код линии, вместо свойства border , вводятся свойства border-top и border-bottom

< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border-top:solid 2px #FC0307; border-bottom:solid 2px #FC0307; «>

Причём все три линии можно сделать разной толщины, цвета и формы.

< hr style color: #008080;">width:90%; height:10px; background:blue; border-top:dashed 5px red; border-bottom:solid 10px green; «>

Можно закруглить и даже заострить торцы линии.

Для этого в код вводится свойство border-radius с цифровым значением, которое задаётся в любых доступных в веб единицах.

< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border-radius:5px; «>
< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border-radius:50%; «>
< hr style color: #008080;">width:90%; height:7px; background:#037FFC; border-radius:50% 50% 0 0; «>

Если добавить в код свойство теней box-shadow , то можно сделать прямую линию такого вида

< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border-radius:50%; box-shadow:0 0 0 5px #FC0307; «>
< hr style color: #008080;">width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 3px #FC0307; «>

Изменяя третье значение box-shadow , можно размыть края рамки.

< hr style color: #008080;">width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 3px 5px #FC0307; «>

А если к комплекту значений box-shadow , через запятую добавить ещё несколько, то можно сделать разноцветную рамку.

< hr style color: #008080;">width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 2px #FC0307, 0 0 0 6px #00CC00, 0 0 5px 9px #FC0307; «>

Если в код добавить свойство transform , то можно сделать её наклонной, или вертикальной.

Правда свойство transform всё ещё не работает без префиксов, что очень увеличивает код.

< hr style color: #008080;">width:50%; height:10px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 2px #FC0307, 0 0 0 6px #00CC00, 0 0 5px 9px #FC0307; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); «>

Изменяя цифры в значениях, можно всячески изменить внешний вид линии.

Более подробно о свойствах CSS box-shadow и transform , можно узнать в статье Как сделать тень для текста, картинки, блока.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить


Перемена

Стоит Ежик на пеньке и хвалит сам себя:
— Я сильный, я сильный, сильный я…
Тут порывом ветра унесло его в кучу дерьма. Ежик вылезает из кучи, отряхивается:
— Но легкий!

Горизонтальные линии

Что бы нам еще такое сделать с Web-страницами… Давайте дополнительно выделим на главной Web-странице index.htm цитату из Википедии, описывающую HTML. Только как?

Для любителей все выделять HTML припас подарок — горизонтальную линию, создаваемую с помощью одинарного тега :

Я буду отделен от следующего абзаца горизонтальной линией.

Я отделен от предыдущего абзаца горизонтальной линией.

Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web- страницы, имеет один-два пиксела в толщину и выпуклый или вдавленный вид (конкретные параметры зависят от Web-обозревателя). Она применяется для отделения одной части содержимого Web-страницы от другой и просто «для красоты». Однако нужно помнить, что слишком большое число горизонтальных линий — дурной тон Web-дизайна.

Больше о горизонтальных линиях рассказывать нечего. Так что внесем в HTML-код страницы index.htm необходимые исправления (листинг 2.13).

Листинг 2.13

Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!

Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках HTML и CSS.

Русская Википедия определяет термин HTML так:

Пожалуй, ни убавить ни прибавить…

HTML позволяет формировать на Web-страницах следующие элементы:

Результат показан на рис. 2.3. Симпатично вышло, не так ли?

Рис. 2.3. Web-страница index.htm с горизонтальными линиями

Сложный заголовок с линиями по бокам текста на css

Сложный заголовок с линиями по бокам текста на css

Иногда нужно сверстать заголовок, у которого слева и справа располагаются линии, которые занимают все оставшиеся пространство. Для такого случая у меня есть рецепт как сверстать сложный заголовок с линиями по бокам текста.

Мы будем использовать обычный тег div с классом .title и его псевдоэлементы :before и :after . В div напишем нужный текст заголовка, а псевдоэлементы будут линиями: :before линия слева, :after соответственно будет линией справа.

Код html:

 
Наш
заголовок

Код css:

.title { /* Чтобы спрятать часть линий, которые ** будут вылазить за пределы блока */ overflow: hidden; /* Выравнивание заголовка по центру, ** можно использовать left, right */ text-align: center; /* Тут можно добавить другие стили для заголовка */ font-size: 30px; } .title span { /* Стили тега обертки для заголовков ** в несколько строк */ display: inline-block; vertical-align: middle; } .title:before, .title:after { /* Обязательно указываем пустое свойство content, ** иначе псевдоэлементы не появятся на сайте */ content: ""; /* Указываем что наши линии будут строчно-блочные и ** выравнивание по высоте - по центру */ display: inline-block; vertical-align: middle; /* Задаем ширину 100% и выбираем высоту линии, ** в нашем примере она равна 4 пикселям */ width: 100%; height: 4px; /* Добавляем цвет для линии */ background-color: #00cf00; /* Добавляем пседоэлемантам возможность изменить ** позицию линии, для создания отступов от текста */ position: relative; } .title:before { /* Смещаем левую линию на 100% влево, чтобы линия ** встала рядом с текстом слева */ margin-left: -100%; /* Указываем в пикселях отступ линии от текста заголовка */ left: -14px; } .title:after { /* Смещаем правую линию на 100% вправо, чтобы ** линия встала рядом с текстом справа */ margin-right: -100%; /* Указываем в пикселях отступ линии от текста заголовка */ right: -14px; }

Главное преимущество данного метода является то, что не имеет значения однотонный фон у блока или фон сделан изображением.

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

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

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

Оформление объектов линиями CSS

Чтобы обрамить блок, таблицу, рисунок линией в CSS файле пишем:

#name border: 1px solid blue;> 

Текст, картинка, ссылка или другие элементы страницы

  • #name — название div, которое было присвоено
  • В фигурных скобках вписываются значения настроек элемента div, в данном случае border — означает «линия», 1px — толщина линии, которую можно увеличивать и линия будет толще, solid — означает непрерывная линия, blue — цвет линии, который можно также менять.
  • Имеем в виду, что при оформлении картинок на странице можно каждой картинку оформить в и присвоить ей конкретное имя, либо можно обрамить все картинки на сайте одной строкой в 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

  • Размер блока
  • Оформление линий
  • Оформление таблиц
  • Выравнивание блока
  • Два блока рядом
  • Настройка ссылок
  • Настройка фона
  • Настройка шрифта
  • Отступы
  • Оформление картинок
  • Галерея картинок
  • Оформление кнопок
  • Оформление списков
  • Оформление иконок
  • Курсор в CSS
  • Навигационная панель
  • Выпадающее меню
  • Формы в CSS
  • Вёрстка шаблона сайта
  • CSS Flexbox
  • CSS Grid
  • Анимации и переходы CSS
  • Медиа-запросы CSS
  • CSS-препроцессоры
  • CSS-фреймворки

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *