CSSінтервал - ми знаємо, що використання каскадних таблиць стилів дають нам дуже великі можливості для управління властивостями елементів web сторінок сайтів.
У даній статті ми розглянемо деякі способи управління елементами тексту за допомогою CSSінтервалов.
При додаванні тексту на html сторінку сайту ми використовуємо блокові теги, як правило, це DIV або P блоки.
Як правило, нас цілком влаштовують налаштування виводу текстового контенту на сторінки наших сайтів, за допомогою DIV і P блоків заданих в таблиці стилів за замовчуванням.
Але іноді, при додаванні тексту на сторінку сайту з'являється потреба цей текст трохи нестандартно змістити, змінити інтервал між словами, змінити інтервал між буквами або рядками, тобто, відформатувати текст нестандартним чином.
Ось в цьому випадку нам допоможе використання властивостей CSSінтервалов.
Для того, щоб розглянути роботу CSSінтервалов на практичних прикладах, давайте створимо файл, наприклад з ім'ям css-space.html і додамо в нього обов'язкові html теги:
Тепер ми готові на реальних прикладах подивитися, які види інтервалів можна задавати в тексті і як завдання CSSінтервалов можна використовувати для форматування тексту на сторінках сайту.
Отже, розглянемо перший стиль завдання інтервалу: letter-spacing, який визначає інтервал між символами блоку. Додамо на нашу експериментальну сторінку (між тегами body) наступний код:
Даним кодом ми вивели на сторінку браузера п'ять div блоків, причому стилем letter-spacing в блоках, ми задаємо інтервал між символами тексту, який доданий до блоку.
Інтервал між символами тексту, в кожному з блоків, різний і змінюється цей інтервал за допомогою параметра стилю letter-spacing.
Залежно від значення параметра, яке задано в пікселах, ми можемо задавати різний інтервал між символами тексту, розміщеного в div блоці, що добре видно на зображенні:
Зверніть увагу на дві нижніх рядки, як бачите, параметр стилю letter-spacing, може приймати негативні значення, в результаті символи можуть наїжджати один на одного.
Наступний тип інтервалів. який ми розглянемо, це інтервал між словами в блоці. Даний стиль так і називається: word-spacing. Як працює цей стиль, подивимося на прикладі наступного коду, який теж давайте додамо в наш експериментальний файл:
інтервал між словами 0px
інтервал між словами 10px
інтервал між словами 20px
Після додавання такого html коду, ми побачимо, що в різних блоках відстань між словами буде змінюватися відповідно до значення параметра стилю word-spacing, який задається в пікселях:
Ну а тепер розглянемо приклад використання більш поширеного стилю: line-height, який визначає на сторінці сайту інтервал між рядками.
Для цього, додамо на нашу експериментальну сторінку наступний код:
міжрядковий інтервал 1.5
міжрядковий інтервал 1.5
міжрядковий інтервал 1.5
міжрядковий інтервал 2.5
міжрядковий інтервал 2.5
міжрядковий інтервал 2.5
У нашому прикладі, в двох блоках ми використовуємо стиль line-height, з різними параметрами, в першому випадку параметр дорівнює 1.5, у другому 2.5.
У разі використання стилю line-height, міжрядковий інтервал може здаватися значеннями, вираженими коефіцієнтом, у точках, у відсотках, і ін.
Якщо ми відкриємо наш експериментальний файл браузером, то побачимо, що інтервал між рядками в першому і другому блоці відрізняються відповідно до значення коефіцієнта, заданого для стилю line-height:
Варто зазначити, що для всіх стилів, які ми розглянули в даній статті, одиниці вимірювання використовуваних параметрів, можуть бути будь-які, дозволені в CSS. Можна використовувати пікселі (px), пункти (pt) дюйми (in) відсотки (%) і так далі.
HTML файл, на прикладі якого ми дивилися, як працюють CSS інтервали, Ви можете завантажити за посиланням: Завантажити файл css-space.html
Інші новини по темі: