Урок 6. Оформлення тексту

Здрастуй, шановний читачу.

Це шостий урок вивчення CSS. У минулому уроці ми вже почали розглядати властивості пов`язані з текстом, а в цьому уроці ви дізнаєтеся ще деякі властивості тексту в CSS.

Перед вивченням CSS пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти

Теорія та практика

Продовжимо розглядати властивості CSS, для того щоб надати привабливого вигляду нашого тексту.

text-decoration

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

text-decoration: line-through | blink | overline | underline

line-through - перекреслений текст (такий як створює тег в html);

blink - миготливий текст;

overline - риса над текстом;

underline - підкреслений текст (такий як створюють теги і в html).

Також є значення для даної властивості такі як:

text-decoration: none | inherit

none - означає що ніяких підкреслень застосовуватиметься;

inherit - успадкування від батька.

Розглянемо CSS код:

123

p {text-decoration: underline overline-}

Як це виглядає в браузері:

Відео: Урок 6. Базові можливості по оформленню тексту

text-align

Наступне властивість це горизонтальне вирівнювання тексту. Він відповідає за те, як текст / зображення розташовані горизонтально. Дана властивість має наступні значення:

Відео: LibreOffice Writer. Урок 6: Стилі абзаців. зміст документа

text-align: left | center | right | inherit

left - вирівнювання вмісту вліво;

Відео: Explaindio Video Creator 2a. Урок 6. Як красиво написати текст

center - вирівнювання вмісту по центру;

right - вирівнювання вмісту вправо;

inherit - успадкування значення від батька.

text-indent

Це властивість відповідає за новий рядок, тобто відступи на початку рядка. Значення може здаватися в пікселях (px), пунктах (pt) і т.д .:

text-align: ?? px

Розглянемо CSS код:

123

p {text-indent:20px-}

Як це виглядає в браузері:

text-transform

Буває необхідність відредагувати текст у нижній регістр або в заголовні, але немає часу весь текст переписувати з натиснутим CAPS LOCK, тоді вам допоможе ця властивість. Дана властивість має наступні значення:

Відео: LibreOffice Writer. Урок 5: Виділення тексту

text-transform: lowercase | uppercase | capitalize | none | inherit

lowercase - всі букви і символи будуть в нижньому регістрі;

uppercase - всі букви і символи будуть у верхньому регістрі;

capitalize - кожне слово буде з великої літери;

none - не змінює регістр символів;

inherit - успадкування значення від батька.

Приклад в браузері кожної зі значень даної властивості:

line-height

І остання властивість CSS яке ми сьогодні розглянемо, це властивість висоти рядка. Але що ж таке висота рядка? Я наочно представив на зображенні нижче:

Дана властивість може приймати значення в процентах (%), пікселях (px) і т.д. Ось приклад в браузері:

Отже, сьогодні ми розглянули 5 властивостей. Деякі з них дуже часто застосовуються при створенні сайту. Це такі властивості як text-decoration, text-align, line-height. А деякі рідше - text-indent, text-transform. Обов`язково спробуйте руками прописати дані властивості. Вони відкладуться у вас в пам`яті і потім ви автоматично будете вписувати необхідні властивості, коли вони вам будуть потрібні. Але для цього потрібна практика. Тому не лінуйтеся!

Більше практикуйтеся!