Чрез CSS свойствата може да се манипулира вида на текста в една HTML страница. Контролът на презентацията на текста чрез CSS се извършва със следните свойства и съответните им стойности.
1. font-family
Задава шрифт на текста. Възможните му стойности са названието на един или няколко шрифта, отделени със запетаи (например font-family: arial, helvetica, verdana, sans-serif;).
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 – текста тече от дясно на ляво
14. Пример
Направете CSS файл (например myfile.css) със следното съдържание:
h1
{
font-family: arial, helvetica, sans-serif;
font-size: 36px;
color: #ff0000;
text-align: center;
text-transform: capitalize;
text-decoration: overline;
letter-spacing: -3px;
word-spacing: 1cm;
}След това направете HTML страница, в която използвайте тага <h1> и напишете някакъв текст, за да видите декларираните ефекти, като не забравяте, че в head на HTML документа трябва да разположите връзката
<link rel=stylesheet type=“text/css“ href=“myfile.css“ />. Т.е. трябва да напишете нещо подобно на кода по-долу:
<html>
<head>
<title>CSS Example</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link rel=stylesheet type="text/css" href="myfile.css" />
</head>
<body>
<h1>Това е примерно заглавие</h1>
</body>
</html>Експериментирайте, като променяте различните стойности, за да видите какъв ефект предизвикват.
Вижте още:
