CSS основи

Заглавие: CSS основи Съб Ное 14, 2009 1:28 am

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>

</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>

</STYLE>

</HEAD>

<DIV>Червен текст.</DIV>
<BR>
<BR>
<P>Син текст.</P>

Червен текст.
Син текст.
И така, постигнахме желания ефект. Но ако искате, например, на страницата да има и зелен, и оранжев цвят? Ще трябва да зададете стил за четири HTML елемента, което едва ли е много удобно. По-простия начин е да използвате класове. Вижте долния пример:

<HEAD>

<STYLE>

</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>

</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.
Свойство: FONT-STYLE
Стойности:
normal;
italic;
oblique;
Свойството font-style oпределя стила на шрифта. Например:

<P style="font-style: normal">Нормален шрифт</P>
<P style="font-style: italic">Наклонен шрифт (italic)</P>
<P style="font-style: oblique">Шрифт oblique</P>

Нормален шрифт
Наклонен шрифт (italic)
Шрифт oblique
Свойство: FONT-WEIGHT
Стойности:
абсолютни величини;
числови стойности;
Определя дебелината на шрифта:

<P style="font-weight: bold">Удебелен шрифт</P>
<P style="font-weight: normal">Шрифт с нормална дебелина</P>
<P style="font-weight: 100">Тънък шрифт</P>

Удебелен шрифт
Нормален шрифт
Тънък шрифт
Могат да се зададат както абсолютни величини (normal, bold, bolder), така и числови стойности (100, 200, 300 и тн. 400 отговаря на normal, а 700 на bold).
Свойство: FONT-SIZE
Стойности:
абсолютни величини;
стойност спрямо предходния размер;
типографски величини;
Свойството определя дебелината на шрифта. Например:

<P style="font-size: x-large">Много голям шрифт</P>
<P style="font-size: 12pt">Шрифт с големина 12 пункта</P>
<P style="font-size: 12px">Шрифт с големина 12 пиксела</P>
<P style="font-size: larger">Шрифт, една степен по-голям от предходния</P>

Много голям шрифт
Шрифт с големина 12 пункта
Шрифт с големина 12 пиксела
Шрифт, една степен по-голям от предходния
Свойстовто font-size има много стойности. Вижте частта Свойства за по-подробно описание. Най-общо стойностите се делят на три групи - абсолютни стойности, стойности спрямо предходния размер и типографски величини. Абсолютните стойности са фиксирани размери, които имат име. Например: xx-small, medium, large и т.н. Под стойности спрямо предходния размер се разбира една степен по-голям или по-малък шрифт от предходния. Например, ако имаме шрифт 14 пункта, със стойността larger ще зададем шрифт с големина 15 пункта. Последната група от стойности е най-изпозваната. Това са типографски величини за определяне на размера. Например: pt (пунктове), px (пиксели), em (коефициент спрямо актуалния размер), проценти.
Свойство: TEXT-DECORATION
Стойности:
none;
underline;
overline;
line-through;
blink;
Това свойство добавя някои ефекти към текста. Например:

<P style="text-decoration: underline">Подчертан текст</P>
<P style="text-decoration: line-through">Зачеркнат текст</P>
<P style="text-decoration: none">Текст без декорация</P>

Подчертан текст
Зачеркнат текст
Текст без декорация
Всичките стойности са: none, underline, overline, blink, line-through. Някои от тях обаче не работят в Netscape. Това свойство е полезно ако искате да се отървете от досадното подчертаване на линковете. Например:

<А style="text-decoration: none" href="#">Неподчертан линк</A>

» HTML основи

CSS основи

CSS основи

Similar topics

Similar topics