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

 class="create-line">

.create-line  width: 200px; border-top: 3px solid #32a1ce; > 

Вариант №2. Используем готовый тег который формирует горизонтальную линию — hr.

Вариант №3. С помощью псевдоэлементов :before и :after . Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.

 class="create-line-left"> Добавим линию слева и справа 

Теперь рассмотрим стили.

.create-line-left  padding-left: 20px; /* необходим для формирования позиций линий */ position: relative; /* весь блок будет занимать ширину по размеру контента в нём */ display: inline-block; > .create-line-left:before content: " "; background: #33CCFF; width: 50px; height: 1px; /* располагаем линию сверху от текста */ top: 15px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > .create-line-left:after content: " "; background: #333333; width: 50px; height: 1px; /* размещаем линию снизу и справа*/ bottom: 15px; right: 20px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > 

HTML тег

HTML тег

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

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

По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров:

Разделительная линия:

Изменяем цвет линии:

Изменяем толщину линии:

Пунктирная линия html:

Атрибуты

HTML тег

поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Пример

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

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

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

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

Оглавление: 1. При помощи автозамены 2. Через границу 3. Через фигуры 

При помощи автозамены

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

Автозамена — это ввод определенной комбинации в Ворде, которая автоматически заменяется на различные фигуры, символы и другие элементы. Есть в списке автозамен и горизонтальные линии, при этом нескольких видов.

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

Символы нужно именно вводить и только на новой строке. Если скопировать их или сбиться в процессе ввода, что-то стереть, а потом вновь ввести — автоматическая замена не сработает.

• ___ одна прямая горизонтальная линия
• ~~~ одна волнистая горизонтальная линия
• === две прямые горизонтальные линии
• ### три прямые горизонтальные линии, средняя из которых толстая
• *** пунктирная горизонтальная линия (квадратными точками)

Это самый простой способ поставить нужную горизонтальную линию в Ворд.

Через границу

В Ворде есть инструмент для создания границ. Обычно его используют вместе с таблицами. Но можно его применить и для создания прямой горизонтальной линии.

Просто поставьте курсор в Ворде в нужное место, после чего нажмите на инструмент с границами и в выпадающем меню выберите “Нижняя граница”.

Появится граница, над которой можно разместить текст. Как можно видеть, расстояние между верхним текстом и нижним текстом при такой постановке горизонтальной линии отличается.

Если такой вариант не подходит, можно выбрать пункт “Горизонтальная линия” в списке границ. Эта линия устанавливается строго по центру по высоте, тем самым расстояние между верхним и нижним текстом будет одинаковое от линии.

Можно выполнить дополнительную настройку линии. На нее нужно нажать дважды левой кнопкой мыши и появится меню. В нем можно задать цвет линии, толщину, ширину и некоторые другие параметры. Настроив линию нужным образом, нажмите “ОК”.

Через фигуры

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

Перейдите в верхнем меню на вкладку “Вставка”, выберите пункт “Фигуры”, и среди них кликните на нужную линию.

Обратите внимание
Можно использовать не только прямые линии, но и волнистые или линии со стрелками.

Взяв инструмент линии, прочертите ее в нужном направлении из одного угла в другой. Обратите внимание, чтобы рисовалась строго прямая линия, зажмите Shift при ее проведении.

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

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