Bir az CSS - dən

Mövzu: Bir az CSS - dən C. Okt. 13, 2006 12:42 pm

Bir az CSS - dən

CSS - nədir? Cascading Style Sheets (Kaskadlı Stillərin Cədvəli) - dildir, ixtiyari HTML - sənədin xarici görünüşünü özündə saxlayan xassələr toplusudur. Onun köməkliyi ilə dizayner stil və Web-səhifədəki hər bir element üzərində tam idarəyə malikdir, hansı ki sadə HTML sədindəki teqlərin daxilində olan xassələrin istifadəsindən daha funksionaldır. Məsələn: Sizə yağlı, qırmızı və altı xətlənmiş mətn yaratmaq lazımdır.

HTML NÜMUNƏ:

<font color="red"><strong><u> Hansısa mətn </u></strong></font>

Əgər bu stili bir neçə dəfə istifadə etmək lazımdırsa? Yaxşı əgər 5, bəlkə 10-20 dəfə? Bax burada bizə CSS kömək edəcək. Stil cədvəllərinin üç növü mövcuddur: Daxili stil cədvəlləri, Qlobal stil cədvəlləri və Bağlanmış stil cədvəlləri. Daxili stil cədvəlləri (Inline Style Sheets) xüsisi atributun köməkliyi ilə birdəfəyə HTML teqlərinə yerləşirlər. Qloballar (Global Style Sheets) elementlərin stilini bütün sənəddə təyin edirlər. Bağlanmışlar isə (Linked Style Sheets) birdəfəyə bir neçə sənəd üçün istifadə oluna bilərlər və xarici faylda saxlanılırlar. Bütün bunlar haqqında aşağıdakı bölmələrdə ətraflı yazılıb.
Yuxarı

Struktur və qaydalar

Selectorlar (Selectors):

Sintaksisi:
selektor {xassə}

HTML - in ixtiyari elementi - mümkün CSS - selektordur. Selectorun xassəsi təyin olunmuş elementin stilini təyin edir.

NÜMUNƏ:

H1 {color:red; size:20pt;}

Sənəddəki bütün H1 elementləri qırmızı rəngli, 20 nöqtə ölçülü (pt, point) olacaqlar.

Klasslı selektorlar (Class Selectors):

Sintaksisi:
selektor.klass {klass}

CLASS - HTML elementinin klassını təyin edən atributdur. CSS - də eyni elementlər üçün müxtəlif xüsusi klasslar da yaratmaq olar.

NÜMUNƏ:

H1.blue {color:blue; size:20pt;}

CLASS="blue" olan bütün H1 elementləri göy olacaqlar.

Klasslar həmçinin təyin olunmuş elementlərə aydın bağlantı olmadan da yazıla bilərlər.

Sintaksisi:
.klass {xassə}

NÜMUNƏ:
.green {color:green;}

Verilmiş halda CLASS="green" atributunun elementləri yaşıl olacaqlar.

ID selektorlar (ID Selectors):

Sintaksis:
#id {xassə}

ID - individual adlandırılmış stildir. Onun köməkliyi ilə müəyyən elementin klassına stilli əlavələr etmək olar. İndividuallar bir və ya bir neçə elementin klassına individual xassələr ötürmək üçün istifadə edilir. Deyək ki, siz blue - klassını göy və yanakı etmisiniz. Lakin sizə yağlı xətlənmiş mətn və həmçinin eyni cür xassəli göy yanakı mətn də lazım olacaq. Doğrudur, yeni klass yaratmaq olar, lakin nə üçün? Sadəsi ID yazın. Məsələn "boldunderline", və blue klassının bütün "boldunderline" ID qiymətli elementləri yağlı xətlənmiş göy yanakı olacaqlar. Elə bil ki blue klassı ilə "boldunderline" identifikatorunun xassələrinin sintezi baş verəcək.

NÜMUNƏ:

<html>
<head>
<title> Ilk addimlan - CSS numune </title>
<head>
<style>
.blue {color:blue; font-style:italic}
#boldunderline {text-decoration:underline; font-weight:bold}
</style>
<body>
<p> Salam, bu menim web-sehifemdir. </p>
<p> Helem ki duzelmek uzredir.... </p>
<p> .....Lakin bu yaxinlarda achilacaq </p>
</body>
</html>

Nümunədən göründüyü kimi ID atributu klass olmasa da göstərilə bilər (Nümunədəki paraqrafa bax). Belə halda paraqraf yalnız ID "boldunderline" xassələrina maliki olacaq (nümunədə - yağlı, xətlənmiş mətn).

Kontekstual selektorlar (Contextual Selectors):

Kontekstli selektorlar - bir neçə qəribə selektorun birləşməsidir. Stil yalnız qurulmuş kaskadlı ardıcıllıq ilə elementlərə verilir.

NÜMUNƏ:

P EM {color:silver;}

Verilmiş nümunədə P elementinin daxilindəki bütün EM elementləri verilmiş stilə malik olacaqlar.

Bir neçə elementə eyni xassənin verilməsi:

Deyək ki sizin Web səhifədə bir-neçə elementə eyni xassəni vermək lazımdır. Bu halda selektorları təyin edərkən onlar xassədən qabaq bir-birləri ilə vergül ilə ayrılırlar.

NÜMUNƏ:

h1, h2, h3, p, strong {color: green; font-style:italic;}

Bütün h1, h2, h3, p və strong elementəri yaşıl olacaqlar.

Saxtaklass və saxtaelementlər:

Sintaksisi:
selektor:saxtaklass {xassə}
selector.klass:saxtaklass {xassə}
selektor:saxtaelement {xassə}
selector.klass:saxtaelement {xassə}

Saxtaklass və saxraelementlər - CSS-ə məxsus və brouzerləri ilə avtomatik təyin edilən xüsusi klass və elementlərdir. Saxtaklasslar bir elementin müxtəlif tiplərini ayırır və onları təyin edərkən hər biri üçün xüsusi stil yaradırlar. Saxtaelementlər digər elementlərin hissələrinə o elementin stilindən fərqli bir stil verərək onların bir hissəsi olurlar.

Saxtaklass və saxtaelementlətin siyahısı:

Anchor Pseudo Classes - Bunlar bağlantı bildirən <a href=" "> - elementinin saxtaklasslarıdır. Bu elementin saxtaklassları: link (bağlantı), active (aktiv bağlantı), visited (əvvəl baxılmış URL), hover (mausun kursorunu bağlantının üzərinə gətirəndə baş verən saxtaklass. Netscape-də işləmir).

FirstLine Pseudo-element - first-line. Bu saxtaelement block-level elementləri ilə istifadə oluna bilər (p, h1 və s.). O bu elementlərin ilk satrinin stilini dəyişir.

FirstLetter Pseudo-element - first-letter. first-line oxşayır lakin sətirə yox ancaq ilk simvola təsir edir.

NÜMUNƏ:

a:link, a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}

Verilmiş nümunədə Anchorun (bağlantılar) bütün elementləri göy olacaq. Sıxıldıqda (aktiv vəziyyətdə) rənglərini qırmızıya dəyişəcəklər və mausu üzərinə gətirəndə xətti çəkiləcək.

Qeyd : Bir selektor üçün bir neçə xassə təyin edərkən, kontekstual selektor, klass, individual adlandırılmış stil və birləşmiş selektor qrupları bir-birindən nöqtə vergül ilə ";" ayrılırlar.
Yuxarı

Daxili Stil Cədvəlləri

Deyildiyi kimi Daxili stillərin istifadəsi sadə HTML teqlərinin istifadəsindən heç də çox fərqlənmirlər. Onlar HTML - teqində STYLE atributunun köməkliyi ilə yalnız bir elementin stilini təyin edirlər.

HTML NÜMUNƏ:

<font color="blue" size="3" face="Arial"> Metn </font>

INLINE STYLE SHEET NÜMUNƏ:

<font> Metn </font>

Göründüyü kimi Inline Style Sheet kodu HTML teqinin kodundan çox alındı. Ona görə də Inline Style Sheet-ləri yalnız HTML-də realizə olunmayan yalnız CSS klassifikasiyasında olan və hansısa teqə tətbiq etmək lazım olarkən istifadə etmək lazımdır. Və ya verilmiş elementin bütünlükdə vəziyyətini dəyişmək lazım olanda da istifadə etmək olar.
Yuxarı

Qlobal Stil Cədvəlləri

Qlobal stillər bütün sənədlərin elementlərinin görünüşünü təyin edirlər. Bunun üçün <STYLE> teqindən istifadə edilir. O sənədin başlığında yerləşdirilir.

NÜMUNƏ:

<html>
<head> <title> Ilk addimlar - CSS numune </title>
</head>
<STYLE>
h1{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</STYLE>
<body>
<h1> Bu bashliq iri qirmizi yanaki yazilib </h1>
Bax <font class="blue"> bu </font> Soz - goydur, <font id="bold">
bu ise </font> - yaghlidir.
</body>
</html>

Verilmiş nümunədə bütün H1 elementləri iri qırmızı və yanakı yazılacaqlar, bütün Blue klassı ilə yazılan elementlər göy yazılacaqlar, ID="Bold" identifikatoru ilə yazılmış elementlərin hamısı yağlı olacaqlar. Sadəlik üçün <Style> yerinə <Style> teqini də istifadə etmək olar, bu daha da savadlı olacaq.
Yuxarı

Bağlanmış Stil Cədvəlləri

Bağlanmış stil cədvəlləri bir stili bir neçə sənədə ötürmək üçün istifadə olunurlar və onlar ayrıça faylda saxlanılırlar. Bu çox cəlbedicidir, belə ki əgər saytda bir stili təyin etmək üçün hər bir sənədə stilləri tətbiq etmək lazım gəlmir.

NÜMUNƏ:

styles.css faylı

<STYLE>
body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic}
h1 {color:white}
#bold {font-weight:bold}
</STYLE>

HTML faylının özündə isə <Link> teqinin köməkliyi ilə həmin fayla bağlantı qoyulur. Bu belə görünür: <LINK>

NÜMUNƏ:

index.html faylı

<html>
<head>
<title> Ilk addimlar - CSS numune </title>
</head>
<LINK>
<body>
Sənədin tutumu
</body>
</html>

Bununla da I hissə sona çatır, II hissəyə keçək.