Підручник html - горизонтальні лінії
В основному горизонтальні лінії використовуються для декорування HTML-сторінок сайту, надаючи їм більш привабливий вигляд. Але також ними можна візуально розмежовувати інформацію сусідніх розділів, додаючи зручності Новомосковсктелям при її вивченні. Загалом, малюйте горизонтальні лінії там, де вам потрібно, ось і все.
Як намалювати горизонтальну лінію?
Для відображення горизонтальних ліній в HTML існує спеціальний тег
. Причому він є блоковим тегом. тобто створює переноси рядків до і після себе, тому лінія завжди виходить на окремому рядку. Відповідно і вказувати його можна тільки всередині тегів, які можуть містити блокові елементи, наприклад або
. А ось сам
не може мати вмісту, так як у нього просто немає закриває тега, тобто він є порожнім.Приклад малювання горизонтальних ліній в HTML
Результат в браузері
Як бачите, лінії виходять дуже тонкими, непоказними і малюються на всю доступну ширину, тому зараз ми навчимося їх змінювати, щоб вони виглядали більш привабливо.
Як змінити колір, товщину і ширину горизонтальних ліній?
У старих версіях HTML у тега
існували спеціальні атрибути, за допомогою яких можна було змінити колір, товщину і ширину горизонтальних ліній. Це color. size і width. відповідно. Але в нових версіях від них відмовилися на користь Каскадних таблиць стилів (CSS), тому, як ви вже здогадалися, ми знову будемо використовувати наш улюблений атрибут style. Загальний синтаксис такий:
- колір лінії (вірніше її фон).
- товщина лінії.
- ширина лінії.
- а можна вказати відразу всі параметри, тільки не забуваємо про крапку з комою (;).Колір можна вказувати на його імені на англійській або по HEX-коду кольору, перед яким ставиться решітка (#). Ну, ви про це вже знаєте з уроку по зміні кольору тексту і фону.
А ось про зміну розмірів ми поговоримо докладніше. Як ви пам'ятаєте з уроку зі зміни шрифтів. в CSS існує близько десяти одиниць виміру, але ширину лінії можна вказувати тільки в пікселях (px) і відсотках (%), а товщину взагалі тільки в пікселях. Якщо ви поставите інші одиниці виміру, то це не буде помилкою, але браузери їх просто проігнорують.
Якщо ви вказуєте розміри в пікселях, то товщина і ширина лінії буде залежати від здатності монітора, на якому переглядають ваш сайт (чим вище дозвіл екрана, тим тонше і вже лінія).
Як я вже сказав, тільки ширину лінії можна вказувати у відсотках. Процентні розміри завжди залежать і вираховуються виходячи з розмірів батьківського елементу-контейнера, всередині якого розташований тег
. У цьому випадку розміри батька беруться за 100%. Наприклад, якщо ми розмістимо тег
всередині елемента. то як би ми не змінювали розміри вікна браузера або дозвіл монітора - ширина лінії завжди буде становити половину ширини блоку.Приклад зміни кольору, товщини і ширини горизонтальних ліній.
Результат в браузері
Зміна положення горизонтальних ліній
Коли змінюєш ширину горизонтальної лінії, то стає добре видно, що браузери завжди розташовують її по центру. Якщо ви хочете змінити її положення, то просто використовуйте всередині
атрибут align з наступними значеннями:
- center - лінія вирівнюється по центру (значення за замовчуванням).
- left - притискається до лівого краю.
- right - притискається до правого краю.
Приклад вирівнювання горизонтальних ліній.
Результат в браузері
Як прибрати рамку навколо лінії?
Подивіться на найперший приклад цього уроку. Як ви вважаєте, який колір у цих ліній? А ось і невірно. Вони прозорі, як і будь-які елементи сторінки, у яких не вказано фоновий колір! Не вірите? Тоді подивіться на приклад, де ми змінювали колір ліній. У найпершій ми не встановили колір, а тільки збільшили її розмір і хіба ця лінія не прозора? Так то!
Тепер поясню. За замовчуванням браузери малюють навколо ліній рамки, які створюють ефект тривимірності. Так ось, коли ми не збільшуємо товщину горизонтальних ліній, браузери нам показують тільки ці рамки, так як товщина самої лінії становить 0px.
Щоб прибрати рамку навколо лінії, яка частіше тільки псує зовнішній вигляд, ми знову застосуємо атрибут style. А пишеться це так:
- Створіть заголовки статті, розділу і підрозділу. Розмістіть їх все по центру.
- Встановіть на всій сторінці шрифт Arial, а для заголовків - Courier.
- Нехай розмір шрифту на всій сторінці буде 85% від розміру в браузері за замовчуванням. А у заголовків 145%, 125% і 110% відповідно, від розміру шрифту на сторінці.
- Напишіть під першим заголовком параграф, під другим - довгу цитату, під третім - вірш. І нехай вірш розташовується по центру сторінки.
- Виділіть жирним шрифтом три слова в цитаті.
- Під заголовком статті на всю ширину сторінки намалюйте горизонтальну лінію червоного кольору товщиною три пікселя.
- Зверху і знизу вірші намалюйте лінії товщиною в один піксель чорного кольору. Нехай ширина верхньої лінії буде приблизно дорівнює ширині вірша, а нижній - в два рази менше.
- Приберіть у ліній непотрібні рамки.