Урок I | Урок II | Урок III | Урок IV | Речник I | Речник II

Cascading style sheets

   Cascading style sheets е нов и удобен начин за форматиране на текста, шрифтовете, изображенията и всичко останало на вашата страница. Cascading style sheets ви позволяват да разположите различните елементи на страницата където си поискате, с точност до последния пиксел. Например, ако промените един стил, зададен в началото на HTML страницата, промените се отразяват върху целия документ.

Да кажем, че сте направили стил за заглавния таг (<H3>). Във вашия стил настройвате цвета на текста, на всичките <H3> да бъде червен. Написали сте около десет <H3> елемента, но изведнъж решавате, че цветът на заглавията трябва да е син. Е, вече не се налага да се връщате назад и да променяте цвета на текста за всеки <H3>, ами просто променяте стила, който сте създали в главата (<HEAD>) на вашия HTML документ. Сега заглавията ще бъдат в син цвят с много по-малко писане.

Още по-удобно е да използвате външен style sheet за няколко HTML страници едновременно. Може например, да направите заглавията във всичките ви страници да са сини. По този начин не се налага да променяте цвета за всяка страница по отделно, ами просто ще укажете всяка да използва вашия стил за заглавията.

Използване на атрибута STYLE

Един от начините да прибавите стил към страницата, е да го зададете вътре в някой HTML елемент. Това става като прибавите атрибута STYLE="" към HTML елемента. Обичайно това става по следния начин:

STYLE="свойство: стойност"

Ако не разбирате, за какво става дума вижте следния пример. Да кажем, че искате цветът на текста за елемента <P> да е червен:

<P style="color: red">Аз съм червен текст, благодарение на CSS.</P>

Ето какво ще получите:

Аз съм червен текст, благодарение на CSS.

Естествено може да зададете и повече от едно свойство в STYLE атрибута. Например:

<P style="color: red; font-weight: bold; font-family: Arial"> Удебелен шрифт Arial.</P>

Сега имаме удебелен, червен текст с шрифт Arial:

Удебелен шрифт Arial.

Може да добавяте колкото искате свойства в STYLE атрибута, стига да отделяте всяко с точка и запетая.

Сигурно ще си кажете - Как да сложа свойства като незнам нито едно?! Не се тревожете, по-нататък в уроците са разгледани всички свойства, а има и пълен справочник на свойствата и техните стойности.

Задаване на стил в главата (<HEAD>) на HTML документа.

   И така, изяснихме STYLE атрибута, но както забелязахте той едва ли прави нещо по-лесно, от добре познатите HTML елементи. Сега ще обясня другия начин за задаване на стил в страницата, който ще направи животът ви по-лесен (и сънят ви по-дълготраен), защото няма да се налага да пишете едно и също нещо по десетки пъти за да постигнете желания ефект.

Задаването на стил става чрез <STYLE></STYLE> елемента. Ето един пример на стил за елемента <SPAN>:


<HEAD>

<STYLE>
<!--

    
SPAN { color: red; font-weight: bold }

    
-->
</STYLE>

</HEAD>

Както виждате, непосредствено след <STYLE> тага, слагаме знак за HTML коментар. Той скрива съдържанието на стила от браузърите, които не го разпознават.

Сега вижте този ред:

SPAN { color: red; font-weight: bold }

Той казва на браузъра, че текста във всички <SPAN></SPAN> тагове на вашата станица ще червен и удебелен. Запомнете, че когато се декларира стил за някой HTML елемент, чрез <STYLE></STYLE>, не се изпозват знаците за по-малко и по-голямо - < >. Така <SPAN> става SPAN, <P> става P, <TABLE> става TABLE и тн. Освен това не изпозваме знакът за равенсво и кавички - ="", за да зададем свойствата. Вместо това ги заграждаме в скоби - { }. Свойствата в скобите са отделени с точка и запетая - ; , както при STYLE атрибута.

Сега, след като имате горния пример в главата на HTML страницата, просто използвате <SPAN></SPAN>, за да направите текста удебелен и с червен цвят:


<SPAN>Червен, bold-ван текст,</SPAN> следван от обикновен текст.
<BR>
<BR>
<SPAN>Отново bold и червен.</SPAN>

Червен, bold-ван текст, следван от обикновен текст.

Отново bold и червен.

Някои версии на Netscape може и да не разпознаят свойствата за <SPAN> тага, затова се снабдете с 4.7, или най-добре с Internet Explorer 5.

И така, сега може да използвате свойствата на стиловете за почти всеки HTML елемент. По интересно приложения обаче, стиловете намират когато се комбинират с атрибутите CLASS и ID.

Урок II - Деклариране на стилове, чрез класове

Far Plus