Контрола на текста в CSS се извършва чрез следните атрибути и съответните им стойности:
1. font-family - Задава шрифт на текста. Възможните му стойности са названието на един или няколко шрифта, отделени със запетаи (например font-family: arial, sans-serif, helvetica, verdana).
2. font-size - Задава големина на текста. Възможните му стойности са цифрови - в пиксели (px) или пойнтове (pt) (например font-size: 14px).
3. font-weight - Задава удебеляване или "изтъняване" на текста. Може да приема следните стойности:
normal - показва нормален текст
bold - удебелява текста
bolder - удебелява текста повече от bold
lighter - изтънява текста
100 - изтънява текста (същия ефект като lighter)
200
300
400 - прави текста какъвто е подразбиране (същия ефект като normal)
500
600
700 - удебелява текста (същия ефект като bold)
800
900 - удебелява максимално текста (същия ефект като bolder)
4. text-align - Задава позиционирането на текста в страницата. Възможните му стойности са:
left - подравнява текста вляво (същата е стойността по подразбиране)
right - подравнява текста вдясно
center - центрира текста
justify - подравнява текста едновременно вляво и вдясно
5. color - Задава цвят на текста. Възможните му стойности са цветове, описани чрез 16-тичната бройна система, чрез английските им названия или чрез задаване на RGB стойност. Например бял цвят ще се зададе
- чрез название: color: white
- чрез 16-тична стойност: color: #ffffff
- чрез RGB стойност: color: rgb(255,255,255)
6. background-color - Задава цвят за фон на текста. Възможните му стойности са цветове, описани чрез 16-тичната бройна система, чрез английските им названия или чрез RGB стойност, подобно на атрибута color.
7. text-decoration - Задава допълнителен ефект (украса) на текста. Възможните му стойности са:
underline - подчертава текста с долна черта
overline - подчертава текста с горна черта
line-through - зачертава текста
blink - кара текста да премигва
none - показва нормален текст, като премахва всички ефекти от текста (например премахва подчертаването на връзките)
8. letter-spacing - Задава разстояние между буквите на текста. Възможните му стойности са normal или зададено с цифри разстояние между буквите. Цифровите стойности могат да бъдат указани в пиксели (например letter-spacing: 5px) или сантиметри (например letter-spacing: 0.3cm). Тези стойности могат да бъдат и с отрицателен знак - в този случай буквите от текста се сбиват, тъй като разстоянието между тях се намалява (например letter-spacing: -2px).
9. word-spacing - Задава разстояние между думите в текста. Възможните му стойности са normal или зададено с цифри разстояние между думите. Цифровите стойности могат да бъдат указани в пиксели или сантиметри и да приемат отрицателен знак, подобно на стойностите на атрибута letter-spacing.
10. white-space - Задава дали текста да бъде показан точно както е написан в текстовия редактор, т.е. дали да се покажат всички "спейсове" и "ентери" - разстоянията между буквите, думите и редовете, както са написани например в Notepad или браузъра да игнорира оставените бели пространства в текста и да го покаже компактен. Възможните му стойности са:
normal - показва текста като игнорира оставените бели пространства
pre - показва текста точно както е написан в текстовия редактор, какъвто е ефекта от HTML тага <pre> </pre>
nowrap - не позволява текста да се пренесе на по-долен ред докато не се постави тага за прекъсване <br />. Ако текста е достатъчно дълъг в долната част на браузъра ще се появи лента за скролиране.
11. text-indent - Използва се при започване на нов абзац в текста. Оставя разстояние между лявата страна на страницата и началото на текста от първия ред на абзаца. Възможните му стойности са цифрови - в пиксели (px), сантиметри(cm) или проценти (%).
12. text-transform - Задава на текста главни или малки букви. Възможните му стойности са:
uppercase - задава на целия текст главни букви
lowercase - задава на целия текст малки букви
capitalize - задава като главна началната буква на всяка дума от текста
none - показва текста във вид по подразбиране
13. direction - Задава посоката, в която тече текста. Възможните му стойности са:
ltr - текста тече от ляво на дясно
rtl - текста тече от дясно на ляво
ПРИМЕР
Направете CSS файл (например myfile.css) със следното съдържание:
Направете CSS файл (например myfile.css) със следното съдържание:
След това направете HTML страница, в която използвайте тага <h1> и напишете някакъв текст, за да видите декларираните ефекти, като не забравяте, че в head на HTML документа трябва да разположите връзката
<link rel=stylesheet type="text/css" href="myfile.css" />. Т.е. трябва да напишете нещо подобно на кода по-долу:
