Cascading Style Sheets və ya CSS, veb səhifəyə necə baxmaq lazım olduğunu izah edən bir dildir. CSS veb saytın sadə strukturuna rəng, üslub və tərtibat əlavə edir. Özünüzü yaxşı hiss etmək və səliqəli görünmək üçün paltarınızı seçdiyiniz kimi, CSS veb səhifəni bəzəməyə və cəlbedici görünməyə kömək edir. Veb inkişafında biz səhifədəki mətn və qutuların rəngini, ölçüsünü və mövqeyini dəyişdirmək üçün CSS-dən istifadə edirik. Bu dərs sizi sadə dildə CSS-nin əsasları ilə tanış edəcək. Biz CSS-nin nə olduğunu, nə üçün vacib olduğunu və HTML ilə necə işlədiyini öyrənəcəyik.
CSS Cascading Style Sheets deməkdir. Bu, veb-səhifələri tərtib etmək üçün istifadə olunan xüsusi bir dildir. CSS-i bina üçün boya və bəzək kimi düşünün. Bina HTML-dən hazırlanmışdır və CSS onu gözəl edir. CSS-dən istifadə edərək, veb səhifənizdəki elementlərin fon rəngini, şrift üslublarını və məkanı dəyişə bilərsiniz. CSS veb-dizaynerlərə veb-saytların daha yaxşı və əyləncəli görünməsinə kömək edən bir vasitədir.
Təsəvvür edin ki, bir rəsm çəkirsiniz. Rəsmin xətləri veb-saytın əsas strukturuna bənzəyir. CSS rəsmə həyat qatan karandaşlar və markerlər kimidir. Bir neçə sadə qayda ilə siz bütün rəsminizi düzdən rəngarəngə dəyişə bilərsiniz!
CSS veb saytları cəlbedici və istifadəsi asan etmək üçün istifadə olunur. Bu üslubu məzmundan ayrı saxlayır. Bu o deməkdir ki, səhifədəki sözlər və şəkillər (HTML tərəfindən təmin edilir) eyni qalır, CSS isə onların necə görünməsinə nəzarət edir. Üslubu yenilədiyiniz zaman məzmunu dəyişməyə ehtiyac yoxdur. Bu ayrılıq veb tərtibatçılarına daha sürətli işləməyə kömək edir və saytları ziyarət etməyi daha gözəl edir.
CSS-ni seçdiyiniz geyim kimi düşünün. Fərqli paltar geyinsən, fərqli görünürsən, amma yenə də eyni insansan. CSS vebsaytdakı məlumatları dəyişdirmədən onun görünüşünü dəyişir. Bu, yalnız bir CSS faylını redaktə etməklə bütün vebsaytın dizaynını yeniləməyi asanlaşdırır.
CSS HTML ilə əl-ələ verir. HTML veb-səhifədə işlərin hara getdiyini müəyyən edən təməldir. CSS daha sonra rənglər, şriftlər və üslub əlavə etmək üçün daxil olur. Brauzer veb-səhifəni yüklədikdə, əvvəlcə HTML ilə struktur qurur və sonra CSS-də müəyyən edilmiş üslubları tətbiq edir.
CSS qaydalar toplusu kimi yazılır. Hər bir qayda iki hissədən ibarətdir: seçici və bəyannamə bloku. Seçici brauzerə hansı HTML elementinin stil veriləcəyini bildirir. Bəyannamə blokunda bir və ya daha çox bəyannamə var. Hər bir bəyannamənin mülkiyyəti və dəyəri var. Mülk dəyişmək istədiyiniz şeydir və dəyər onu necə dəyişdirəcəyinizi bildirir.
Məsələn, səhifənin fon rəngini açıq mavi etmək üçün belə bir qayda yaza bilərsiniz:
<kod>bədən {
fon rəngi: açıq mavi;
}</code>Bu sadə qayda bütün səhifənin fonunu dəyişir.
Əsas CSS qaydası sadə bir nümunəyə uyğundur. Seçicini və xassələr və dəyərlər blokunu göstərir. Naxış belə görünür:
<kod>seçici {
əmlak: dəyər;
}</code>Burada selektor hansı HTML elementinin hədəflənməsini seçir. Mülk sizin dəyişmək istədiyiniz şeydir, dəyər isə onu necə dəyişdirmək istədiyinizdir.
Məsələn, bütün paraqraf mətninin mavi olmasını istəyirsinizsə, yazırsınız:
<kod>p {
rəng: mavi;
}</code>Bu qayda veb-brauzerə hər bir <p> (paraqraf) elementinin mavi mətnə malik olmasını bildirir.
CSS seçiciləri veb səhifənizdəki hansı elementlərin stil qaydalarına təsir edəcəyini seçmək imkanı verir. Seçicilərin bir neçə növü var və hər biri bir az fərqli işləyir.
Bu müxtəlif seçicilər sizə veb səhifənizin xüsusi hissələrini tərtib etmək üçün çoxlu güc verir. Onlar elementləri dəqiq şəkildə hədəf almağa və onların necə görünəcəyinə qərar verməyə imkan verir.
CSS veb səhifənizi tərtib etmək üçün istifadə edə biləcəyiniz bir çox fərqli xüsusiyyət təqdim edir. Hər bir xüsusiyyət elementin görünüşünün xüsusi aspektini dəyişməyə imkan verir. Bəzi ümumi xüsusiyyətlər bunlardır:
Hər bir CSS xassəsinin ardınca bir dəyər gəlir. Məsələn, mətnə qırmızı rəng vermək üçün yaza bilərsiniz:
<kod>p {
rəng: qırmızı;
}</code>Bu sadə qayda bütün paraqrafların qırmızı mətnə sahib olmasını təmin edir. Xüsusiyyət rəngi mətnin necə görünməsinə nəzarət edir və qırmızı dəyər ona hansı rəngin olacağını bildirir.
CSS-də "cascading" sözü üslubların bir qaydadan digərinə keçə biləcəyini bildirir. Eyni elementə iki qayda tətbiq oluna bilərsə, hansının qalib gələcəyinə sifariş qərar verə bilər. Bu, bir blokun bəzən digərinin bir hissəsini əhatə etdiyi blokların yığılmasına bənzəyir.
Ümumi qaydalardan biri odur ki, birbaşa HTML elementinin daxilində yazılmış üslublar (daxili üslublar adlanır) CSS faylınızdakı üslubları ləğv edəcəkdir. Başqa bir qayda ondan ibarətdir ki, əgər ana element üslublaşdırılıbsa, onun uşaq elementləri başqa cür deyilmədiyi halda həmin üslubu miras ala bilər.
Məsələn, əgər siz <div>-in mətn rəngini yaşıl olaraq təyin etsəniz, <div> daxilindəki mətn də miras qaldığı üçün çox vaxt yaşıl görünür. Bu, veb səhifəsində ardıcıl dizaynı saxlamağa kömək edir.
CSS ilə rəngləri bir çox yolla dəyişə bilərsiniz. Siz qırmızı , mavi və yaşıl kimi ümumi rəng adlarından istifadə edə bilərsiniz. Siz həmçinin qırmızı üçün <code>#FF0000</code> kimi onaltılıq kodlardan və ya <code>rgb(255, 0, 0)</code> kimi RGB dəyərlərindən istifadə edə bilərsiniz.
Şriftlər CSS-in digər vacib hissəsidir. Şrift dəftərdə seçdiyiniz əl yazısı tərzinə bənzəyir. CSS-də siz şrift ailəsini, ölçüsünü, çəkisini və üslubunu dəyişə bilərsiniz. Məsələn, abzaslarınızın Arial-da görünməsini istəyirsinizsə, istifadə edə bilərsiniz:
<kod>p {
font-family: Arial, sans-serif;
}</code>Bu qayda brauzerə mətni varsa Arial şriftində göstərməyi və mövcud olmadığı təqdirdə başqa oxşar şriftdən istifadə etməyi bildirir.
CSS ilə rənglərin və şriftlərin dəyişdirilməsi mətnin oxunmasını asanlaşdırır və veb-səhifənizi baxmağı daha maraqlı edir.
CSS Qutu Modeli elementin müxtəlif hissələrinin səhifədə necə yerləşdiyini anlamaq üçün bir yoldur. Hər bir element qutuya bənzəyir. Qutu modeli dörd hissədən ibarətdir:
Bir fotoşəkil təsəvvür edin. Fotoşəkil özü məzmundur. Fotoşəkili əhatə edən döşək yastıq kimidir. Hamısını bir yerdə saxlayan çərçivə haşiyədir. Və çərçivənin ətrafındakı boşluq kənardır. Bu modeldən istifadə edərək, dizaynınızın bütün hissələrinin lazımi yerə və balansa malik olduğundan əmin ola bilərsiniz.
CSS təkcə rənglər və şriftlər haqqında deyil; o, həmçinin veb-səhifədə elementləri təşkil etməyə kömək edir. Buna layout və yerləşdirmə deyilir. CSS ilə siz hər bir elementin səhifədə harada görünəcəyinə qərar verə bilərsiniz.
Veb səhifənin tərtibatına nəzarət etməyin bir neçə yolu var, o cümlədən:
Bu layout üsullarından istifadə oyuncaqları rəfdə yerləşdirməyə bənzəyir. Hər oyuncağın hara getdiyinə siz qərar verirsiniz ki, onların hamısında kifayət qədər yer olsun və səliqəli görünsün. Bu, veb səhifənizi daha mütəşəkkil və cəlbedici edir.
HTML və CSS-nin birlikdə necə işlədiyinə dair bir nümunə. Bu nümunə kod bəzi üslubları olan sadə veb səhifəni göstərir:
<kod><!DOCTYPE html>
<html>
<baş>
<stil>
bədən {
fon rəngi: açıq mavi;
}
h1 {
rəng: göy;
şrift ölçüsü: 24px;
}
p {
rəng: yaşıl;
şrift ölçüsü: 18px;
}
</style>
</head>
<bədən>
<h1>İlk Veb Səhifəm</h1>
<p>Bu, CSS istifadə edərək tərtib edilmiş sadə veb səhifədir.</p>
</body>
</html></code>Bu kod açıq mavi fon rəngi olan veb səhifə yaradır. Başlıq mətni göy, paraqraf mətni isə yaşıldır. <code><style></code> teqinin içindəki CSS qaydaların necə yazıldığını və tətbiq olunduğunu göstərir.
HTML-yə CSS-ni üç əsas yolla əlavə edə bilərsiniz. Vəziyyətdən asılı olaraq hər bir metodun öz istifadəsi var:
Xarici üsul peşəkar veb tərtibatında ən çox yayılmış üsuldur, çünki o, HTML-ni səliqəli saxlayır və eyni anda bir çox səhifədə üslubları yeniləməyə imkan verir.
CSS bir çox cəhətdən çox faydalıdır. Veb inkişafında CSS-dən istifadənin bəzi üstünlükləri bunlardır:
CSS-dən istifadə xüsusi alətlər qutusuna sahib olmaq kimidir. Alətlər qutusundakı hər bir alət veb səhifənizin görünüşünü asanlıqla yaxşılaşdırmağa kömək edir. Təcrübə edərkən, CSS-nin veb saytları gözəl və istifadəçi dostu etməkdə nə qədər güclü olduğunu görəcəksiniz.
Ziyarət etdiyiniz hər bir veb sayt müəyyən şəkildə CSS-dən istifadə edir. Sevimli cizgi filmi saytlarından tutmuş məktəb layihə səhifələrinə qədər, CSS əyləncəli və asan oxunan tərtibat yaratmağa kömək edir. Səliqəli boşluq və aydın mətni olan rəngarəng veb səhifəni görəndə, bu, CSS-dir.
Oyunlar, cizgi filmləri və ya onlayn hekayələr kimi məşhur veb saytların dizaynını nəzərdən keçirin. Rənglərin, şriftlərin və tərtibatın düşünülmüş istifadəsi bu veb-saytları maraqlı və cəlbedici etməyə kömək edir. CSS həm də proqramlarda və mobil saytlarda istifadə olunur, məzmunun həm böyük ekranlarda, həm də kiçik telefonlarda yaxşı görünməsini təmin edir.
Gündəlik həyatda CSS otağı bəzəməyə bənzəyir. Otağınız üçün bir mövzu seçə, rəngli şəkillər asa və mebellərinizi səliqəli şəkildə yerləşdirə bilərsiniz. CSS veb saytlar üçün də eyni şeyi edir. O, rəqəmsal məkana nizam və gözəllik gətirir, onu ziyarətçilər üçün xoş edir.
CSS haqqında öyrəndiyimiz əsas məqamlar bunlardır:
CSS veb inkişafının vacib hissəsidir, saytları gözəl və naviqasiyanı asanlaşdırır. Daha çox araşdırdıqca və öz veb səhifələrinizi yaratmağa çalışdıqca, CSS-nin yaradıcılığı ifadə etmək üçün vasitəniz olduğunu unutmayın. Rənglər, şriftlər və tərtibatlarla sınaqdan keçirərək əylənin, çünki hər bir kiçik dəyişiklik yaxşı dizayn edilmiş veb-saytın sehrini artırır.
Sevimli veb saytlarınızı məşq etməyə və müşahidə etməyə davam edin. Diqqətinizi çəkmək və xoş təcrübə yaratmaq üçün müxtəlif üslublardan necə istifadə olunduğuna diqqət yetirin. Vaxt keçdikcə sadə HTML strukturlarını vizual cəlbedici veb səhifələrə çevirməkdə CSS-nin nə qədər güclü olduğunu görəcəksiniz.