Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег <hr> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
Синтаксис
Атрибуты
- align
- Определяет выравнивание линии.
- color
- Цвет линии.
- noshade
- Рисует линию без трехмерных эффектов.
- size
- Толщина линии.
- width
- Ширина линии.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не требуется.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег HR</title>
</head>
<body>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
<hr>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид горизонтальной линии в браузере
Как сделать линию с помощью HTML и CSS
Для подчеркивания некоторых особенно важных элементов сайта, не помешало бы использовать всевозможные и предусмотренные для этого CSS стили и свойства. Конечно же, с текстом можно особо не заморачиваться и выделить его, к примеру, жирным или курсивом, изменить задний фон или сделать рамку вокруг текста. Но не всегда один из представленных способов является подходящим. Допустим, у вас есть текст, который нуждается в разделении из-за специфики его смысловой нагрузки. Вот тут-то и приходят на помощь HTML и СSS свойства.
Как сделать в тексте линию средствами CSS
Для реализации задуманного нам понадобится обратиться к файлу style.css, прописав в нем соответственное свойство border. Тем самым над, под или с определенной стороны текста появится линия. В свою очередь предусмотрено несколько свойств, отвечающих за отображение линии, а именно:
— border-top
— border-right – вертикальная линия, расположенная справа от текста;
— border-bottom – горизонтальная линия, расположенная под текстом;
— border-left – вертикальная линия находящаяся слева.
Как сделать линию в html
Используя свойства CSS можно прописать все необходимые значения редактируя HTML код. Для этого нужно перейти в административную часть сайта. Выбрать один из опубликованных материалов, переключить текстовый редактор в режим правки HTML кода и внести свойства CSS. Образец можно лицезреть ниже.
Как сделать пунктирную или прямую линию?
Прописав данные свойства вам удастся подчеркнуть важность излагаемого материала, абзаца или заголовка?
Краткая расшифровка команд
— width – длина линии;
— solid – сплошная линия;
— dotted – точечная линия.
Для более глубокого ознакомления со стилями рекомендую почитать эту статью.
Нужно уяснить, что в процессе внесения изменений в код сайта, свойства, определяющие тип линии, ее толщину и цвет перечисляются через пробел.
Приведенный способ имеет несколько достоинств:
— Обширный ассортимент возможностей, с помощью которых можно сделать практически любую линию.
— Легкость внесения всех необходимых изменений непосредственно в HTML код. Это во многом упрощает задачу для неопытных сайтостроителей.
Как сделать прямую горизонтальную линию с помощью тега HTML <hr>
Первое на что хотелось бы обратить ваше внимание, это то, что у данного тега, несмотря на все тонкости и принципы html, нет закрывающегося тега. Он может быть использован в любом месте html кода, между тегами <body> и </body>.
Атрибуты тега <hr>
— width – отвечает за длину линии. Может указываться как в процентах, так и пикселях.
— size – толщина линии. Указывается в пикселях.
— color – определяет цвет линии.
— align – атрибут, отвечающий за выравнивание линии. В свою очередь к нему относится команда:
— right – выравнивание справа;
— left – выравнивание слева;
— center – центральное выравнивание.
Образец html кода с использованием тега <hr>
Надеюсь, у вас все получилось, и теперь вы знаете, как сделать линию у себя на сайте. Назревшие вопросы оставляйте в комментариях, и мы обязательно их обсудим.
Спасибо за внимание и до скорых встреч на страницах Stimylrosta.
Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter
Не ленитесь, поделитесь!
Понравилась статья? Угостите админа кофе.
Как сделать цветную горизонтальную линию?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Сделать горизонтальную линию на странице.
Решение
Горизонтальные линии хорошо использовать для отделения одного блока текста от другого. Небольшой по размеру текст, сверху и снизу которого располагаются горизонтальные линии, привлекает больше внимания читателя, чем обычный текст.
С помощью тега <hr> можно нарисовать горизонтальную линию, вид которой зависит от используемых атрибутов, а также браузера. Тег относится к блочным элементам, поэтому линия всегда начинается с новой строки, а после неё все элементы отображаются на следующей строке. Благодаря множеству атрибутов тега <hr> линией, созданной через этот тег, легко управлять. Если ещё подключить мощь стилей, то добавление линии в документ превращается в простое занятие.
По умолчанию линия <hr> отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых свойств. В частности, старые версии браузера Internet Explorer для цвета линии применяют свойство color, а остальные браузеры — background-color. Но это еще не все, при этом обязательно следует указать толщину линии (свойство height) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border. Собирая все свойства воедино для селектора hr, получим универсальное решение для популярных браузеров (пример 1).
Пример 1. Горизонтальная линия
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет горизонтальной линии</title>
<style>
hr {
border: none; /* Убираем границу */
background-color: red; /* Цвет линии */
color: red; /* Цвет линии для IE6-7 */
height: 2px; /* Толщина линии */
}
</style>
</head>
<body>
<hr>
<p>Текстовоя строка</p>
<hr>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Цветная горизонтальная линия
Горизонтальные и вертикальные линии в HTML — сайт на PHP своими руками
Тег HR,hr,написание горизонтальных и вертикальных линий в HTML,примеры цветных горизонтальных и вертикальных линий на страницах сайта.
Горизонтальные линии формируются непарным ( закрывающего тега не нужно) тегом <HR> и могут быть довольно уникальными элементами дизайна. Оформление текста с добавлением горизонтальных HTML линий придаст странице определенную логику изложения текста, а также упростит читателю выделить блоки информации, которые нужно изучать последовательно. Тег <HR> может формировать горизонтальные линии разного цвета, толщины и длины. И сделать это довольно просто, что на примерах показано ниже.
Кстати можно также использовать свойства стилей блоков <table> и <div> для формирования линий
при определенном расположении. Правда такой вариант не всегда может быть удобным, например окрашивание таблицы иногда не всегда себя оправдывает, но во многих вариантах возможно решение задач именно таким способом. Например внутри линии, сформированной тегом <HR> текст не вставиш. А внутри блоков — это возможно и постоянно практикуется. Так что свой вариант нужно выбирать в зависимости от требований к дизайну.
Вертикальные линии в HTML.
А вертикальные линии формируются фактически в тех же блоках <table> и <div>.
Одно только неудобство — не во всех браузерах тег <HR> работает одинаково, но тут нужно пробовать
и подстраивать страницу, или пользоваться обновленными браузерами.
Формирование горизонтальных линий:
Тег <HR> вставляет на страницу горизонтальную линию и имеет следующие атрибуты:
| align | Выравнивание линии справа или слева, по умолчанию — по центру. |
| size | Задает толщину линии в пикселах. |
| width | Задает ширину линии в процентах или пикселах. |
| color | Задает цвет линии. |
| noshade | Сплошная окраска, значений не требует. |
Синтаксис тега <HR>:
Примеры горизонтальных линий в HTML:
Примеры вертикальных линий в HTML:
кружок, сформированный при помощи тега
Вот пример вертикальной линии красного цвета слева.
Вот пример вертикальной линии красного цвета справа.
Вот пример горизонтальной линии красного цвета вверху.
Вот пример горизонтальной линии красного цвета снизу.
Вот пример горизонтальной и вертикальной линий.
Синтаксис примеров вертикальных и горизоньальных линий в HTML:
обратите внимание на атрибут стиля
border-left(-right):4px solid #FF0000;:
кружок, сформированный при помощи тега
Вот пример вертикальной линии красного цвета слева.
Вот пример вертикальной линии красного цвета справа.
Вот пример горизонтальной линии красного цвета снизу.
Вот пример горизонтальной и вертикальной линий.
И если проанализировать данные примеры, то можно сделать довольно простой вывод, что вертикальные линии лучше всего формировать при помощи блоков DIV, а проможуточные варианты линий можно делать с тегом <HR> Но все зависит от фантазии и запросов. Так что выбирайте и формируйте.
Как сделать вертикальную линию HTML?
В продолжение темы оформления контента на станицах сайта сегодня я хочу вам показать, как можно добавить вертикальную линию HTML, и тем самым выделить фрагмент текста, сделав его более заметным для посетителей.
В одной из своих прошлых статей я уже вам показывала, как можно украсить текст вертикальной линией. С этой статьей вы можете ознакомиться по этой ссылке: Горизонтальная линия HTMLДля того, что бы сделать вертикальную линию HTML есть несколько способов, но в зависимости от браузера у вас могут возникнуть проблемы с ее отображением на странице. Поэтому я покажу вам два наиболее простых способа добавления вертикальной линии HTML, которые будут у вас на 100% работать.
Навигация по статье:
Вертикальная линия HTML
В первом случае нам нужно обернуть предназначенный для выделения фрагмент текста или элемент на странице в тег <div>, или же использовать уже существующий блок, и для этого блока задать границу с нужной стороны.
Можно дописать стили в самом теге:
<div> <h4> Вертикальная линия HTML </h4> </div>
<div> <h4> Вертикальная линия HTML </h4> </div> |
Результат:
Вертикальная линия HTML
С помощью свойства border-left мы задаем границу блока с левой стороны, и задаем следующие параметры границы:
- 3px – толщина линии
- solid – сплошная линия.Так же можно сделать: пунктирную(dotted), прерывистую (dashed), double (двойную), вогнутую (groove), и выпуклую (ridge).
- red – это цвет границы. Его вы можете задать названием цвета, в шестнадцатеричном формате, с помощью таблицы цветов RGB или RGBA.
Для задания границы вы можете использовать следующие свойства:
- border-left – граница слева
- border-right— граница справа
- border-top – сверху
- border-bottom – снизу
- border – граница по всему контуру блока
Свойства border-top и border-bottom можно так же использовать для задания горизонтальной линии
Так же нам нужно указать отступ текста от границы с помощью свойства padding-left, иначе он будет к ней прилипать. В моем случае отступ равен 10 пикселям.
Если вам удобнее работать с CSS стилями в отдельном файле, то для блока нужно присвоить класс и для этого класса прописать данные свойства в CSS -файле. Вот как это будет выглядеть:
HTML:
<div> <h4> Вертикальная линия HTML для текста в блоке </h4> </div>
<div> <h4> Вертикальная линия HTML для текста в блоке </h4> </div> |
CSS:
.block-vert-line{ border-left:3px solid green; padding-left:15px; }
.block-vert-line{ border-left:3px solid green; padding-left:15px; } |
Результат:
Вертикальная линия HTML для текста в блоке
Вертикальная линия HTML с помощью псевдоэлемента
Если вам удобнее работать с CSS -стилями, то вы можете воспользоваться еще одним способом добавления вертикальных линий. Данный вариант немного сложнее и заключается в использовании псевдоэлементов :before и :after. Но у псевдоэлементов есть один очень ощутимый плюс, они позволяют без добавления HTML-кода, разместить на станице, соответственно, перед блоком или после него дополнительный элемент.
Тема псевдоэлементов достаточно обширна, поэтому подробно вдаваться их описание я сейчас не буду. В ближайшее время постараюсь подготовить статью с более подробной информацией по наиболее полезным псевдоэлементам, их возможностям и применению.
Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или слевой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.
Вот как это будет выглядеть:
.vert-line:before{ content: » «; background: #33CCFF; width: 2px; height: 25px; float: left; margin-right: 10px; }
.vert-line:before{ content: » «; background: #33CCFF; width: 2px; height: 25px; float: left; margin-right: 10px; } |
Результат:
Вертикальная линия без HTML
Для блока с классом vert-line мы присваиваем псевдоэлемент :before и задаем свойствами параметры элемента, который будет сгенерирован при формировании страницы. В нашем случае мы делаем вертикальную линию с шириной 2 пикселя и высотой 25 пикселей.
Так же мы задаем цвет фона (background: #33CCFF;), обтекание с левой стороны (float: left;), и отступ с правой стороны (margin-right: 10px;), чтобы отделить текст блока от линии.
Свойство content с пустыми кавычками означает, что в данном элементе ничего нет, но при необходимость вы можете поместить в него дополнительные символы или текст.
Минусом использования псевдоэлемент является то, что они могут не поддерживаться старыми версиями браузеров.
Сегодня я показала вам, как можно добавить вертикальную линию HTML, и как создавать элементы на чистом CSS. Надеюсь, данные приёмы будут для вас полезны, и вы тоже возьмете их к себе на вооружение.
А на сегодня у меня все. Не забывайте оставлять комментарии и делиться статьей в социальных сетях.
До встречи в следующих статьях!
С уважением Юлия Гусарь
Тег — горизонтальная линия (цвет и толщина)
Поддержка браузерами
Описание
HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.
Примечание: горизонтальная линия используется для визуального и логического разделения контента, но в ней отпадает необходимость, если сразу после нее идет заголовок или тег, начинающий новый раздел, или логический блок (<section>, <article>), так как эти элементы по умолчанию подразумевают тематические изменения.
По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров:
<p>Разделительная линия:</p> <hr> <p>Изменяем цвет линии:</p> <hr> <p>Изменяем толщину линии:</p> <hr> <p>Пунктирная линия html:</p> <hr>Попробовать »
Атрибуты
HTML тег <hr> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
Пример
<h2>HTML</h2> <p>HTML это язык разметки гипертекста...</p> <hr> <h2>CSS</h2> <p>CSS определяет то, как будут отображаться элементы...</p>
Результат данного примера в окне браузера:
seodon.ru | Учебник HTML — Горизонтальные линии
Опубликовано: 29.09.2010 Последняя правка: 08.12.2015
В основном горизонтальные линии используются для декорирования HTML-страниц сайта, придавая им более привлекательный вид. Но также ими можно визуально разграничивать информацию соседних разделов, добавляя удобства читателям при ее изучении. В общем, рисуйте горизонтальные линии там, где вам нужно, вот и все.
Как нарисовать горизонтальную линию?
Для отрисовки горизонтальных линий в HTML существует специальный тег <HR>. Причем он является блочным тегом, то есть создает переносы строк до и после себя, поэтому линия всегда получается на отдельной строке. Соответственно и указывать его можно только внутри тегов, которые могут содержать блочные элементы, например <BODY> или <BLOCKQUOTE>. А вот сам <HR> не может иметь содержимого, так как у него попросту нет закрывающего тега, то есть он является пустым.
Пример рисования горизонтальных линий в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Рисуем горизонтальные линии</title>
</head>
<body>
<hr>
<p>Параграф.</p>
<p>Параграф.</p>
<hr>
<p>Параграф.</p>
</body>
</html>Результат в браузере
Параграф.
Параграф.
Параграф.
Как видите, линии получаются очень тонкими, невзрачными и рисуются во всю доступную ширину, поэтому сейчас мы научимся их изменять, чтобы они выглядели более привлекательно.
Как изменить цвет, толщину и ширину горизонтальных линий?
В старых версиях HTML у тега <HR> существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:
<hr> — цвет линии (вернее ее фон).
<hr> — толщина линии.
<hr> — ширина линии.
<hr> — а можно указать сразу все параметры, только не забываем про точку с запятой (;).
Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#). Ну, вы об этом уже знаете из урока по изменению цвета текста и фона.
А вот об изменении размеров мы поговорим подробнее. Как вы помните из урока по изменению шрифтов, в CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.
Если вы указываете размеры в пикселях, то толщина и ширина линии будет зависеть от разрешения монитора, на котором просматривают ваш сайт (чем выше разрешение экрана, тем тоньше и уже линия).
Как я уже сказал, только ширину линии можно указывать в процентах. Процентные размеры всегда зависят и высчитываются исходя из размеров родительского элемента-контейнера, внутри которого расположен тег <HR>. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег <hr style=»width:50%»> внутри элемента <BLOCKQUOTE>, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока <BLOCKQUOTE>.
Пример изменения цвета, толщины и ширины горизонтальных линий.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Меняем цвет, толщину и ширину горизонтальных линий.</title>
</head>
<body>
<hr>
<hr>
<hr>
<hr>
</body>
</html>Результат в браузере
Изменение положения горизонтальных линий
Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри <HR> атрибут align со следующими значениями:
- center — линия выравнивается по центру (значение по умолчанию).
- left — прижимается к левому краю.
- right — прижимается к правому краю.
Пример выравнивания горизонтальных линий.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Меняем положение горизонтальных линий.</title>
</head>
<body>
<hr>
<hr align="left">
<hr align="right">
</body>
</html>Результат в браузере
Как убрать рамку вокруг линии?
Посмотрите на самый первый пример этого урока. Как вы считаете, какой цвет у этих линий? А вот и неверно. Они прозрачные, как и любые элементы страницы, у которых не указан фоновый цвет! Не верите? Тогда посмотрите на пример, где мы изменяли цвет линий. У самой первой мы не установили цвет, а только увеличили ее размер и разве эта линия не прозрачная? Так-то!
Теперь объясню. По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.
Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:
<hr>Домашнее задание.
- Создайте заголовки статьи, раздела и подраздела. Расположите их все по центру.
- Установите на всей странице шрифт Arial, а для заголовков — Courier.
- Пусть размер шрифта на всей странице будет 85% от размера в браузере по умолчанию. А у заголовков 145%, 125% и 110% соответственно, от размера шрифта на странице.
- Напишите под первым заголовком параграф, под вторым — длинную цитату, под третьим — стихотворение. И пусть стихотворение располагается по центру страницы.
- Выделите жирным шрифтом три слова в цитате.
- Под заголовком статьи во всю ширину страницы нарисуйте горизонтальную линию красного цвета толщиной три пикселя.
- Сверху и снизу стихотворения нарисуйте линии толщиной в один пиксель черного цвета. Пусть ширина верхней линии будет примерно равна ширине стиха, а нижней — в два раза меньше.
- Уберите у линий ненужные рамки.
Посмотреть результат → Посмотреть ответ