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

• Введите
  

  ---

  , чтобы изменить толщину линии. Замените «#» числовым значением толщины (например, size=»10″).
• Введите
  

  ---

  , чтобы изменить ширину линии. Замените «#» количеством пикселей или процентным отношением к ширине страницы (например, width=»200″ или width=»75%»).
• Введите
  

  ---

  , чтобы изменить цвет линии. Замените «#» названием цвета или его шестнадцатеричным кодом (например, color=»red» или color=»# FF0000″).
• Введите
  

  ---

  , чтобы выровнять линию. Замените «#» на «right» (по правому краю), «left» (по левому краю) или «center» (по центру) (например,

  ---

  ).

• Откройте меню Файл.
• Нажмите Сохранить как.
• Введите имя для файла в поле «Имя файла».
• Добавьте .html после имени файла.
• Нажмите Сохранить.

 html> body> h1>Заголовокh1> hr size="6" width="50%" align="left" color="green"> p1>Данная строка должна быть отделена от заголовка линией.p1> body> html> 

Метод 2 из 2:

Работа в CSS/HTML5

• Откройте Блокнот или другой текстовый редактор/редактор кода.
• Откройте меню Файл.
• Нажмите Открыть.
• Выберите файл HTML.
• Нажмите Открыть

• Введите в верхней части документа.
• Дважды нажмите ↵ Enter , чтобы добавить две новые строки.
• Введите , чтобы закрыть заголовок.

• В качестве альтернативного способа можно использовать внешнюю таблицу стилей. Прочтите статью «Как вставить файл CSS в HTML», чтобы узнать, как связать внешний файл CSS с файлом HTML.

Введите hr < .Это тег CSS для стилизации горизонтальной линии. Добавьте его после тега «style» в заголовке или во внешнем файле CSS.

> hr width: 50%; height: 20px; background-color: red; margin-right: auto; margin-left: auto; margin-top: 5px; margin-bottom: 5px; border-width: 2px; border-color: green; > style> head> body> h1>Заголовокh1> hr> p1>Данная строка должна быть отделена от заголовка горизонтальной линией p1> body> html>

Сложный заголовок с линиями по бокам текста на css

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

Мы будем использовать обычный тег div с классом .title и его псевдоэлементы :before и :after . В div напишем нужный текст заголовка, а псевдоэлементы будут линиями: :before линия слева, :after соответственно будет линией справа.

Код html:

 
Наш 
заголовок 
 

Код css:

.title { /* Чтобы спрятать часть линий, которые ** будут вылазить за пределы блока */ overflow: hidden; /* Выравнивание заголовка по центру, ** можно использовать left, right */ text-align: center; /* Тут можно добавить другие стили для заголовка */ font-size: 30px; } .title span { /* Стили тега обертки для заголовков ** в несколько строк */ display: inline-block; vertical-align: middle; } .title:before, .title:after { /* Обязательно указываем пустое свойство content, ** иначе псевдоэлементы не появятся на сайте */ content: ""; /* Указываем что наши линии будут строчно-блочные и ** выравнивание по высоте - по центру */ display: inline-block; vertical-align: middle; /* Задаем ширину 100% и выбираем высоту линии, ** в нашем примере она равна 4 пикселям */ width: 100%; height: 4px; /* Добавляем цвет для линии */ background-color: #00cf00; /* Добавляем пседоэлемантам возможность изменить ** позицию линии, для создания отступов от текста */ position: relative; } .title:before { /* Смещаем левую линию на 100% влево, чтобы линия ** встала рядом с текстом слева */ margin-left: -100%; /* Указываем в пикселях отступ линии от текста заголовка */ left: -14px; } .title:after { /* Смещаем правую линию на 100% вправо, чтобы ** линия встала рядом с текстом справа */ margin-right: -100%; /* Указываем в пикселях отступ линии от текста заголовка */ right: -14px; }

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

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

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

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

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

Атрибуты hr