2.2. Текст

Властивості тексту впливають на візуальне представлення символів, пропусків, слів і абзаців.

Відступи: властивість 'text-indent'. ^\

Дана властивість визначає відступ першого рядка тесту в блоці. Блок змішується відносно лівого (або правого при розташуванні тексту справа наліво) краю лінійного блоку.

Значення: length: відступ є фіксованою величиною.

percentage: відступ задається у відсотках відносно ширини блоку.

Значення властивості "text-indent" може бути від'ємним, але в конкретних версіях можуть бути встановлені обмеження на використання значень.

В наступному прикладі задається відступ тексту, що дорівнює

'ІОет'.

Р { text-indent: ІОет }

Езарівяювання: властив1сть4ех^а%п\

Цд властивість визначає спосіб вирівнювання послідовного вмісту блоку. Значення:

left: вирівнювання тексту по лівому краю; right: вирівнювання тексту по правому краю; center: вирівнювання тексту по центру; justify: вирівнювання тексту по обох краях.

Блок тексту - це сукупність лінійних блокж При значеннях 'left', 'right' і 'center' ця властивість вказує спосіб вирівнювання послідовних блЙків у кожному лінійному блоці відносно лівої та правої сторони лінійного блоку. При значенні4*justify', крім налагодження положення лінійних блоків, агент користувача може також збільшити послідовні блоки. DIV.center { text-align: center }

В цьому прикладі значення "text-align* успадковується, тому в усіх елементах рівня блоку, що знаходяться в елементі DIV і мають значення "class=center", послідовний вміст буде вирівняно по центру. DIV.center { text-align: Center }

Елементи декорування: підкреслення, надрядкове підкреслення,

підкреслення і мерехкотіння. • j і -:

Властивість 'text-decoration'. *;- -З

Даною властивістю описуються елементи декорування тексту елементів. Якщо властивість задана для елемента рівня блоку, вона впливає на всі наступні'елементи послідовного рівня. Якщо властивість задана для елемента послідовного рівня (або впливає на нього), вона впливає і на всі блоки, що генеруються цим елементом. Якщо в елемента немає вмісту або тексту (наприклад, елемент IMG у HTML), агенти користувачів ігнорують цю властивість.

Значення:

• попе: текст не декорується; '

• underline: усі рядки тексту підкреслюються;

• overline: над кожним рядком тексту розташовується риска;

• line-ithrough: усі рядки тексту перекреслені;

• blink: текст мерехтить.

Потрібний колір(а) для елемента декорування тексту визначається ІИвченням властивості 'color'.

У наступному прикладі для HTML текстовий уміст всіх елементів А,

ЩО діють як гіперпосилання, буде підкреслено:

АІ href] { text-decoration: underline } j'Jsи

Тінь тексту: властивість 'text-shadow'.

Цією властивістю описуються тіні тексту.

Значення: попе: текст немає елементів тіні; 'color': колір затінення;

'length': зсув затінення. Вказує горизонтальну відстань до правої частини тексту. При від'ємному значенні довжини затінення міститься ліворуч лід тексту; 'length': визначає вертикальну відстань знизу від тексту. При від'ємному

значенні вертикальної відстані затінення розташовується над текстом; 'Inherit': радіус розмиття.

Зсув затінення вказується за допомогою двох значень 'length'.

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

Для кожного ефекту затінення зазначається зсув затінення, а також може вказуватися радіус розмиття і колір затінення.

В представленому нижче прикладі тінь1, буде розташовуватися Праворуч і нижче тексту елемента. Так як колір не зазначений, затінення буде мати той же колір, що й елемент, а оскільки не зазначений радіус розмиття, затінення не буде розмите: НІ { text-shadow: 0.2em 0.2em }

В наступному прикладі тінь розташовується праворуч і нижче тексту елемента. Тінь буде червоного кольору з радіусом розмиття 5рх. Н2 { text-shadow: Зрх Зрх 5рх red }

В наступному прикладі представлений список ефектів затінення. Перша тінь розташовується праворуч і нижче тексту елемента, вона буде червоного кольору без розмиття. Друга тінь перекриє першу; вона буде жовтого кольору, розмита і буде знаходитися ліворуч і нижче тексту. Третя тінь буде знаходитися праворуч і над текстом. Так як колір цієї тіні не зазначений, буде використовуватися значення вл&ййвості елемента 'color"

Н2 { text-shadow: Зрх Зрх red, yellow -Зрх Зрх 2рх, Зрх -Зрх }

Відстань між буквами і словами: властивість 'Istfter-spacing' і 'word-spacing'.

'letter-spacing' - це значення дозволяє задати додатково міжсимвольну відстань, що додається до стандартної. Значення можуть бути від'ємними, їх застосування залежить від реалізації. На відстань між символами також може вплинути вирівнювання з обох країв. В даному прикладі відстань між символами в елементах BLOCKQUOTE збільшена на'О.Іет'. BLOCKQUOTE { letter-spacing: O.lem }

'word-spacing' - ця властивість визначає відстань між словами.

В даному прикладі відстань між усіма словами в елементі НІ збільшується на Tern1. НІ { word-spacing: lem }

Виділення великими буквами: властивість 'text-transform'. Ця властивість керує великими буквами в тексті елемента. Значення: capitalize: кожне слово починається з великої букви; nppercase: усі букви кожного слова будуть великими; lowercase: усі букви кожного слова будуть рядковими; попе: не впливає на букви.

В даному прикладі весь текст в елементі НІ буде виділений великими буквами. НІ { text-transform:' uppercase }