CSS - текст

Освен шрифта, със CSS команди може да се регулират и много други свойства на текста.

Междуредово разстояние

Разстоянието между редовете можете да регулирате косвено - като зададете височина на реда (line-height) и размер на текста (font-size). Разликата между двете стойности ще бъде междуредовото разстояние. Ето и един пример:

h1 {font-size: 1.8em}

p {line-height: 1.5}

Това ще увеличи размера на реда с 50% и понеже размера на текста не е променен, увеличено ще бъде междуредовото разстояние. Като стойност на line-height може да се използват числа, относителни мерни единици (като em) и проценти.

Разстояние между букви и разстояние между думи

Разстояние между букви се задава с letter-spacing, а разстояние между думи - с word-spacing:

h1 {letter-spacing: 10px;}

h2 {word-spacing: 2ex;}

В горния пример е зададено разстояние между буквите на заглавията h1 10 пиксела, а разстояние между думите за заглавията h2 - 2ex.

Допълнителни ефекти за текст

Текстът може да бъде модифициран с text-decoration и една от следните стойности:

• underline: обикновено подчертаване на текст;
• overline: чертата минава над текста;
• line-through: чертата минава през средата на текста;
• none: премахва подчертаване на текст, ако такова е било указано;
• blink: мигащ текст (поддържа се само от Firefox и Opera).

Отстъп за първия ред на параграф

Използва се text-indent и желана стойност. Например

p {text-indent: 1em}

ще зададе отстъп една буква за първия ред на всеки параграф.

Хоризонтално подравняване

Позицията на текста може да се регулира с text-align и една от стойностите:

• left: ляво подравняване - стойността по подразбиране
• right: дясно подравняване
• center: центриране
• justify: двустранно подравняване

Вертикално подравняване

Това свойство се използва най-вече за определяне взаимното разположение на текст и графика. Използва се vertical-align и една от следните стойности:

• sub: подобно на HTML елемента sub, буквите се изписват като долен индекс.
• sup: обратно на sub, текстът се изписва като горен индекс
• baseline: долният край на изображението се разполага на нивото на основата на реда.
• middle: средата на изображението съвпада със средата на текстовия ред
• text-top: горният край на елемента съвпада с горния край на реда
• text-bottom: долният край на елемента се разполага на едно ниво с долния край на реда.
• top: горният край на елемента съвпада с горния край на реда, който променя размера си, така че да включва в себе си елемента.
• bottom: подобно на top, но подравняването е по долния край на реда.

Цвят на текст

С използване на color можете да зададете желан от Вас цвят на текст. За задаване на конкретен цвят на текст може да се използват валидни имена на цветове, RGB или HEX стойности:

p {color: #EE00BB}

По-подробно за цветовете можете да прочетете в статията HTML цветове.

Трансформация в малки или големи букви

Можете да укажете използване на малки или големи букви с text-transform и една от следните думи:

• capitalize: първата буква от всяка дума ще бъде превърната в главна. Често използван стил в заглавия.
• uppercase: всички букви стават главни.
• lowercase: всички букви се превръщат в малки.
• none: не променя вида на буквите малки-големи

Регулиране на празното пространство

Използвайки white-space можете да промените начина, по който браузъра показва празни полета:

• normal: както обикновено, браузърът свива поредица от празни интервали и редове до един интервал/ред.
• pre: съхранява празните интервали и редове
• nowrap: поредица празни интервали ще бъде съкратена до един интервал, а текста ще продължава на един единствен ред, докато не бъде достигнат символ за нов ред или за прекъсване на реда