Як зробити лінію в html

Як зробити кольорову горизонтальну лінію?

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

завдання

Зробити горизонтальну лінію на сторінці.

Рішення

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

За допомогою тега можна намалювати горизонтальну лінію, вид якої залежить від використовуваних атрибутів, а також браузера. Тег відноситься до блокових елементів, тому лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку. Завдяки безлічі атрибутів тега лінією, створеної через цей тег, легко управляти. Якщо ще підключити міць стилів, то додавання лінії в документ перетворюється в просте заняття.

За замовчуванням лінія відображається сірого кольору і з ефектом об’єму. Такий вид лінії не завжди підходить до дизайну сайту, тому зрозуміло бажання розробників змінити колір і інші параметри лінії через стилі. Однак браузери неоднозначно підходять до цього питання, через що доведеться використовувати відразу кілька стильових властивостей. Зокрема, старі версії браузера Internet Explorer для кольору лінії застосовують властивість color, а інші браузери — background-color . Але це ще не все, при цьому обов’язково слід вказати товщину лінії (властивість height) відмінною від нуля і прибрати рамку навколо лінії, задаючи значення none у властивості border . Збираючи все властивості воєдино для селектора hr, отримаємо універсальне рішення для популярних браузерів (приклад 1).

приклад 1. горизонтальна лінія

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Горизонтальні і вертикальні лінії за допомогою html і css

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

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

Горизонтальна і вертикальна лінії за допомогою css

Зробити це можна за допомогою css. Для цього, я укладаємо необхідний фрагмент тексту в блок за допомогою тега div, а потім у файлі style.css або безпосередньо в html — коді прописуємо для цього блоку властивості для вірніше або нижньої межі за допомогою border-top і border-bottom. Ось приклад:

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

Ось як це буде виглядати на сторінці:

Горизонтальна лінія за допомогою css.

У цього способу є свої переваги:

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

До недоліків можна віднести відносну громіздкість коду.

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

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

Перша особливість цього тега полягає в тому, що у нього немає парного закриває тега. Його можна використовувати в будь-якому місці html — коду між тегами і

Горизонтальна лінія HTML

Горизонтальна лінія HTML

Вітаю вас, дорогі друзі!

При верстці сторінки, іноді, виникає необхідність виділення заголовка або якогось блоку на сторінці горизонтальною лінією. Наприклад, ось так:

Горизонтальна лінія HTML

Навігація по статті:

  • Спеціальний HTML-тег для завдання горизонтальної лінії
  • Візуалізація горизонтальної лінія HTML за допомогою атрибутів
  • Стилізація горизонтальної лінії HTML за допомогою CSS

Таку рису можна зробити декількома способами. Сьогодні ми розглянемо варіант з додаванням горизонтальної лінії HTML-тегом.

Спеціальний HTML-тег для завдання горизонтальної лінії

Отже, який з тегів HTML малює горизонтальну лінію? Як це не дивно, в HTML для цього передбачено спеціальний тег . Зовнішній вигляд такої лінії залежить від заданих параметрів.

У прикладі для не задано жодних параметрів візуалізації і результат виглядає ось так:

Горизонтальна лінія HTML

В даному випадку для тега були застосовані параметри, прописані в темі WordPress мого сайту. У вашому випадку горизонтальна лінія HTML може виглядати по-іншому.

Візуалізація горизонтальної лінія HTML за допомогою атрибутів

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

  • align — вирівнювання по горизонталі. Доступні значення: center, left, right. За замовчуванням задано вирівнювання по центру.
  • color — колір. Здається шістнадцятковим числом або назвою кольору.
  • noshade — лінія без тривимірних ефектів. Тривимірний ефект працює тільки в тому випадку якщо для лінії не було наведено колір.
  • size — товщина. Здається будь-яким цілим позитивним числом. 0 задає товщину рівну 1 пікселю.
  • width — ширина. Можна ставити в пікселях або відсотках.

Приклад використання даних атрибутів:

Ось що виходить:

Горизонтальна лінія HTML

Стилізація горизонтальної лінії HTML за допомогою CSS

Так само для стилізації тега ви можете використовувати CSS-стилі. Задавати візуальне оформлення за допомогою стилів доцільно в тому випадку якщо у вас досить часто на сторінці використовується тег, так як це дозволити істотно скоротити розмір коду сторінки. Та й взагалі, на мій погляд, це зручніше.

Задати стилі для тега ви можете двома способами:

  1. 1. У тілі HTML-сторінки перед закриттям тега за допомогою тега
  2. 2. Прописати стилі оформлення в файлі style.css

Для стилізації горизонтальної лінії HTML ви можете використовувати такі CSS-стилі:

  • width — завдання ширини в пікселях або відсотках
  • height — висота в пікселях
  • background-color — колір ліній
  • border — за допомогою даного стилю можна задати обведення для лінії
  • border-radius — задає обрізка кутів
  • margin — відступ елемента по верхньому, правому, нижньому і лівому краю. Для вирівнювання по центру необхідно задати значення auto.
  • float — стиль задає обтікання елемента. В даному випадку можна використовувати для вирівнювання по лівому або по правому краю.

Якщо вам потрібно задати однаковий стиль для всіх тегів на вашому сайті, то необхідно використовувати наступний селектор:

Ссылка на основную публикацию