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

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

  • автор:

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

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

Горизонтальные линии в HTML осуществляются через тег hr.

Простое использование:

Как мы видим, длина линии по умолчанию равна 100% с учетом всех отступов, работает как параграф (p).

Атрибуты hr

Width Длина линии в процентах или пикселях
Size Ширина линии, указывается в процентах
Align Выравние по левому(left), правому(right) краю или по центру(center)
Noshade Определяет линию, как сплошной, является флагом и не имеет значения
Color Цвет линии. Работает не во свех браузерах

Сделать линию в css. Горизонтальные линии

При создании страницы HTML оформление играет существенную роль. Особенно когда мы говорим о различных символах и декоративном оформлении: эти мелочи помогают сделать «язык» вашей странички более доступным и ясным, к тому же существенно меняют её восприятие и внешний вид в целом. Одним из важнейших элементов для оформления является горизонтальная линия, и далее мы более подробно узнаем, как с ней работать и как сделать горизонтальную линию в html.

Какой бывает горизонтальная линия и для чего она нужна

Горизонтальная линия в html – это элемент оформления страницы, выполняющий ряд функций:

  1. Декоративная . Помогает добавить страничке привлекательности.
  2. Разделительная . Способствует эффективному отделению разной по смыслу информации.
  3. Выделительная или подчеркивающая . Привлечет внимание гостей страницы к необходимой и наиболее важной информации.

Именно горизонтальная линия считается самым доступным способом для реализации целого ряда функций. Создать её очень просто, а внешне она смотрится очень выгодно. Путем нехитрых изменений html-кода вы сможете регулировать:

  • длину;
  • ширину;
  • цветовые характеристики;
  • выравнивание по тому или другому краю.

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

Создаем горизонтальную линию в HTML

Задать линию можно при помощи простого тэга – hr в треугольных скобках. Он является сокращением от «Horisontal Rule» и задает классические внешние параметры. Отличается от множества других тем, что не нуждается в закрывающем тэге и способен существовать самостоятельно. Изменить внешние характеристики элемента можно при помощи дополнительных значений в тэге:

  1. Длина . Если вы не хотите, чтобы протяженность линии распространялась на всю страницу, то можно задать желаемых размер в пикселях либо процентах. Делается это про помощи дополнительного слова «width» в тэге и числового показателя длины, указанного после знака «=» в кавычках.

Выглядит это так. Например, если нам необходима длина, составляющая 100 пикселей, задаем такой тэг: hr width=»100″

  1. Выравнивание . Выравнивание возможно по левому или правому краям, а еще по центру. Данная характеристика действует только в том случае, если вы уже задали параметр width, так как линию протяженностью во всю страничку невозможно выровнять. Для выравнивания задаем дополнительный атрибут в тэг «align» и добавляем к нему направление: center – для центрального, left – для левого и right – для правого выравнивания.

Готовый тэг в таком случае будет выглядеть так. Например, если нам нужно задать центральное выравнивание для горизонтальной линии длиной в 150 пикселей, то готовый тэг будет выглядеть так: hr align=»center» width=»150″.

Обратите внимание, что «align», показатель для выравнивания, ставится на 1 место, несмотря на то, что атрибут зависим от показателя длины width.

  1. Ширина . По выбору можно также указывать ширину, создавая жирное или тонкое подчеркивание. Данный критерий ни от чего не зависит и может быть использован как самостоятельный без указания длины или выравнивания. Для него мы используем атрибут size в тэге и числовой показатель, равный желаемой ширине в пикселях. Число указывается в кавычках после атрибута size и символа «=».

Таким образом, если нам требуется создать линию шириной в 15 пикселей, необходимо создать следующий тэг: hr size=»15″.

  1. Цвет . Задается также как независимый показатель. Для его изменения используется атрибут color в сочетании с названием цвета в форме кода либо на английском языке. Цвет указывается в кавычках после символа «=».

Таким образом, тэг для стандартной линии белого цвета можно написать двумя способами: hr color=»#FFFFFF»или hr color=»white»

Черный цвет можно создать при использовании кода #000000.

  1. Убратьтень . Если вам необходим элемент, не содержащий тень, то в тэге следует использовать атрибут noshade. Он может быть использован самостоятельно либо в сочетании с другими элементами. Тэг для стандартной линии с его использованием будет выглядеть данным образом: hr noshade

Создание горизонтальной линии с помощью видео

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

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

Задача

Сделать горизонтальную линию на странице.

Решение

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

С помощью тега можно нарисовать горизонтальную линию, вид которой зависит от используемых атрибутов, а также браузера. Тег относится к блочным элементам, поэтому линия всегда начинается с новой строки, а после неё все элементы отображаются на следующей строке. Благодаря множеству атрибутов тега линией, созданной через этот тег, легко управлять. Если ещё подключить мощь стилей, то добавление линии в документ превращается в простое занятие.

По умолчанию линия отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых свойств. В частности, старые версии браузера Internet Explorer для цвета линии применяют свойство color , а остальные браузеры — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все свойства воедино для селектора hr , получим универсальное решение для популярных браузеров (пример 1).

Пример 1. Горизонтальная линия

HTML5 CSS 2.1 IE Cr Op Sa Fx

Цвет горизонтальной линии

text — decoration — style

Свойство text — decoration — style управляет стилем декоративной линии для текста (подчёркивание, перечёркивание и другие).

Если стиля всё мало, то можно заодно их и разукрасить с помощью text — decoration — color ��

Пример

Скопировать ссылку «Пример» Скопировано

 .subject  text-decoration-style: solid;> .participle  text-decoration-style: dotted; text-decoration-color: #F498AD;> .predicate  text-decoration-style: double;> .subject  text-decoration-style: solid; > .participle  text-decoration-style: dotted; text-decoration-color: #F498AD; > .predicate  text-decoration-style: double; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

  • solid — сплошная линия (значение по умолчанию);
  • double — двойная сплошная линия;
  • dotted — пунктирная линия точками;
  • dashed — пунктирная линия чёрточками;
  • wavy — волнистая линия.

С помощью свойства text — decoration — style можно сделать текстовые линии красивее и информативнее. Например, подчеркнуть слово с орфографической ошибкой:

 span  text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy;> span  text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; >      

Или сделать необычную ссылку:

 a  color: #ffffff; text-decoration-color: orange; text-decoration-style: dotted;> a  color: #ffffff; text-decoration-color: orange; text-decoration-style: dotted; >      

Добавить декоративную линию и навести красоту можно с помощью псевдоэлементов : : first — line для первой строки текста или : : first — letter для первой буквы в нём.

 .dotted::first-line  text-decoration-line: underline; text-decoration-style: dashed;> .double::first-letter  text-decoration-line: underline; text-decoration-style: double;> .dotted::first-line  text-decoration-line: underline; text-decoration-style: dashed; > .double::first-letter  text-decoration-line: underline; text-decoration-style: double; >      

Стилизуются и другие линии, кроме назначенных свойством text — decoration — line . Например, созданные внутри HTML-разметки с помощью тегов вроде или .

 u  text-decoration-style: wavy;> u  text-decoration-style: wavy; >      

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом


разных видов и стилей.

Сплошные линии

Двойная линия

Многострочная линия

Двухцветная линия

Трехцветная линия

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

Вертикальный градиент

Линия с тенью

Замыленная линия

Линия «Полка»

Пунктирные линии

Пунктирная линия с фоном

Пунктирная линия с градиентом

Точечные линии

Линия из крупных точек

 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; >

Разное

Вертикальные линии

Линии под углом

 
'); background-size: 6px 6px; >

Наклонные линии

04.09.2018, обновлено 09.04.2021
Предыдущая запись Добавление CSS стилей на страницу
Следующая запись После отправки формы сохранить позицию скролла

Комментарии 2

6 апреля 2020 в 23:43
А можно в линиях под уголом сам угол поменять?

  • Скопировать ссылку
  • Пожаловаться

1 апреля 2023 в 20:33
да, число у deg меняйте:
transform:rotate(2deg);
и угол изменится

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста линией с градиентом

Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

Сборник CSS стилей с эффектом фильтров Инстаграма.

Текст с градиентом

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Модальное окно на затемненном фоне

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

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

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