Перетворення шрифту
Перетворення шрифту має на увазі капіталізацію слів, заміну всіх "великих" і "маленьких" літер у великі, або, навпаки, одержання одних рядкових літер.
Розглянемо кілька прикладів:
<P STYLE="text-transform:uppercase;">Зробити великими</P>
<P STYLE="text-transform:lowercase;">Зробити рядковими</P>
<P STYLE="text-transform:capitalize;">
Зробити великими перші букви в словах</P>
Зверніть увагу, що виконання перетворень залежить від алгоритму перетворення символів. У нелокалізованих програмах перехід від малих літер до великих здійснюється шляхом простого зсуву по таблиці ASCII, що для російського алфавіту не прийнятно.
Ще один вид перетворення шрифту — це підкреслення, перекреслення або надкреслення слів. Виконується таке перетворення за допомогою атрибуту text-decoration:
<P STYLE="text-decoration:line-through;">Перекреслимо це речення</P>
<P STYLE="text-decoration:underline;">Підкреслимо це речення</P>
Для того, щоб перетворення працювало, необхідно відповідне накреслення (підкреслені або перекреслені накреслення букв). Дуже складно знайти гарнітури, у яких було б накреслення з надкресленими буквами. Скасування декору відбувається, якщо використовувати в text-decoration значення none.
Перший рядок параграфа
При оформленні параграфів у технології CSS автор може скористатися абзацним відступом, таку можливість надає йому атрибут text-indent.
Мова йде про горизонтальний відступ у першому рядку параграфа щодо його лівого краю:
<P STYLE="text-indent:20pt;">Цей параграф ми почнемо з рядка
з горизонтальним відступом у двадцять типографських пунктів від
лівого краю параграфа.</P>
<P STYLE="text-indent:-10pt;">А в цьому параграфі ми застосуємо від’ємний
горизонтальний відступ у першому рядку параграфа</P>
Крім text-indent у CSS для оформлення першого рядка параграфа зарезервований модифікатор стилю first-line. Він дозволяє не лише задати горизонтальний зсув, але і визначити інші параметри параграфа:
P:first-line { color:red; }
Ще один параметр, що впливає на відображення першого рядка параграфа — перша буква першого рядка. Її відображенням керує модифікатор first-letter:
P:first-letter { font-size:20pt; }
На жаль, обидва названих модифікатора реалізовані не у всіх версіях браузерів, тому для вірності застосовують елементи розмітки FONT і TABLE.
Міжстрічкова відстань
У CSS міжстрічкова відстань визначається параметром line-height. Він задає відстань не між рядками, а між базовими лініями рядків. Простіше кажучи, якщо, наприклад, взяти букву "н" і надрукувати її послідовно одну під одною, то line-height буде дорівнює відстані між двома однаковими точками букв.
Подивимося, як цей параметр впливає на взаємне розташування рядків:
<P STYLE="line-height:12pt;font-size:12pt;color:black;">
Цей параграф ми набрали кеглем 12 pt.Line-height заданий у 12 pt.</p>
<P STYLE="line-height:24pt;font-size:12pt;color:black;">
Цей параграф ми набрали кеглем 12 pt.Line-height заданий у 24 pt.</P>
<P STYLE="line-height:6pt;font-size:12pt;color:black;">
Цей параграф ми набрали кеглем 12 pt.Line-height заданий у 6 pt.</P>
Перший приклад набраний зі значенням line-height, рівним розмірові кегля. В другому прикладі значення line-height удвічі перевищує розмір кегля. У третьому прикладі значення line-height у два рази менше розміру кегля — рядка стали "наповзати" один на одного.
5.4. Списки у CSS |
<вверх> |
При відображенні списків CSS дозволяє керувати формою і зображенням "кульок" (bullets) списку. "Кулька" (bullet) — це символ, що розміщенний перед елементом списку. Наприклад, у невпорядкованому списку (unordered list) перед елементом списку ставиться "жирна" крапка:
CSS дозволяє керувати формою "кульок" і заміняти "кульки" картинками.
Цікаво, що керування відображенням елементів списку віднесено до набору властивостей, у які входить атрибут display. У цього атрибута може бути лише одне значення — none. Якщо елемент у своєму описі має атрибут display, і цей атрибут дорівнює none, то він не відображається браузером взагалі:
<UL STYLE="display:none;">
<LI>Перший елемент списку
<LI>Другий елемент списку
<LI>Третій елемент списку
</UL>
Якщо подивитися HTML-код даного документа, то за прикладом опису списку випливає код, що браузер не відобразив.
Атрибут display керує відображенням документа на дисплеї комп'ютера, але не поширюється на інші середовища відображення документа. Наприклад, при друці схований список повинен бути відображений. Однак, насправді він не відображається і при друці.