В основному горизонтальні лінії використовуються для декорування 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% відповідно, від розміру шрифту на сторінці.
- Напишіть під першим заголовком параграф, під другим – довгу цитату, під третім – вірш. І нехай вірш розташовується у центрі сторінки.
- Виділіть жирним шрифтом три слова у цитаті.
- Під заголовком статті на всю ширину сторінки намалюйте горизонтальну лінію червоного кольору завтовшки три пікселі.
- Зверху та знизу вірша намалюйте лінії завтовшки в один піксель чорного кольору. Нехай ширина верхньої лінії приблизно дорівнює ширині вірша, а нижньої - вдвічі менше.
- Заберіть у лінійок непотрібні рамки.
Завдання
Зробити горизонтальну лінію на сторінці.
Рішення
Горизонтальні лінії добре використовуватиме відділення одного блоку тексту від іншого. Невеликий за розміром текст, зверху та знизу якого розташовуються горизонтальні лінії, привертає більше уваги читача, ніж звичайний текст.
За допомогою тега
можна намалювати горизонтальну лінію, вигляд якої залежить від використовуваних атрибутів, а також браузера. Тег відноситься до блокових елементів, тому лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку. Завдяки безлічі атрибутів тега
лінією, створеною через цей тег, легко керувати. Якщо ще підключити потужність стилів, то додавання лінії до документа перетворюється на просте заняття.За замовчуванням лінія
відображається сірого кольору та з ефектом об'єму. Такий вид лінії не завжди підходить до дизайну сайту, тому зрозумілим є бажання розробників змінити колір та інші параметри лінії через стилі. Однак браузери неоднозначно підходять до цього питання, через що доведеться використати відразу кілька стильових властивостей. Зокрема, старі версії браузера Internet Explorer для кольору лінії використовують якість color , а решта браузери — background-color . Але це ще не все, при цьому обов'язково слід вказати товщину лінії (властивість height) відмінною від нуля та прибрати рамку навколо лінії, задаючи значення none у властивості border. Збираючи всі властивості воєдино для селектора hr отримаємо універсальне рішення для популярних браузерів (приклад 1).Приклад 1. Горизонтальна лінія
HTML5 CSS 2.1 IE Cr Op Sa Fx
Колір горизонтальної лінії
Текстовий рядок
Результат цього прикладу показаний на рис. 1.
Рис. 1. Кольорова горизонтальна лінія
Здавалося б, навіщо можуть знадобитися чотири способи? Адже практично кожна людина використовує один спосіб, до якого він звик. Наприклад, натиснув на 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. В результаті побачимо товсту горизонтальну лінію.
Для підкреслення деяких особливо важливих елементів сайту, не завадило б використовувати всілякі та передбачені для цього 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- Атрибут, який відповідає за вирівнювання лінії. У свою чергу, до нього належить команда.
Від автора:я вітаю вас. Необхідність представити кілька блоків на веб-сторінці в одну лінію — дуже часте завдання, яке постає перед верстальниками. Вона виникає при верстці практично кожного шаблону, тому всім нам у будь-якому разі потрібно знати та застосовувати основні способи зміни поведінки блоків.
Перш ніж ми подивимося найпоширеніші прийоми, хотів би згадати трохи теорії. Елементи веб-сторінки поділяються на блокові та малі. І різниця між ними дуже проста - малі можуть розташовуватися в один рядок, а блокові - ні. Звичайно, на цьому відмінності не закінчуються, але це основна відмінність. Вже блоки можуть бути відступи зверху і знизу (у рядкових — ні), а також до них можна застосовувати більше властивостей.
Основні способи збудувати в css блоки в ряд
Є ми не будемо нічого ускладнювати, є 3 основних способи:
Перетворити блоки на малі елементи. При цьому блокові властивості губляться, тому цей варіант практично ніколи не використовується
Зробити потрібні елементи блоково-рядковими. Це спеціальний тип, у якому елемент зберігає свої властивості, але водночас дозволяє іншим блокам розташуватися поруч.
Зробити елементи, що плавають за допомогою властивості float.
На цих випадках зупинимося. Флексбокс, табличне відображення та інші моменти не розглядатимемо. Отже, нехай у нас є 3 підзаголовки.
Заголовок 1
Заголовок 2
Заголовок 3
Звичайно, всі CSS-властивості потрібно прописувати в окремому файлі (style.css), який потрібно підключити до html-документу. У цей файл я запишу мінімальний стиль, щоб було видно наші підзаголовки.
h3( background: #EEDDCD; )
h3 (
background: #EEDDCD;
Ось вони на сторінці:
Їсти вони поводяться як блоки. Кадий розташовується на своєму рядку, між ними є відступи. При бажанні також ви можете задати будь-які внутрішні відступи і взагалі зробити що завгодно.
Перетворимо на рядки і відразу додамо внутрішні відступи. Для цього селектору h3 потрібно додати такі властивості:
display: inline; padding: 30px;
Існують 2 основні проблеми, які виникають при використанні цього прийому. Перша – це мінімальний відступ. Утворюється він через те, що в коді між блоками є один пробіл, який утворює цей відступ. Якщо ця проблема потребує вирішення, є 2 основних варіанти:
У html розташувати код потрібних блоків в одну лінію без пробілів
Проставити негативний зовнішній відступ праворуч -4 пікселі. Саме стільки займає одну прогалину.
Друга проблема - при різній висоті елементів можуть виникати проблеми з відображенням. Загалом, найкращий варіант – плаваючі блоки. Замість display: inline-block пишемо ось що:
Блоки в лінію з використанням фреймворку
Відразу скажу, що якщо ви збираєтеся використовувати будь-який нормальний css-фреймворк (наприклад, Bootstrap), то там все ще набагато простіше. Весь css-код, який відповідає за розміщення елементів, вже написаний і вам залишиться лише заданий правильні класи. Для цього достатньо вивчити систему сітки, і ви зможете робити багатоколонкові адаптивні шаблони без особливих труднощів. Принаймні це буде значно простіше, ніж при написанні css з нуля.
Ще одна проблема написання коду з нуля виникає якраз коли вам потрібен адаптивний дизайн. Звичайно, його можна реалізувати самостійно, володіючи медіа-запитами, але це буде набагато складніше, якщо у вас є складний шаблон.
Наприклад, коли у вас на великих екранах має бути 4 колонки, на середніх – 3, а на мобільних телефонах – 2. За допомогою таких фреймворків, як Bootstrap, а точніше за допомогою його сітки, реалізувати подібне – справа буквально кількох хвилин.
Плавно переводячи тему на фреймворк Bootstrap, в черговий раз зазначу, що якщо перед вами стоїть завдання згорнути складний адаптивний шаблон, то гріх не скористатися сіткою. Для цього навіть не обов'язково підключати повну версію фреймворку – його можна кастомізувати та зупинити там лише те, що справді вам потрібно.
Навчитися працювати з фреймворком ви зможете за допомогою. Там і теорія, але найголовніше – є практика. Ви зверстаєте 3 адаптивні шаблони і отримаєте відмінний досвід, який дозволить верстати сайти на замовлення або для себе. А якщо ви хочете безкоштовно ознайомитися з перевагами та можливостями фреймворку, пропоную вам переглянути нашу серію статей з Bootstrap, а також за версткою простого макета. Бажаю вам успіхів у верстці та сайтобудуванні загалом.
