Ако предлагате частни уроци, може да рекламирате услугите си напълно безплатно!
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.
Деклариране на стилове, чрез класове
Както вече видяхте в предишния урок, стиловете могат да се прилагат за почти всеки HTML елемент. Да кажем обаче, че искате да направите половината текст на страницата червен, а другата половина - син. Ето един пример, какво можем да направим с наученото дотук:
<HEAD>
<STYLE><!--
DIV { color: red }P { color: blue }
--></STYLE>
</HEAD> <DIV>Червен текст.</DIV> <BR><BR><P>Син текст.</P> Червен текст.
Син текст.
И така, постигнахме желания ефект. Но ако искате, например, на страницата да има и зелен, и оранжев цвят? Ще трябва да зададете стил за четири HTML елемента, което едва ли е много удобно. По-простия начин е да използвате класове. Вижте долния пример:
<HEAD>
<STYLE><!--
.red { color: red }.blue { color: blue }
--></STYLE>
</HEAD> <P class="red">Червен текст.</P> <BR><BR><P class="blue">Син текст.</P> Какво
направихме? Създадохме два класа - "red" и "blue" - и им зададохме стил. След
това указахме, елементът <P>
веднъж да ползва стила "red" и после да ползва стила "blue". Това е изключително
удобно, защото може да използвате няколко различни класове с един и същи HTML
елемент.
Класовете се задават в <STYLE></STYLE>
елемента, в началото на страницата и се "извикват" като се прибави атрибута
CLASS
към съответния HTML елемент. Например:
<P class="red">Червен текст.</P> <P class="blue">Син текст.</P><P class="green">Син текст.</P><DIV class="black">Син текст.</DIV><SPAN class="black">Син текст.</SPAN> Обърнете внимание на следния ред:
.red { color: red }Класовете се задават с точка - . -
последвана от името на класа. Например: .red,
.blue,
.blabla
и тн.
Деклариране на стилове, чрез атрибута ID
И
тук, стиловете се дефинират по същия начин само че, вместо точката пред името на
стила, се изпозва знакът #.
Например:
<HEAD>
<STYLE><!--
#red { color: red }#blue { color: blue }
--></STYLE>
</HEAD> "Извикването" става, чрез атрибута ID:
<DIV id="red">Червен текст.</DIV> <DIV id="blue">Син текст.</DIV> Червен текст.
Син текст.
Ако искате вашите новосъздадени класове да се използват от много страници, може да изпозвате т.нар. външен Style Sheet.
Изпозване на външни Style Sheets
Всичко, което разгледахме в предишните уроци се отнасяше за страницата, която правим в момента. Класовете спестяват много писане и усилия в текущия HTML документ. Да предположим обаче, че искате определена група от стилове да се използва от много HTML страници едновременно. Това става чрез external(външни) style sheets.
За да направите external style sheet, отворете някой текстов редактор (например Notepad) и напишете примерно следното:
DIV { font-family: Arial }P { color: blue } След това запазете файла (save as...) като "style.css" (слагаме името на файла в кавички, за да се запази с разширение *.css; иначе ще се запази като style.css.txt). Може да изпозвате всякави имена - style.css, bla.css, fish.css и тн. - но разширението трябва да е *.css.
Вашият external style sheet е готов. Сега, за да укажете на дадена
страница да го изпозва просто трябва да сложите елемента <LINK>
в главата (<HEAD>)
на HTML документа. Най-общо това става по следния начин:
<LINK rel="stylesheet" type="text/css" name="име" href="адрес">Атрибутът rel="stylesheet"
казва на страницата какъв документ да търси (в нашия случай stylesheet).
type="text/css"
указва какъв е типът на съдържанието във файла, който ще се изпозва. name=""
задава име (може да е всякакво) и href=""
указава къде се намира файла (интернет адрес). За нашия пример, <LINK>
елемента ще изглежда по следния начин:
<LINK rel="stylesheet" type="text/css" name="Pesho Dulgiq" href="style.css">Адресът е само името на файла, ако сте го запазили в същата директория, където са и вашите страници. И така, за да ползвате вашият стил в други HTML документи, просто ги отворете и сложете горния ред в главата им.
Ако искате да промените текста на няколко страници, просто редактирайте файла style.css и запазете промените.
Форматиране на текст с CSS
Тук ще обясня накратко как да форматирате текста на страницата ви, изпозвайки CSS (Cascading style sheets). Както споменах в Урок I CSS се състои от много свойства и съответните им стойности. Сега ще обърна внимание на свойствата отнасящи се до текста, а за списък на всичките свойства и стойности погледнете в Речника.
Първото свойство, което ще разгледаме е color:
Свойство: COLOR
Стойности:
име на цвета;
цвят по схемата
#RRGGBB;
цвят в RGB;
Свойството color
определя цветът на текста за даден елемент. Например:
<P style="color: red">Червен цвят на текста</P><P style="color: #00FFFF">Светлосин цвят на текста</P><P style="color: rgb(0,0,0)">Черен цвят на текста</P> Червен цвят на текста
Светлосин цвят на текста
Черен цвят на текста
Има
три начина за задаване. Първият е задаване с името на цвета. Напр. red,
blue,
gold,
silver
и тн. Другият начин е задаване на цвета по схемата #RRGGBB. Например #FFFFFF (бяло), #000000 (черно), #FFFF00
(червено) и тн. Третият начин е задаване според дяла на червеното, зеленото и
синьото. Например rgb(255,255,255) - бяло; rgb(0,0,0) - черно; rgb(255,0,0) -
червено.
Свойство: FONT-FAMILY
Стойности:
име на шрифта;
семейство на
шрифта;
Свойството font-family
задава шрифта, който ще се ползва при представянето на текста.
Например:
<P style="color: red; font-family: Arial"> Текст с шрифт Arial</P><P style="color: #00FFFF; font family: Courier">Tекст с шрифт Courier</P><P style="color: rgb(0,0,0); font-family: serif">Текст със серифен шрифт</P> Текст с шрифт Arial
Tекст с шрифт Courier
Текст със серифен шрифт
За стойност може да зададете име на шрифта, например Arial, Helvetica, Verdana, или да се зададе само семейството на шрифта - serif, sans-serif, monospace, fantasy, cursive.
Коментари