Позиціювання елементів веб-сторінки за допомогою стилів.

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

В основному використовується 2 напрямки вирівнювання: горизонтальне та вертикальне.

Щоб горизонтально розташувати текстові або інші елементи, для цього достатньо задіяти параметр text-align та встановити один із потрібних параметрів:

• center — вирівнювання по центру: <p style="text-align: center">Текст</p>
• left — вирівнювання по лівому краю: <p style="text-align: left">Текст</p>
• right — вирівнювання по правому краю: <p style="text-align: right">Текст</p>
• justify — вирівнювання по ширині: <p style="text-align: justify">Текст</p>

Поглянемо на приклади горизонтального вирівнювання.

Виконайте вправу і перегляньте результат.

Для вертикального вирівнювання використовується параметр vertical-align. В звичайному потоці тексту таке вирівнювання помітити важко, але якщо задіяти його в таблиці, тоді це досить гарно допомагає вирівняти елементи. Значення параметру:

• baseline — по базовій лінії: td { font-size: 12pt; color: red; vertical-align: baseline }
• middle — по центру: td { font-size: 12pt; color: red; vertical-align: middle }
• top — по верху: td { font-size: 12pt; color: red; vertical-align: top }
• bottom — по низу: td { font-size: 12pt; color: red; vertical-align: bottom }

Поглянемо на приклад реалізації та положення цифр при вертикальному верівнюванню.

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

Спробуємо створити таку псевдо кнопку.

Для початку опишемо в файлі index.html гіперпосилання та додамо вказівки на стилі котрі опишемо пізніше:

Підключимо стилі та опишемо кнопку:

Задамо стилі для class=butt, зформуємо для кнопки рамку, колір тексту тощо

Отримаємо наступний результат.

Практичне завдання