CSS Част 7 (Текст)
nma трудност:

видян:
16139
Контрола на текста в
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) със следното съдържание:
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=windows-1251" />
<link rel=stylesheet type="text/css" href="myfile.css" />
</head>
<body>
<h1>това е
примерно
заглавие</h1>
</body>
</html>
Експериментирайте,
като променяте различните стойности, за да видите какъв ефект предизвикват.
Коментари (4)