Для підкреслення деяких особливо важливих елементів сайту не завадило б використовувати всілякі та передбачені для цього 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 - це елемент оформлення сторінки, що виконує ряд функцій:
- Декоративна. Допомагає додати сторінці привабливості.
- Роздільна. Сприяє ефективному відділенню різної за змістом інформації.
- Видільна або підкреслююча. Приверне увагу гостей сторінки до необхідної та найважливішої інформації.
Саме горизонтальна лінія вважається найбільш доступним способомдля реалізації цілого ряду функцій. Створити її дуже просто, а зовні вона виглядає дуже вигідно. Шляхом нехитрих змін html-коду ви зможете регулювати:
- довжину;
- ширину;
- колірні характеристики;
- вирівнювання по тому чи іншому краю.
Варто звернути увагу, що горизонтальна лінія відноситься до блочним елементам. Це означає, що вона займає новий рядок на сторінці, а наступний за нею текст піде нижче.
Створюємо горизонтальну лінію в HTML
Задати лінію можна за допомогою простого тегу – hr у трикутних дужках. Він є скороченням від «Horisontal Rule» і задає класичні зовнішні параметри. Відрізняється від багатьох інших тим, що не потребує закриває тегу і здатний існувати самостійно. Змінити зовнішні характеристикиелемента можна за допомогою додаткових значень у тезі:
- Довжина. Якщо ви не хочете, щоб довжина лінії поширювалася на всю сторінку, то можна задати бажаний розмір у пікселях або відсотках. Робиться це про допомогу додаткового слова«width» у тегу та числового показника довжини, вказаного після знака «=» у лапках.
Виглядає так. Наприклад, якщо нам потрібна довжина, що становить 100 пікселів, задаємо такий тег: hr width="100"
- Вирівнювання. Вирівнювання можливе по лівому або правому краю, а ще по центру. Ця характеристикадіє лише в тому випадку, якщо ви вже задали параметр width, тому що лінію довжиною на всю сторінку неможливо вирівняти. Для вирівнювання задаємо додатковий атрибут у тег «align» і додаємо до нього напрямок: center – для центрального, left – для лівого та right – для правого вирівнювання.
Готовий тег у такому разі виглядатиме так. Наприклад, якщо нам потрібно задати центральне вирівнювання для горизонтальній лініїдовжиною в 150 пікселів, то готовий тег буде виглядати так: hr align = "center" width = "150".
Зверніть увагу, що align, показник для вирівнювання, ставиться на 1 місце, незважаючи на те, що атрибут залежить від показника довжини width.
- Ширина. На вибір можна також вказувати ширину, створюючи жирне або тонке підкреслення. Цей критерій ні від чого не залежить і може бути використаний як самостійний без вказівки довжини чи вирівнювання. Для нього ми використовуємо атрибут size у тэзі та числовий показник, що дорівнює бажаній ширині в пікселях. Число вказується в лапках після атрибуту size та символу =.
Таким чином, якщо нам потрібно створити лінію шириною 15 пікселів, необхідно створити наступний тег: hr size="15".
- Колір. Задається також як незалежний показник. Для його зміни використовується атрибут colorу поєднанні з назвою кольору у формі коду або на англійською. Колір вказується в лапках після символу =.
Таким чином, тег для стандартної лінії білого кольоруможна написати двома способами: hr color="#FFFFFF" або hr color="white"
Чорний колір можна створити, використовуючи код #000000.
- Прибрати тінь. Якщо вам необхідний елемент, що не містить тінь, то в тэзі слід використовувати атрибут 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 . А пишеться це так:
Домашнє завдання.
- Створіть заголовки статті, розділу та підрозділу. Розташуйте їх по центру.
- Встановіть шрифт Arial на всій сторінці, а для заголовків - Courier.
- Нехай розмір шрифту по всій сторінці буде 85% від розміру в браузері за замовчуванням. А у заголовків 145%, 125% та 110% відповідно, від розміру шрифту на сторінці.
- Напишіть під першим заголовком параграф, під другим – довгу цитату, під третім – вірш. І нехай вірш розташовується в центрі сторінки.
- Виділіть жирним шрифтомтри слова в цитату.
- Під заголовком статті на всю ширину сторінки намалюйте горизонтальну лінію червоного кольору завтовшки три пікселі.
- Зверху та знизу вірша намалюйте лінії завтовшки в один піксель чорного кольору. Нехай ширина верхньої лінії приблизно дорівнює ширині вірша, а нижньої - вдвічі менше.
- Заберіть у ліній непотрібні рамки.
Здавалося б, навіщо можуть знадобитися чотири способи? Адже практично кожна людина використовує один спосіб, до якого він звик. Наприклад, натиснув на 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. Кольорова горизонтальна лінія
