Css пунктирная линия: border-bottom-style | htmlbook.ru

Разное 

Содержание

border-bottom-style | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

Устанавливает стиль границы внизу элемента.

Синтаксис

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Значения

none
Линия не отображается и значение ее толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.
inherit
Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-style</title>
  <style>
   #panel {
    background: #ccc; /* Цвет фона */
   } 
   #panel p {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
   }
   #title {
    background: navy; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom-width: 2px; /* Толщина линии внизу */
    border-bottom-style: solid; /* Стиль линии внизу */
    border-bottom-color: white; /* Цвет линии внизу */
   }
  </style>
 </head>
 <body>

  <div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

  
 </p>
  </div>

 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom-style

Объектная модель

[window.]document.getElementById(«elementID»).style.borderBottomStyle

Браузеры

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6. 0+8.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Сделать горизонтальную пунктирную линию с изображением ножниц.

Решение

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

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

Рис. 1. Горизонтальная линия

В идеале, линия должна формироваться единственным тегом <div>, а всё остальное возлагается на стили, включая вывод рисунка и надпись.

Для начала в HTML вставим основу линии.

<div></div>

Поскольку ножницы выводятся под линией, то воспользуемся свойством border-top. Если бы рисунок выводится над линией, соответственно потребуется border-bottom. Сам рисунок ножниц имеет высоту 37 пикселов, отнимем один пиксел на толщину линии, разделим полученное значение пополам и получим 18 пикселов видимой части. Это число будет высотой блока и значением для сдвига фона вверх.

.line  {
 border-top: 1px dashed #000; /* Параметры линии */
 height: 18px; /* Высота блока */
 background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
}

В свойстве background указывается путь к рисунку, отменяется повторение фона и задаётся сдвиг вправо на 10px и вверх на 18px. Сдвиг по вертикали нужен, потому что у нас на картинке целые ножницы, а не их половинка (рис. 2).

Рис. 2. Изображение ножниц для линии

Осталось добавить текст под линией. Воспользуемся псевдоэлементом :after, в сочетании со свойством content он позволяет выводить текст после элемента. Добавляем :after к классу line.

.line:after { 
 content: "Линия отреза";
}

Окончательно выравниваем текст по центру линии через свойство text-align и настраиваем вид текста (пример 1).

Пример 1. Линия

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия отреза</title>
  <style>
   .line {
    text-align: center; /* Выравниваем текст по центру */
    border-top: 1px dashed #000; /* Параметры линии  */
    height: 18px; /* Высота блока */
    background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */
   }
   .line:after { 
    content: "Линия отреза"; 
    font-family: Arial, sans-serif; /* Рубленый шрифт для надписи */
    font-size: 12px; /* Размер шрифта */
    vertical-align: top; /* Выравнивание по верхнему краю */
   }
  </style>
 </head>
 <body>
  <p>Текст до</p>
  <div></div>
  <p>Текст после</p>
 </body>
</html>

Браузеры

Браузер IE6-7 не поддерживает псевдоэлемент :after, поэтому текст под линией в нём выводиться не будет.

css — css пунктирный час — это набор маленьких квадратов, а не точек / кружков

Вот часть, которую я добавил в мою таблицу стилей CSS в заголовке:

<style>

    body{
      background-color: #EAF6F6;
    }

    hr{
border-style: none;
border-top-style: dotted;
border-color: lightgrey;
border-width: 5px;
width: 5%;
    }

  </style>

И вот как это выглядит:

Как вы можете видеть, это больше похоже на квадраты, чем на округлые формы, такие как точки, и урок, которому я следовал, содержал точно такой же фрагмент кода, но в итоге имел крошечные точки в линии a.k.a пунктирная линия! Это почему?

0

Gigili 22 Июн 2020 в 18:38

2 ответа

Пунктирные линии отображаются по-разному в зависимости от браузера и операционной системы. Я быстро провел тест с несколькими браузерами на нескольких системах.

Следующие браузеры отображают квадратные точки:

  • Safari MacOS
  • Safari iOS
  • Chrome iOS

Следующие браузеры отображают круглые точки:

  • Chrome MacOS
  • Chrome Windows
  • Firefox MacOS
  • Firefox Windows
  • Краевые окна

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

0

Aedan 22 Июн 2020 в 18:47

<hr />     
.class-1 {
border: 5px dotted #000;
border-color: red;
}

Попробуйте включить этот класс в свой тег hr

-1

Heena26 22 Июн 2020 в 15:47

Разделительная полоса в 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 тег <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>

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

Пунктирная линия в html. Как сделать линию с помощью 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

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

и .

Атрибуты тега

— width – отвечает за длину линии. Может указываться как в процентах, так и пикселях.

— size – толщина линии. Указывается в пикселях.

— color – определяет цвет линии.

— align – атрибут, отвечающий за выравнивание линии. В свою очередь к нему относится команда.

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

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

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

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

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

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

Для отрисовки горизонтальных линий в HTML существует специальный тег

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

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

Рисуем горизонтальные линии

Параграф.

Параграф.

Параграф.

Результат в браузере

Параграф.

Параграф.

Параграф.

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

Как изменить цвет, толщину и ширину горизонтальных линий?

В старых версиях HTML у тега

существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color , size и width , соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style . Общий синтаксис такой:
style= «background:цвет» > — цвет линии (вернее ее фон).
style= «height:размер» > — толщина линии.
style= «width:размер» > — ширина линии.
style= «background:цвет; height:размер; width:размер» > — а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#). Ну, вы об этом уже знаете из урока по изменению цвета текста и фона .

А вот об изменении размеров мы поговорим подробнее. Как вы помните из урока по изменению шрифтов , в CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.

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

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

. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег
style= «width:50%» > внутри элемента
, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока
.

Пример изменения цвета, толщины и ширины горизонтальных линий.

Меняем цвет, толщину и ширину горизонтальных линий.

Результат в браузере

Изменение положения горизонтальных линий

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

атрибут align со следующими значениями:
  • center — линия выравнивается по центру (значение по умолчанию).
  • left — прижимается к левому краю.
  • right — прижимается к правому краю.

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

Меняем положение горизонтальных линий.

Результат в браузере

Как убрать рамку вокруг линии?

Посмотрите на самый первый пример этого урока. Как вы считаете, какой цвет у этих линий? А вот и неверно. Они прозрачные, как и любые элементы страницы, у которых не указан фоновый цвет! Не верите? Тогда посмотрите на пример, где мы изменяли цвет линий. У самой первой мы не установили цвет, а только увеличили ее размер и разве эта линия не прозрачная? Так-то!

Теперь объясню. По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.

Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style . А пишется это так:

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

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

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

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

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

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 10 найти экранную клавиатуру можно также путем ввода в строку Поиска слов «экранная клавиатура».

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

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

1 Тире и Enter

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

2 Shift, тире и Enter

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

Задача

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

Решение

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

С помощью тега

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

По умолчанию линия

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Текстовоя строка

Результат данного примера показан на рис. 1.

Рис. 1. Цветная горизонтальная линия

Граница элемента или блока в CSS HTML

Свойство CSS – «border», позволяет задавать толщину, цвет и тип линии по периметру вокруг элемента. Параметры данного свойства могут записываться в одной строке, разделяясь через пробел и в любом порядке.

Примеры задания параметров границы


border : 1px solid white;
border : 1px solid black;
border : 1px solid gray;
  • 1px – толщина линии один пиксель
  • solid – сплошная линия
  • white – белый цвет
  • black – чёрный цвет
  • gray – серый цвет

Сплошная граница элемента


HTML

<div>
  Рамка сплошной линией
</div>



CSS

body{
    height: 100%;
    font-size: 20px;
    padding-top: 50px;
    background-color: #eaeaea;
    font-family: Arial, Helvetica, sans-serif;
} 
.solid{
    width: 250px;    
    padding: 20px;
    margin: 0px auto;
    background: #fc3;
    border: 4px solid black;
}

Штриховая граница элемента


border: 4px dashed black;



HTML

<div>
  Рамка штриховой линией
</div>



CSS

. dashed{
    width: 250px;    
    padding: 20px;
    margin: 0px auto;
    background: #fc3;
    border: 4px dashed black;	
}

Пунктирная граница элемента


border: 4px dotted black;



HTML

<div>
  Рамка пунктирной линией
</div>



CSS

.dotted{
    width: 250px;    
    padding: 20px;
    margin: 0px auto;
    background: #fc3;
    border: 4px dotted black;
}

Граница элемента двойной линией


border: 6px double black;



HTML

<div>
  Рамка двойной линией
</div>



CSS

.double{
    width: 250px;    
    padding: 20px;
    margin: 0px auto;
    background: #fc3;
    border: 6px double black;
}

Свойство отдельных участков границы


border-top:  8px solid red;
border-bottom:  8px solid blue;
border-left:  8px solid grey;
border-right:  8px solid chocolate;



HTML

<div>
  Разноцветная рамка
</div>



CSS

.individual{	
    width: 250px;
    padding: 20px;
    margin: 0px auto;	
    background: #fc3;
    text-align: center;
    border-top : 8px solid red;
    border-bottom : 8px solid blue;
    border-left : 8px solid grey;
    border-right : 8px solid chocolate;	
}

Вдавленная рифленая рамка в объёме


border: 12px groove #999;

Объемная выпуклая рамка


border: 12px outset #999;

html — Как нарисовать пунктирную линию с помощью CSS?

html — Как нарисовать пунктирную линию с помощью CSS? — Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 333к раз

Как нарисовать пунктирную линию с помощью CSS?

Крошечный

24.9k9191 золотой знак299299 серебряных знаков571571 бронзовый знак

Создан 17 ноя.

КавехКаве

2,1455 золотых знаков2828 серебряных знаков3232 бронзовых знака

0

Например:

  ч {
  граница: нет;
  граница сверху: 1px с точками # f00;
  цвет: #fff;
  цвет фона: #fff;
  высота: 1 пикс;
  ширина: 50%;
}

См. Также Стилизация

с помощью CSS.