Як налаштувати лідерство в HTML

Власники малого бізнесу з друкованим фоном будуть добре знайомі з терміном "ведучий", який стосується інтервалу між рядками тексту. При створенні HTML-сторінки еквівалентом ведучого є властивість CSS «висота рядка», що використовується для встановлення кількості пробілу між кожним рядком. Висоту рядка можна встановити на фіксовану висоту, наприклад, 12 пікселів, або як відсоток від розміру шрифту, наприклад 120 відсотків. Встановлення значення “нормальне” скидає міжрядковий інтервал назад до значення за замовчуванням.

1

Відкрийте програму веб-дизайну або текстовий редактор і створіть нову сторінку HTML або відкрийте існуючу.

2

Додайте наступний код у тіло веб-сторінки:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum pulvinar pulvinar. Suspendisse eros nulla, sodales ut tincidunt sit amet, facilisis id dui. Donec pharetra euismod mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

3

Додайте таку таблицю стилів CSS до розділу сторінки:

Це правило CSS застосовується до div з ідентифікатором "exampleText", встановлюючи ширину до 400 пікселів та розмір шрифту до 14 пікселів, відображаючи абзац тексту через ряд рядків. Збережіть сторінку, а потім відкрийте у веб-браузері, щоб переглянути результат.

4

Додайте наступне нове правило CSS до таблиці стилів на сторінці:

висота лінії: 200%; 

}

Це правило змінить міжрядковий інтервал абзацу на 200% від розміру шрифту, у цьому випадку на 28 пікселів. Якщо розмір шрифту змінюється, міжрядковий інтервал автоматично змінюється пропорційно. Збережіть сторінку та перезавантажте у веб-браузері, щоб побачити ефект властивості інтервалу між рядками.

5

Змініть параметр висоти рядка на 20 пікселів, як показано нижче:

висота рядка: 20 пікселів; 

}

Це встановлює постійний інтервал 20 пікселів між рядками тексту, незалежно від розміру шрифту тексту. Збережіть сторінку та оновіть у своєму браузері, щоб побачити новий інтервал між рядками.


$config[zx-auto] not found$config[zx-overlay] not found