Содержание

Как сделать цветную горизонтальную линию?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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 тег <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>

Результат данного примера в окне браузера:

Тег hr — разделительная линия

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

Пример

Давайте посмотрим, как работает тег

hr:

<hr>

:

Пример

Давайте попробуем поменять цвет линии с помощью CSS свойства border-color:

<hr>

:

Пример

Цвет линии также можно сменить и свойством color (при этом, если одновременно заданы свойства color и border-color — второе имеет приоритет):

<hr>

:

Пример

Давайте теперь поменяем цвет линии с помощью CSS свойства border. Обратите внимание на то, что при этом линия станет двойной толщины (так как мы задали границу и сверху, и снизу):

<hr>

:

Пример

Попробуем поменять цвет линии с помощью CSS свойства border-top, и зададим только верхнюю границу. Теперь двойной линии не будет:

<hr>

:

Пример

Давайте сделаем линию в виде точек с помощью CSS свойства border-top, зададим значение dotted вместо solid:

<hr>

:

Пример

Давайте увеличим толщину линии с помощью CSS свойства border-width:

<hr>

:

Пример

А теперь давайте линии добавим высоту height и границу через border. Граница при этом распадется на верхнюю и нижнюю:

<hr>

:

Разделительная полоса в html. Горизонтальные линии. I Тонкая, толстая, двойная, пунктирная линия с помощью клавиатуры

Всем привет! Сегодня я расскажу Вам о том, как с помощью html сделать горизонтальную линию.

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

Горизонтальная и вертикальная линии с помощью css

Сделать это можно с помощью css. Для этого, я заключаем необходимый участок текста в блок с помощью тега div, а затем в файле style.css или непосредственно в html — коде прописываем для этого блока свойства для верней или нижней границы с помощью border-top и border-bottom. Вот пример:

Вертикальная HTML линия

Горизонтальная линия с помощью css.

В данном случае, я задал оформление с помощью css непосредственно из кода html, и сделал верхнюю границу сплошной, а нижнюю пунктирной линией.

Вот как это будет выглядеть на странице:

Горизонтальная линия с помощью css.

У этого способа есть свои преимущества:

  • Большой ассортимент настроек, которые позволяют задать практически любой вид для линии;
  • Можно создавать как горизонтальные так и вертикальные линии. Для того, чтобы сделать вертикальные линии необходимо поменять border-top на border-left, а border-bottom на border-right.

К недостаткам можно отнести относительную громоздкость кода.

Однако, как оказалось, вставить в текст горизонтальную черту можно и с помощью html. При этом, даже не обязательно лезть в css. Для этого используется тег

.

Горизонтальная линия с помощью тега html

Первая особенность этого тега состоит в том, что у него нет парного закрывающего тега. Его можно использовать в любом месте html – кода между тегами

и .

У этого тега есть следующие атрибуты:

  • Width – определяет длину нашей горизонтальной линии в пикселях или процентах;
  • Color – определяет цвет линии;
  • Align – задает выравнивание линии по правому краю – right, по левому краю – left, по центру – center;
  • Size – толщина линии в пикселях.

Вот пример html – кода.

При создании страницы 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

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

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

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

Казалось бы, зачем могут понадобиться четыре способа? Ведь практически каждый человек использует один способ, к которому он привык. Например, нажал на Shift и на клавишу «тире» несколько раз, вот и получилась горизонтальная линия.

А что, если при этом получается пунктирная линия, а нужна сплошная?
— Скорее всего, на клавиатуре клавиша Shift неисправна. Тут придут на помощь другие способы.

3.
4.
5.

Пожалуй, самый привычный способ сделать линию в Ворде – это использовать пару-тройку клавиш на клавиатуре.

I Тонкая, толстая, двойная, пунктирная линия с помощью клавиатуры

Ниже приведен рисунок клавиатуры с английской, но без русской раскладки, однако это не имеет значения, ибо нас интересует только три клавиши: Shift, тире и Enter.

Рис. 1. Три клавиши на клавиатуре: Shift, тире и Enter для непрерывной горизонтальной линии в Ворде

С помощью этих трех клавиш можно нарисовать непрерывную горизонтальную линию в Word: пунктирную или сплошную, тонкую или толстую, длинную или короткую.

1) При нажатии несколько раз на клавишу «-» (тире) в редакторе Word получаем пунктирную линию любой длины.

Чтобы сделать тонкую длинную линию на всю ширину страницы:

  • Находим на клавиатуре клавишу «тире» (справа от клавиши «ноль», в зеленой рамке на рис. 1).
  • С новой (!) строки в Word несколько раз нажимаем на эту клавишу: —
  • И потом нажать на клавишу «Enter» (). Несколько напечатанных тире вдруг превратятся в непрерывную горизонтальную тонкую линию на всю ширину страницы.

2) При одновременном нажатии Shift и «-» (тире) печатается НЕ тире, а подчеркивание _________. Таким образом можно сделать непрерывную линию произвольной длины в любом месте документа.

Рис. 2. Тонкая и толстая горизонтальная линия в Word

Теперь печатаем толстую горизонтальную линию на всю ширину страницы:

  • Снова находим эту же клавишу «тире», а также клавишу Shift (слева или справа, кому как нравится). Нажмите Shift, держите и не отпускайте.
  • И теперь с новой (!) строки несколько раз (например, 3-4 раза) нажмите на тире (при этом не отпуская Shift): ___. Отпустите Shift.
  • Теперь нажмите на клавишу Enter. Вы увидите толстую горизонтальную сплошную линию.

Подведем некоторые итоги в виде таблицы:

(Кликните для увеличения) Линии в Word с помощью клавиатуры

­­­­­­­­­­­­­­­­­­­­­

II Линия в Word с помощью таблицы

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

Ставим курсор в место, где должна быть линия. В верхнем меню Word кликаем:

  • Вставка (1 на рис. 3),
  • Таблица (2 на рис. 3),
  • Одна клетка (3 на рис. 3).

Рис. 3. Как в Ворде вставить таблицу 1х1 (из одной клетки)

В результате получится таблица из одной большой клетки (1х1):

Осталось в таблице 1х1 с трех сторон убрать границы. Для этого

  • переходим во вкладку «Главная» (1 на рис. 4),
  • далее рядом с «Шрифт» находим «Абзац» и границы (2 на рис. 4),
  • убираем все границы, кликнув «Нет границы» (3 на рис. 4),
  • выделяем «Верхняя граница» или «Нижняя граница» (4 на рис. 4).

Рис. 4. Как в таблице Ворд убрать выделение границ (сделать границы невидимыми)

Наглядно я это показываю в видео (в конце статьи).

Кстати, на рис. 3 видно, что есть способ проще. Можно поставить курсор в начало строки в Word и кликнуть «Горизонтальная линия» (5 на рис. 4):

III Линия в Word с помощью рисования

Вставка (1 на рис. 5) – Фигуры (2 на рис. 5) – это еще один способ получить в Ворде горизонтальную линию.

Чтобы линия была строго горизонтальной, следует держать нажатой клавишу Shift и одновременно рисовать линию.

Рис. 5. Как нарисовать линию в Word

IV Линия в Ворде с помощью экранной клавиатуры

Чтобы найти экранную клавиатуру, в Поиск вводим фразу «экранная клавиатура», подробнее для Windows 7 , а для Windows 8 .

Для Windows 10 найти экранную клавиатуру можно также путем ввода в строку Поиска слов «экранная клавиатура».

Рис. 6. Экранная клавиатура

Горизонтальную линию будем создавать так же, как в первом варианте с обычной клавиатурой. На экранной клавиатуре понадобится три кнопки: тире, Shift и Enter.

1 Тире и Enter

С новой строки в Word несколько раз кликаем по тире (1 на рис. 6) и жмем на Enter. Получится тонкая горизонтальная линия.

2 Shift, тире и Enter

С новой строки в Word клик сначала Shift (2 на рис. 6), потом Тире (1 на рис. 6). Получится подчеркивание. Так повторим еще 2 раза, а потом нажмем на Enter. В результате увидим толстую горизонтальную линию.

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

Линии в CSS

Есть несколько способов, сделать линии. Один из таких способов – использование CSS. А точнее при помощи Border. Давайте рассмотрим пример.

И вот что в результате получится.

Горизонтальная и вертикальная линия с помощью css.

Линии, в CSS можно нарисовать при помощи оператора Border. Если нужен просто прямоугольник с фиксированной шириной рамки, то можно просто использовать этот оператор, и задать ему значение. Например border:5px solid #000000; будет означать, что границы блока имеют ширину равной 5 пикселям черного цвета.

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

  • border-top – задает значение верхней границы
  • border-bottom – задает значение нижней границы
  • border-left – задает значение левой границы
  • border-right – задает значение правой границы.

Вертикальная и горизонтальная линия в HTML

Создать линии можно и в самом HTML. Для этого, можно воспользоваться тегом hr.

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

Но этому тегу, можно задать и некоторые значения.

  • Width – задает значение ширины линии.
  • Color – задает цвет линии.
  • Align – задает выравнивание по левому краю, по центру, по правому краю
  • Size – задает значение толщины линии в пикселях.

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

В этом случае, будет нарисована вертикальная линия высотой в сто пикселей, толщиной в один пиксель и с отступом в пять пикселей.

Заключение.

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

Ну а если у вас есть еще вопросы, задавайте их в комментариях.

Горизонтальные линии формируются непарным (закрывающего тега не нужно) тегом

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

может формировать горизонтальные линии разного цвета, толщины и длины. И сделать это довольно просто, что на примерах показано ниже.

Кстати можно также использовать свойства стилей блоков

и для формирования линий
при определенном расположении. Правда такой вариант не всегда может быть удобным, например окрашивание иногда не всегда себя оправдывает, но во многих вариантах возможно решение задач именно таким способом. Например внутри линии, сформированной тегом
 текст не вставиш. А внутри блоков — это возможно и постоянно практикуется. Так что свой вариант нужно выбирать в зависимости от требований к дизайну.

Вертикальные линии в HTML.

А вертикальные линии формируются фактически в тех же блоках

и .
Одно только неудобство — не во всех браузерах тег
работает одинаково, но тут нужно пробовать
и подстраивать страницу, или пользоваться обновленными браузерами.

Формирование горизонтальных линий:

Тег

вставляет на страницу горизонтальную линию и имеет следующие атрибуты:

Синтаксис тега

:

Примеры горизонтальных линий в HTML:

Примеры вертикальных линий в HTML:

Вот пример вертикальной линии красного цвета слева.

Вот пример вертикальной линии красного цвета справа.

Вот пример горизонтальной линии красного цвета вверху.

Вот пример горизонтальной линии красного цвета снизу.

Вот пример горизонтальной и вертикальной линий.

Синтаксис примеров вертикальных и горизоньальных линий в HTML:

обратите внимание на атрибут стиля
border-left(-right): 4px solid #FF0000; :

Кружок, сформированный при помощи тега

Вот пример вертикальной линии красного цвета слева.

Вот пример вертикальной линии красного цвета справа.

Вот пример горизонтальной линии красного цвета снизу.

Вот пример горизонтальной и вертикальной линий.

И если проанализировать данные примеры, то можно сделать довольно простой вывод, что вертикальные линии лучше всего формировать при помощи , а проможуточные варианты линий можно делать с тегом

Но все зависит от фантазии и запросов. Так что выбирайте и формируйте.

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>

Домашнее задание.

  1. Создайте заголовки статьи, раздела и подраздела. Расположите их все по центру.
  2. Установите на всей странице шрифт Arial, а для заголовков — Courier.
  3. Пусть размер шрифта на всей странице будет 85% от размера в браузере по умолчанию. А у заголовков 145%, 125% и 110% соответственно, от размера шрифта на странице.
  4. Напишите под первым заголовком параграф, под вторым — длинную цитату, под третьим — стихотворение. И пусть стихотворение располагается по центру страницы.
  5. Выделите жирным шрифтом три слова в цитате.
  6. Под заголовком статьи во всю ширину страницы нарисуйте горизонтальную линию красного цвета толщиной три пикселя.
  7. Сверху и снизу стихотворения нарисуйте линии толщиной в один пиксель черного цвета. Пусть ширина верхней линии будет примерно равна ширине стиха, а нижней — в два раза меньше.
  8. Уберите у линий ненужные рамки.

Посмотреть результат → Посмотреть ответ

горизонтальная линия и правильный способ кодирования ее в html, css



Мне нужно нарисовать горизонтальную линию после некоторого блока, и у меня есть три способа сделать это:

1) Определите класс h_line и добавьте к нему функции css, например

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div>Lorem</div> <div></div>

2) используйте тег hr

#css
hr { width:100%; height:1px; background: #fff }

#html
<div>Lorem</div> <hr />

3) используйте его как псевдокласс after

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div>Lorem</div>

Какой путь наиболее практичен?

html css
Поделиться Источник Павел Тявин     11 февраля 2013 в 21:22

10 ответов


153

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>

Вот как это делает html5boilerplate:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

Поделиться moettinger     11 февраля 2013 в 21:25


65

Я бы выбрал семантический markup, использовал <hr/> .

Если это не просто граница, которую вы хотите, то вы можете использовать комбинацию отступа, границы и поля, чтобы получить желаемую границу.

Поделиться bevacqua     11 февраля 2013 в 21:24


11

В HTML5 тег <hr> определяет тематический разрыв. В HTML 4.01 тег <hr> представляет горизонтальное правило.

http://www.w3schools.com/теги/tag_hr.asp

Поэтому после определения я бы предпочел <hr>

Поделиться bpoiss     11 февраля 2013 в 21:25

  • Горизонтальная линия внутри вкладки в HTML

    Я следую этим страницам, чтобы создать горизонтальную линию : горизонтальная линия и правильный способ кодирования ее в html, css http://www.w3schools.com/теги/tag_hr.АСП http:/ / www.jacklmoore.com / Примечания / jquery-вкладки / но, похоже,он не работает внутри моего элемента tab. Вот мой код :…

  • EditText и горизонтальная линия

    Когда мы вводим входное значение с помощью EditText, я хочу, чтобы горизонтальная линия была помещена под моим вводом, как приложение телефонной книги во всех мобильных телефонах. Введите Телефон : ___________ Я хочу, чтобы мой вклад был помещен в эту строку. Как я могу сделать это с помощью…


11

Если вы действительно хотите тематического перерыва , обязательно используйте тег <hr> .

Если вам просто нужна линия дизайна, вы можете использовать что-то вроде класса css

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

и использовать его, как

<div>Cheese</div>

Поделиться serv-inc     24 апреля 2017 в 15:12


7

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}
<html>
<body>
<div></div>
<div>OR</div>
<div></div>
</body>
</html>

Поделиться Nadeem Qasmi     20 января 2019 в 14:10


6

Я хотел длинную черточку, как линия, поэтому я использовал это.

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}
<div></div>

Поделиться Alia     12 октября 2018 в 06:00


1

это зависит от требований , но многие разработчики предлагают сделать ваш код как можно более простым . итак, для этого используйте простой тег «hr» и код CSS.

Поделиться Ram Prasad     04 сентября 2017 в 17:04


1

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

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}

Поделиться FredG     26 августа 2017 в 01:54


0

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
подчеркнутый текст

Поделиться bruh     06 февраля 2018 в 00:10

Поделиться Unknown     27 июня 2020 в 02:42

Похожие вопросы:


Горизонтальная линия в середине страницы

Я хочу, чтобы в середине страницы была горизонтальная линия. Что-то вроде <div class=line> <hr> </div> .line { top: 50%; } Но это не работает. Я не хочу писать эту строчку сама,…


Горизонтальная линия в vim

Что означает горизонтальная линия в vim? При редактировании удаленного файла я вижу горизонтальную линию в текущей строке. Я не вижу его при редактировании локальных файлов Edit: cursorline не…


css отзывчивая сетка — горизонтальная линия между строками

У меня есть адаптивный макет с сеткой блоков контента. на рабочем столе каждая строка состоит из 4 блоков на планшете каждый ряд составляет 3 блока на телефоне каждая строка состоит из 2 блоков Я…


Горизонтальная линия между несколькими абзацами (CSS)

У меня есть CSS-проблема с border-top/a горизонтальной линией между несколькими абзацами. Это мой код… HTML: <p> <span class=lined>Lorem ipsum dolor sit amet, consetetur sadipscing…


Горизонтальная линия <hr /> с переменной длиной штриха

Горизонтальная линия как создать горизонтальную линию с длиной Штриха, как показано на рисунке, используя CSS. Это то, что я пробовал CSS hr{ border-bottom: 1px dotted grey; } но я не могу получить…


Горизонтальная линия внутри вкладки в HTML

Я следую этим страницам, чтобы создать горизонтальную линию : горизонтальная линия и правильный способ кодирования ее в html, css http://www.w3schools.com/теги/tag_hr.АСП http:/ / www.jacklmoore.com…


EditText и горизонтальная линия

Когда мы вводим входное значение с помощью EditText, я хочу, чтобы горизонтальная линия была помещена под моим вводом, как приложение телефонной книги во всех мобильных телефонах. Введите Телефон :…


Горизонтальная линия через текст (и экран) при наведении курсора

Я пытаюсь воспроизвести эффект, который видел на днях на другом сайте. Там есть заголовок, и когда вы наводите на него курсор, горизонтальная линия появляется через текст и над экраном. Однако я…


Короткая горизонтальная линия перед текстом

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


кусочная регрессия с двумя точками останова, которые должны быть установлены в R: горизонтальная линия, прямая линия и затем снова горизонтальная линия

Я хочу сделать кусочную регрессию с двумя точками останова в R: сначала горизонтальная линия с наклоном 0, затем линейная линия и снова горизонтальная линия с наклоном 0. Две точки останова также…

| Справочник HTML

Элемент <hr> (от англ. «horizontal rule» ‒ «горизонтальная линия») определяет тематический разрыв контента на HTML странице (например, изменение темы). Также, элемент <hr> может использоваться для визуального разделения контента на странице.

Так как этот тег является блочным — он создает перенос строк перед собой и после себя, а также небольшие поля (margin) сверху и снизу. Внешний вид линии и размер полей зависит от типа браузера, как правило они отображают ее с рамкой, которая создает эффект трехмерности.

Синтаксис

<hr>

Закрывающий тег

Не требуется.

Атрибуты

alignУстарел в HTML5
Устанавливает горизонтальное выравнивание линии.
colorНестандартный
Цвет линии.
noshadeУстарел в HTML5
Рисует линию без трёхмерных эффектов.
sizeУстарел в HTML5
Толщина линии.
widthУстарел в HTML5
Ширина линии.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <hr> со следующими значениями CSS по умолчанию:

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

Различия между HTML 4.01 и HTML5

В HTML 4.01 тег <hr> представляет горизонтальную линию.

В HTML5 тег <hr> определяет тематический разрыв. Тем не менее, тег <hr> в визуальных браузерах все еще может отображаться как горизонтальная линия, однако в настоящее время он определяется в семантическом, а не презентативном смысле.

В HTML5 все стилевые атрибуты были удалены. Вместо них следует использовать стили CSS.

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

Элемент <hr>.

Используем тег <hr> для тематического разделения контента:

Пример HTML: Попробуй сам
<h2>HTML</h2>
<p>HTML – язык описания веб-страниц.</p>
<hr>
<h2>CSS</h2>
<p>CSS — определяет то, как будут отображаться HTML элементы.</p>

Спецификации

Поддержка браузерами

Элемент
<hr> 3+ 1+ 2+ 1+ 1+ 1+
Элемент
<hr> 1+ 1+ 6+ 1+

Похожие страницы

HTML уроки: HTML Элементы

HTML Базовые теги


HTML-тег

— GeeksforGeeks

Тег

в HTML обозначает горизонтальную линейку и используется для вставки горизонтальной линейки или тематического разрыва на HTML-страницу для разделения или разделения разделов документа. Тег
— это пустой тег, и он не требует закрывающего тега.
Атрибуты тега: В таблице ниже описаны атрибуты тега
:
Атрибут Значение Описание
Выровнять слева по центру справа Используется для задания выравнивания по горизонтали правило.
без оттенка без оттенка Используется для указания полосы без эффекта затенения.
размер пикселей Используется для указания высоты горизонтальной линейки.
ширина пикселей Используется для указания ширины горизонтальной линейки.

Синтаксис: 

 
 ...

Программы ниже иллюстрируют тег

в HTML:
Пример 1:

HTML

< ! DOCTYPE html>

< html >

< корпус >

< > Под этим абзацем есть горизонтальная линейка. p >

< час >

< p > Это горизонтальное правило выше этот абзац.

Вывод:


Пример 2 (тег hr с атрибутами):

HTML

html >

< корпус >

< p > Нормальная горизонтальная линия. p >

< час >

< > Горизонтальная линия высотой 30 пикселей p >

< hr размер = "30" >

< p > Горизонтальная линия высотой 30 пикселей

и без тени. p >

< час размер = "30" без тени>

корпус >

html >

Выход:

Поддерживаемые браузеры:
51

      Google Chrome Internet Explorer
    • Firefox
    • Opera
    • Safari

    HTML - это основа веб-страниц, используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений.Вы можете изучить HTML с нуля, следуя этому руководству по HTML и примерам HTML.

    CSS - это основа веб-страниц, используется для разработки веб-страниц путем стилизации веб-сайтов и веб-приложений. Вы можете изучить CSS с нуля, следуя этому руководству по CSS и примерам CSS.

    Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с помощью Web Design for Beginners | HTML курс.


    HTML тег hr


    Пример

    Используйте тег

    для определения тематических изменений в содержании:

    Основные языки Интернета

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

    CSS - это язык, описывает, как элементы HTML должны отображаться на экране, бумаге или в другие СМИ. CSS экономит много работы, потому что он может контролировать макет сразу несколько веб-страниц.

    JavaScript - это язык программирования HTML и Интернета.JavaScript может изменять содержимое HTML и значения атрибутов. JavaScript может изменять CSS. JavaScript может скрывать и показывать элементы HTML и т. д.

    Попробуй сам "

    Дополнительные примеры "Попробуйте сами" ниже.

    Определение и использование

    Тег

    определяет тематический разрыв на HTML-странице (например, смена темы).

    Элемент

    чаще всего отображается как горизонтальная линейка, которая используется для разделения содержимого (или определения изменения) на странице HTML.

    Поддержка браузера

    Элемент
    		 Есть Есть Есть Есть Есть

    Глобальные атрибуты

    Тег

    также поддерживает глобальные атрибуты в HTML.

    Атрибуты событий

    Тег

    также поддерживает атрибуты событий в HTML.

    Другие примеры

    Пример

    Выровняйте элемент

    (с помощью CSS):

    Попробуй сам "

    Пример

    Без затенения

    (с CSS):

    Попробуй сам "

    Пример

    Установить высоту элемента

    (с помощью CSS):

    Попробуй сам "

    Пример

    Установить ширину элемента

    (с помощью CSS):

    Попробуй сам "

    Связанные страницы

    Ссылка на HTML DOM: HR Object

    Настройки CSS по умолчанию

    Большинство браузеров будут отображать элемент

    со следующими значениями по умолчанию:

    Пример

    hr {
    дисплей: блок;
    margin-top: 0.5em;
    нижнее поле: 0,5em;
    левое поле: авто;
    поле-правое: авто;
    стиль границы: вставка;
    ширина границы: 1 пиксель;
    }

    Попробуй сам "

    HTML абзацы

    Абзац всегда начинается с новой строки и обычно представляет собой блок текста.

    HTML абзацы

    Элемент HTML

    определяет абзац.

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

    Отображение HTML

    Вы не можете быть уверены в том, как будет отображаться HTML.

    Большие или маленькие экраны и окна с измененным размером дают разные результаты.

    В HTML вы не можете изменить отображение, добавив лишние пробелы или лишние строки в свой HTML-код.

    Браузер автоматически удаляет лишние пробелы и строки, когда страница отображается:

    Пример


    Этот параграф
    содержит много строк
    в исходном коде,
    но браузер
    игнорирует это.


    Этот абзац
    содержит много пробелов
    в исходнике код,
    , но браузер
    игнорирует Это.

    Попробуй сам "

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

    Тег

    определяет тематический разрыв на HTML-странице и чаще всего отображается в виде горизонтальной линейки.

    Элемент

    используется для разделения содержимого (или определения изменения) в HTML. страница:

    Пример

    Это заголовок 1


    Это какой-то текст.



    Это заголовок 2


    Это другой текст.


    Попробуй сам "

    Тег

    является пустым тегом, что означает, что он не имеет конечного тега.

    HTML разрывы строк

    Элемент HTML
    определяет разрыв строки.

    Используйте
    , если вам нужен разрыв строки (новая строка) без начала нового абзаца:

    Тег
    - это пустой тег, что означает, что он не имеет конечного тега.

    Проблема стихотворения

    Это стихотворение будет отображаться в одной строке:

    Пример


    Моя Бонни лежит над океан.

    Моя Бонни лежит над морем.

    Моя Бонни лежит над океаном.

    О, верни мне мою Бонни.

    Попробуй сам "

    Решение - HTML-элемент 

      
 
     Элемент HTML  
      определяет предварительно отформатированный текст. 
    
 
     Текст внутри элемента  
      отображается шрифтом фиксированной ширины (обычно
Courier), и он сохраняет как пробелы, так и разрывы строк: 
    

  
     Пример 
     
 
     Моя Бонни лежит над океаном.
     Моя Бонни лежит над морем. 
     
     Моя Бонни лежит над
океан. 
     
     О, верни мне мою Бонни. 
     
     Попробуй сам "
     Упражнения HTML 
     Проверьте себя упражнениями 
     упражнение: 
     Используйте правильный тег HTML, чтобы добавить абзац с текстом «Hello World!».
     
     <тело> 
     
      
     
     Отправить ответ »
     Начало упражнения
     Ссылка на тег HTML 
     Справочник тегов
     W3Schools содержит дополнительную информацию об элементах HTML и их атрибутах.
     Тег Описание
    		 Определяет параграф
    		 Определяет тематическое изменение содержания
     
    		 Вставляет одинарный разрыв строки
     
    		
 Определяет предварительно отформатированный текст 

     
    

    

     
     Как добавить строку в Html 
    

     В HTML мы можем легко добавить горизонтальную линию в документ следующими способами: 
    

       
    1.  Использование тега Html 
      2. 

    2.  Использование внутреннего CSS 
      3. 

     
     Использование HTML 
    

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

      Шаг 1:  Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим добавить горизонтальную линию. 
    

    


<Голова>
<Название>
Добавьте строку с помощью тегов HTML


<Тело>
Эта страница поможет вам понять, как добавить строку в HTML-документ.И этот раздел поможет вам понять, как добавить строку с помощью тегов Html.



    

      Шаг 2:  Теперь поместите курсор в точку, где мы хотим добавить строку в Html-документе. И затем мы должны использовать тег  
      Html в этот момент. 
    

    

    

    

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

    

    

    

      Шаг 4:  И затем мы должны указать значения этих атрибутов. 
    

    

    

    

      Шаг 5:  И, наконец, мы должны сохранить код Html и затем запустить файл в браузере. 
    

    


<Голова>
<Название>
Добавьте строку с помощью тегов HTML


<Тело>
Эта страница поможет вам понять, как добавить строку в HTML-документ.
    
И этот раздел поможет вам понять, как добавить строку с помощью тега Html.



    
Проверить это сейчас

     Вывод вышеуказанного Html-кода показан на следующем снимке экрана: 
    

     Использование внутреннего CSS 
    

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

      Шаг 1:  Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим добавить горизонтальную линию.
    

    


<Голова>
<Название>
Добавьте строку, используя внутренний CSS.


<Тело>
Эта страница поможет вам понять, как добавить строку в HTML-документ.
И этот раздел поможет вам понять, как добавить линию с помощью внутренней каскадной таблицы стилей.



    

      Шаг 2:  Теперь мы должны поместить курсор сразу после закрытия тега title в теге заголовка   документа Html, а затем определить стили внутри тега 


    

      Шаг 3:  Теперь нам нужно определить атрибуты тега hr CSS. Итак, мы определим различные атрибуты в следующем блоке: 
    

    
<Голова>
<Название>
Добавьте строку, используя внутренний CSS.
<стиль>
час
{
ширина: 80%;
высота: 2 пикселя;
цвет фона: розовый;
нижнее поле: 7 пикселей;
маржа-право: авто;
маржа слева: авто;
маржа сверху: 9 пикселей;
ширина границы: 4 пикселя;
цвет границы: синий;
}



    

      Шаг 4:  Теперь нам нужно ввести тег 
     в теле документа Html, чтобы отобразить горизонтальную линию на веб-странице. И, наконец, мы должны сохранить файл Html, а затем запустить его в интернет-браузере.
    

    


<Голова>
<Название>
Добавьте строку, используя внутренний CSS.

<стиль>
час
{
ширина: 80%;
высота: 2 пикселя;
цвет фона: розовый;
нижнее поле: 7 пикселей;
маржа-право: авто;
маржа слева: авто;
маржа сверху: 9 пикселей;
ширина границы: 4 пикселя;
цвет границы: синий;
}


<Тело>
Эта страница поможет вам понять, как добавить строку в HTML-документ.
    
И этот раздел поможет вам понять, как добавить линию с помощью внутренней каскадной таблицы стилей.



    
Проверить это сейчас

     Вывод вышеуказанного Html-кода показан на следующем снимке экрана: 
    

    

     HTML-тег 
     
     HTML-тег 
     - это элемент блочного уровня, переносящий все элементы после него в другую строку. Внешний вид горизонтальной линии, определяемой тегом, зависит от типа браузера.Чаще отображается с рамкой, создающей 3D-эффект. 
     
     В HTML5 тег 
     определяет тематическое изменение между элементами уровня абзаца на странице HTML. В предыдущих версиях HTML он использовался для рисования горизонтальной линии на странице, визуально разделяющей содержимое. В HTML5 он имеет значение семантического тега. 
     
     Синтаксис¶ 
     
     Тег 
     пуст, что означает, что закрывающий тег не требуется. Но в XHTML тег (
    ) должен быть закрыт (
    ).
     
     Пример HTML-тега 
    : ¶  
      

  
     Название документа 
  
  
     
     Изучите HTML 
     
    
    
      Это руководство по HTML научит вас основам (языка гипертекстовой разметки) и научит, как создать свой веб-сайт с нуля.
    
    
    
    
     
     Изучите CSS 
     
    
    
      В нашем руководстве по CSS вы узнаете, как использовать CSS для одновременного управления стилем и макетом нескольких веб-страниц.
    
  
      
    Попробуйте сами »
     HTML 
     Атрибут размера¶
     Атрибут размера определяет высоту строки.
     Пример HTML-тега 
     с атрибутом «размер»: ¶
      

  
     Название документа 
  
  
    
     Обычная горизонтальная линия: 
    
    
    
    
     Горизонтальная линия высотой 40 пикселей: 
    
    
    
  
      
    Попробуйте сами »
     Пример HTML-тега 
    , используемого со свойством height: ¶
      

  
     Название документа 
    <стиль>
      hr {
        высота: 20 пикселей;
      }
    
  
  
    
    
      Горизонтальная линия высотой 20 пикселей.
    
    
    
  
      
    Попробуйте сами »
     HTML 
     Атрибут ширины¶
     Атрибут width определяет ширину линии.
     Пример HTML-тега 
     с атрибутом ширины: ¶
      

  
     Название документа 
  
  
    
     Обычная горизонтальная линия: 
    
    
    
    
     Горизонтальная линия шириной 30%: 
    
    
    
  
      
    Попробуйте сами »
     Пример HTML-тега 
    , используемого со свойством width: ¶
      

  
     Название документа 
    <стиль>
      hr {
        ширина: 250 пикселей;
      }
    
  
  
    
     Горизонтальная линия шириной 50%: 
    
    
    
  
      
    Попробуйте сами »
     HTML 
     Атрибут Noshade¶
     Атрибут noshade делает горизонтальную линию без тени.
     Пример HTML-тега 
     с атрибутом noshade: ¶
      

  
     Название документа 
  
  
    
     Закрашенная горизонтальная линия: 
    
    
    
    
     Горизонтальная линия без штриховки: 
    
    <час без тени>
  
      
    Попробуйте сами »
     Пример HTML-тега 
    , используемого со свойством border: ¶
      

  
     Название документа 
    <стиль>
      hr {
        граница: 1px solid # 000000;
      }
    
  
  
    
    
      Горизонтальная линия, указанная в свойстве границы CSS.
    
    
    
  
      
    Попробуйте сами »
     Атрибут HTML align¶ 
     Атрибут align определяет выравнивание строки.
     Пример HTML-тега 
     с атрибутом align: ¶
      

  
     Название документа 
  
  
    
     Lorem ipsum - это просто фиктивный текст... 
    
    
    
  
      
    Попробуйте сами »
     Пример HTML-тега 
    , используемого со свойством text-align: ¶
      

  
     Название документа 
    <стиль>
      hr {
        ширина: 50%;
        выравнивание текста: слева;
        маржа слева: 0;
      }
    
  
  
    
     Горизонтальная линия, указанная с помощью свойства CSS text-align 
    
    
    
  
      
    Попробуйте сами »Атрибуты тега не поддерживаются в HTML5, вместо этого мы используем стили CSS.
     Как задать стиль тега 
     Свойство границы CSS используется для стилизации горизонтальной линии.
     Пример HTML-тега 
    , стилизованного со свойством border: ¶
      

  
     Название документа 
    <стиль>
      
      hr.one {
        граница сверху: 1px solid # 1c87c9;
      }
      
      hr.two {
        border-top: 1px пунктирная # 1c87c9;
      }
      
      час.три {
        верхняя граница: 1px с точками # 1c87c9;
      }
      
      hr.four {
        граница: 1px solid # 1c87c9;
      }
      
      hr.five {
        граница: 15px solid # 1c87c9;
        радиус границы: 5 пикселей;
      }
    
  
  
    
     По умолчанию: 
    
    
    
    
     Стилизация тега "hr" 
    
    
    
    
    
    
    
    
    
    
    
  
      
    Попробуйте сами »
     Атрибуты¶ 
     Тег
     поддерживает глобальные атрибуты и атрибуты событий.
     Как создавать горизонтальные линии в HTML 
     Это одна небольшая, короткая и простая команда; 
     . Вот как это выглядит в простейшей форме.
     И вот замечательный код, который его создал.
     
     
     Как видите, довольно просто. Вот и все. Я использовал команду 
      во всех этих руководствах, поэтому время от времени это руководство может немного сбивать с толку.Следующая строка - это просто разрыв раздела.
     Атрибуты горизонтальной линейки: 
     У команды 
      есть несколько атрибутов или параметров. Вот это вкратце.
     
     
     Вставляет горизонтальную линию. 
     Атрибуты: 
     
    1.  size = ”..”; толщина линии.
    2.  цвет = ”..”; цвет линии, только Internet Explorer.
    3.  ширина = ”.. » ; длина линии.
    4.  align = ”..”; выравнивание строки: ВПРАВО, ВЛЕВО или ПО ЦЕНТРУ.
    5.  без оттенка; проведите сплошную линию.
      РАЗМЕР  измеряется в пикселях. Попробуйте использовать 3, 5 или, может быть, 10, чтобы узнать, какая толщина вам нравится. Атрибут  COLOR  будет работать только с браузером Internet Explorer, поэтому я не буду использовать его без крайней необходимости. ЦВЕТ   должен быть в шестнадцатеричной форме.
     Я использую атрибут  WIDTH  гораздо чаще, чем любой другой. ШИРИНА  может быть введена в пикселях или в процентах от ширины окна браузера. Вот несколько примеров с использованием атрибута  WIDTH .
     А вот и код.
     
     
     И вот код.
     
     
     Мне очень нравится использовать проценты, потому что это заставляет вашу веб-страницу выглядеть подходящей для браузера зрителей.Чтобы понять, что я имею в виду, увеличьте или уменьшите ширину окна браузера, щелкнув край окна и перетащив его вправо или влево. Посмотрите, как линия, созданная с помощью процентов, подстраивается под ширину окна браузера.
     Атрибут  ALIGN  также очень полезен. Это позволяет вам выровнять вашу линию до  RIGHT ,  LEFT  или  CENTER . Для большинства браузеров  CENTER  используется по умолчанию и не требуется в команде 
     . NOSHADE  - последний атрибут, который делает линию сплошной вместо того, чтобы иметь эффект затенения.
     Другие примеры: 
     Еще несколько примеров показаны ниже. Код HTML для каждого из них выделен жирным шрифтом и с отступом. Надеюсь, это поможет.
     
     
     
     
     
     
     
     
     Оставьте комментарий, если это помогло! 
     Вы нашли это руководство полезным? Если да, дайте нам знать!
     Также пока вы здесь, зайдите на нашу страницу веб-дизайна, чтобы увидеть некоторые из проектов веб-дизайна Филадельфии, которые мы сделали для компаний в нашем регионе!
     Пример кода для HTML-тегов Hr (и какие браузеры их поддерживают) »
     В HTML-тегах
      Раскрытие:  Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Подробнее
     Элемент
     Узнайте, как шрифты и веб-типографика работают в HTML: руководство для начинающих
     Что делает  Пример кода для тегов HTML Hr (и какие браузеры их поддерживают) ?
     Элемент
     используется для обозначения тематического разрыва между элементами уровня абзаца. Обычно он отображается как горизонтальная линия.
     Дисплей
     блок
     Пример кода 
      
     Это над строкой. 
    

    

     Это под чертой.
          
     Это над линией.
     Это ниже линии.
     Разделитель, а не граница 
     Элемент 
      очень легко использовать неправильно. Если вы обнаружите себя включенным в шаблон страницы, вам, вероятно, стоит переосмыслить ситуацию. Структурные разделы дизайна вашей страницы должны быть определены с помощью соответствующих семантических тегов документа, а любые строки, которые вы можете пожелать, должны быть определены с помощью CSS. Элемент 
         , который создает небольшую разделительную полосу, лучше всего рассматривать как типографский элемент, как нечто, что может входить в контекст вашего контента, а не как часть дизайна.Это может быть полезно, когда вы хотите разделить часть контента на разделы без использования элементов заголовков.
     Адам - ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.
     Поддержка браузера для часов 
     Атрибуты часов 
     Имя атрибута Значения Примечания
     ширина 
    		 Используется для указания ширины горизонтальной линейки. Не рекомендуется в HTML5. Вместо этого используйте CSS.
     размер 
    		 Используется для указания высоты (толщины) горизонтальной линейки.Устарело. Вместо этого используйте CSS.
     noshade 
    		 Используется для изменения отображения горизонтальной линейки из стиля 3D по умолчанию на более плоский стиль 2D. Устарело. Используйте CSS для управления отображением элемента.
     цвет 
    		 Используется для управления цветом отображения горизонтальной линейки.
    No related posts.
    Добавить комментарий 
    Ваш адрес email не будет опубликован. Обязательные поля помечены *