C, PHP, VB, .NET

Дневникът на Филип Петров


* Декориране на текст и полета

Публикувано на 22 август 2009 в раздел ХHTML.

В миналата статия отбелязахме как чрез "стилове" (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 пиксела!

 



4 коментара


  1. Първото нещо, кото ми прави впечатление е, че смесваш HTML със CSS.Във всичките примери си сложил стиловете в таговете, което не е добра практика, за предпочитане е те да бъдат изведени във външен файл и зареждани чрез link елемен в заглавната част на документа:

    <link rel="stylesheet" href="style.css" type="text/css" media="all" /%gt;

    По този начин може да се укаже и в кои случай да се използва съответния набор от шрифтове - атрибутът media може да приема стойностите all, screen, print, handheld и в новата спецификация CSS3 така наречените media queries, които позволяват указване на други параметри като брой цветове, разделителна способност и т.н.

    Втората ми забележка е по отношение на мерните единици. Всички размери в CSS мога да бъдат указвани освен в пиксели, и доста други единци: pt, em, проценти, en... От съществено значение е използването на относителни единици при форматирането на текст, защото така се запазват пропорциите при промяна на големината на текста. Ако укажем разстоянието между буквите или височината на реда в пиксели и след това променим големината на текста, или потребителят го направи в браузъра си, резултата ще е нечетим текст.

    По отношение на вътрешните отстояния (padding) - много важно е да се знае как те се отразяват на ширината на елемента. Според CSS стандарта padding се добавя към ширината на елемента, и също така ширината на контура се добавя към ширината на елемента. Така ако зададем 10px padding и 5px контур на блок със зададена ширина 100px, крайния размер на елемента ще бъде 100+2*10+2*5=130px.

  2. Опа, грешка, написал съм % вместо & в примера, трябва да е така:

    <link rel=“stylesheet“ href=“style.css“ type=“text/css“ media=“all“ />

  3. Благодаря за забележките. Нарочно смесвам CSS с HTML, защото желая да се получи плавен преход в статиите. Не "сега научихме HTML, продължаваме с CSS", а да се добие чувство за свързаност между двеге. Разделът съм го кръстил XHTML/JS, но практически в него неизменно ще се говори и за CSS.

    Благодаря за това, което каза за padding. Въобще не съм му обърнал внимание.

    Извеждането на стиловете в отделен файл ще бъде показано по-късно в отделна статия.

  4. Допълнение към коментара на Гонзо:

    Padding, margin, border и height/width съставят така наречения "box model" в CSS, който се състои в това, че за да се получи реалната ширина/височина на даден блок, които той заема на страницата се събират по формулката, която е представена в горния коментар, но към сметката се добавя и margin, в случай че е има такъв, на същия принцип. Т.е. при "margin: 5px; padding: 10px; border-width: 5px; width: 100px; height: 150px;"
    - широчината ще е 140px
    - височината ще е 190px

    Това е. Поздрави за блога, чета го редовно! :)

Добави коментар

Адресът на електронната поща няма да се публикува


*