C, PHP, VB, .NET

В миналата статия отбелязахме как чрез „стилове“ (styles) можем да центрираме текст, да го слагаме в ляво, дясно или да го разпъваме до рамката на прозореца. Сега ще разгледаме още няколко стила:

1. Разстояние между буквите – това е стил „letter-spacing“. Като параметър приема брой пиксели. Служи за раздалечаване на буквите една от друга.

Пример:

<p style="letter-spacing:25px">
Разстоянието между буквите е увеличено
</p>

Резултат:

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

2. Линии – стил text-decoration приема следните параметри
– none – стандартен текст
– underline – подчертан текст
– overline – линия отгоре над текста
– line-through – текстът е задраскан (еквивалентно на таг <del>)
– blink – мигащ текст

Пример:

<div style="text-decoration:blink">Този текст премигва,</div>
<div style="text-decoration:underline">този е подчертан,</div>
<div style="text-decoration:none">този е стандартен,</div>
<div style="text-decoration:overline">а този е с черта отгоре</div>

Резултат:

3. Главни и малки букви – стил text-transform променя текст в изцяло малки букви (стойност lowercase) или изцяло главни (uppercase).

Пример:

<p style="text-transform:lowercase">ВСИЧКИ БуКвИ щЕ СтАНАТ малки</p>
<p style="text-transform:uppercase">всички букви щЕ СтАНАТ големи</p>

Резултат:

ВСИЧКИ БуКвИ щЕ СтАНАТ малки

всички букви щЕ СтАНАТ големи

4. Разстояние между линиите – за задаване на брой пиксели между линиите в текст на параграф се използва line-height.

Пример:

<p style="line-height:25px">
В този параграф<br />
разстоянието между всеки ред<br />
е 25 пиксела
</p>

Резултат:

В този параграф
разстоянието между всеки ред
е 25 пиксела

5. Абзац – когато се налага в даден параграф текста да започва по-навътре, то вместо да използвате &nbsp; можете да използвате text-indent.

Пример:

<p style="text-indent:40px">
В този параграф<br />
първият ред започва<br />
по-навътре с 40 пиксела
</p>

Резултат:

В този параграф
първият ред започва
по-навътре с 40 пиксела

6. Цвят – когато искаме да оцветим текст в даден цвят, то използваме стил color.

Пример:

<p>Ето пример на текст
	<span style="color:blue">
		оцветен в синьо
	</span>
</p>

Резултат:

Ето пример на текст оцветен в синьо

7. Ограничени полета – Когато желаете да ограничите текст в дадено поле хоризонтално на екрана, то използвате width. Този стил приема за стойности пиксели или проценти.

Пример:

<p style="width:100px">Този текст ще бъде ограничен по хоризонтала в 100 пиксела</p>
<p style="width:75%">
	А този в 75% от дължината на страницата, в която се 
	отваря. Ако прескочи повече, то ще премине на нов ред!
</p>

Резултат:

Този текст ще бъде ограничен по хоризонтала в 100 пиксела

А този в 75% от дължината на страницата, в която се отваря. Ако прескочи повече, то ще премине на нов ред!

8. Рамки – ако желаете да оградите параграф в рамка, то се използва стил border-style. Стойностите, които приема са none, solid и double.

Пример:

<p style="width:200px; border-style:double">
	Този текст ще бъде ограничен по хоризонтала в 200 
	пиксела и ще има рамка от две непрекъснати линии
</p>

Резултат:

Този текст ще бъде ограничен по хоризонтала в 200 пиксела и ще има рамка от две непрекъснати линии

От този пример всъщност се забелязва и друго много важно нещо. Възможно е стиловете да се комбинират, като за разделител се използва точка и запетая!

Позволява се и избиране на дебелина на рамката (в пиксели) чрез стил border-width. Ето един пример:

<p style="width:200px; border-style:solid; border-width:1px">
	Този текст ще бъде ограничен по хоризонтала в 200 
	пиксела и ще има рамка от една непрекъсната линия
</p>
<p style="width:200px; border-style:solid; border-width:5px">
	Този текст ще бъде ограничен по хоризонтала в 200 
	пиксела и ще има рамка от една непрекъсната линия
</p>

Резултат:

Този текст ще бъде ограничен по хоризонтала в 200 пиксела и ще има рамка от една непрекъсната линия

Този текст ще бъде ограничен по хоризонтала в 200 пиксела и ще има рамка от една непрекъсната линия

Накрая всяка рамка може да применя и цвета си чрез border-color. Изпробвайте го в следния пример:

<p style="width:200px; border-style:solid; border-width:1px; border-color:red">
	Този текст ще бъде ограничен по хоризонтала в 200 
	пиксела и ще има рамка от една непрекъсната линия.
	Дебелината на рамката ще е 1 пиксел и ще е червена!
</p>

9. Отстояние на цяло поле – когато искате да поставите не само отстояние на бървия ред за абзац, но и да преместите изцяло текста от края на екрана, то се използва „margin“. Има четири стила:
– magin-left – указва отстояние в проценти или пиксели от левият ръб на полето/екрана;
– margin-right – отстояние от десния ръб;
– margin-bottom – отстояние от долния ръб;
– margin-top – отстояние от горния ръб.

Пример:

<p style="margin-left:50px">
	Този текст ще бъде на отстояние от 50 пиксела
	от левия ръб на екрана или полето в което е дефиниран
</p>

Резултат:

Този текст ще бъде на отстояние от 50 пиксела от левия ръб на екрана или полето в което е дефиниран

Обикновено се използват margin-left и margin-top. Другите два стила се използват рядко.

10. Отстояние вътре в поле – когато дефинираме поле и желаем да направим отстояние на текста от ръбовете му, то използваме padding-left, padding-right, padding-top и padding-bottom. Отново стойностите са пиксели или проценти.

Пример:

<p style="width:200px; border-style:solid; border-width:1px;
		  padding-left:10px;padding-right:10px;
		  padding-top:10px;padding-bottom:10px">
	Този текст ще бъде ограничен по хоризонтала в 200
	пиксела и ще има рамка от една непрекъсната линия!
	Отстоянието му от всички ръбове е точно 10 пиксела!
</p>

Резултат:

Този текст ще бъде ограничен по хоризонтала в 200 пиксела и ще има рамка от една непрекъсната линия! Отстоянието му от всички ръбове е точно 10 пиксела!