CSS nədir?

Müəllif Kənan Kamranoğlu Oxunma sayı: 5287 Nədir?

Açılışı “Cascading Style Sheets” olan CSS, Azərbaycan dilində “Kaskadlı Üslub Cədvəlləri” və ya “Kaskad Stil Layları” mənasını verir. HTML və JavaScript ilə birlikdə ən əsas veb texnologiyaları arasında olan CSS, internet səhifələrinin kodlaşdırılmasında istifadə olunan 3 əsas texnologiyadan biridir.

CSS veb səhifələrini formatlaşdırmaq üçün HTML-in tamamlayıcısı olaraq istifadə olunan bir dil olduğundan CSS nədir? CSS nə işə yarayır? suallarına cavab verməzdən əvvəl HTML-in nə olduğunu aydınlaşdırmaqda fayda var.

HTML (Hypertext Markup Language) vebsaytınızın istədiyiniz formada və müəyyən etdiyiniz formatda görünməsini təmin edən işarələmə dilidir.

HTML haqqında ətraflı məlumat üçün "HTML nədir" məqaləmizi oxuya bilərsiniz.

CSS nədir?

Veb saytlarda səhifələri formatlaşdırmaq və üslub qaydalarını müəyyən etmək üçün istifadə edilən CSS, veb saytların vizuallığını formalaşdırmaq və üzə çıxarmağa imkanı verir.

CSS ilə siz veb səhifələrin tərtibatı, rəngləri, istifadə olunan şriftlər, başlıqlar, vizual effektlər və digər vizual elementlər üzərində, effektiv və funksional nəzarəti təmin edə bilərsiniz. İstifadəçi dostu və vizual olaraq təsirli vebsaytlar üçün HTML və JavaScript-ə əlavə olaraq yazılmış CSS kodları son dərəcə vacibdir. Effektiv CSS kodlaşdırması veb-saytlara yüksək istifadə imkanı verir.

CSS veb səhifələrin dizaynını çox asanlaşdıran və böyük rahatlıq təmin edən çevikliyi ilə də ön plana çıxır. CSS ilə bir veb-saytdakı bütün səhifələrin və ya yalnız istədiyiniz səhifənin vizual xüsusiyyətləri olduqca asanlıqla idarə edilə bilər.

CSS ilə Kodlaşdırma

CSS üslubları HTML şablonunuzun hər bir elementinə ayrı-ayrılıqda əlavə edilə bilər, lakin CSS bir elementə birdən çox üslub və ya bir üslubu birdən çox səhifəyə tətbiq etmək kimi daha praktik xüsusiyyətləri ilə məşhurdur. Məsələn; bütün H2 başlıqlarını eyni rəngdə göstərə bilərsiniz.

CSS kodları HTML-ə üç fərqli şəkildə əlavə edilə bilər:

1. İnline(Sətir içi) CSS

İnline CSS ilə yalnız həmin teqə təsir edəcək formatlar verilə bilər, başq sözlə desək, inline css bir səhifədə yalnız bir elementə nəzarət etmək üçündür.

<html>
<body>
<h1 style="color:blue;text-align:center;">Bu başlıq mavi olacaq və mərkəzdə yerləşəcək</h1>
<p style="color:red;">Bu paraqraf qırmızı olacaq.</p>
</body>
</html>

2. İnternal(Daxili) CSS

İnternal CSS kodları <head> teqləri arasındakı <style> </style> teqləri arasında yerləşdirilir. Səhifələrinizin gec yüklənməsinə səbəb ola bilər.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: red;
}

h2 {
color: black;
}

p {
color: blue;
}
</style>
</head>
<body>

<h1>Bu başlıq qırmızı rəngdə olacaq</h1>
<p>Bütün paraqraflar mavi rəngdə olacaq.</p>

<h2>Bu başlıq qara rəngdə olacaq</h2>
<p>Bütün paraqraflar mavi rəngdə olacaq.</p>
</body>
</html>

3. External(Xarici) CSS

External CSS, HTML səhifəsinin <head> bölməsindəki <link> elementinin içərisində yazılır. External CSS ilə siz yalnız bir faylı dəyişdirməklə bütün vebsaytın görünüşünü dəyişə bilərsiniz. External CSS faylınız yüklənənə qədər səhifəniz düzgün görünməyə bilər. External CSS istənilən mətn redaktorunda yazıla bilər və .css fayl uzantısı ilə yadda saxlanılmalıdır.

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bu başlıqdır</h1>
<p>Bu paraqrafdır.</p>
</body>
</html>

Niyə CSS?

HTML məzmunun səhifədə necə göstəriləcəyini və ya yerləşdiriləcəyini müəyyən etmək üçün nəzərdə tutulmuş bir dil deyil. HTML-in məqsədi məzmunu təsvir etmək, məzmunun iyerarxiyasını müəyyən etməkdir. Səhifənin adı nədir, səhifədəki keçidlər nədir, bu düzülmüş sətirlər siyahıdır, yoxsa adi abzaslardır? HTML-nin işi bu suallara cavab verməkdir. Başlıq mavi olmalıdır, loqo kiçik olmalıdır, yoxsa yuxarı sağda olmalıdır? HTML bunlara müdaxilə etmir.

CSS-in işə girdiyi yer budur. CSS-in funksiyası nəyin, harada və necə göstəriləcəyini təsvir etməkdir. Məsələn, loqonu səhifənin yuxarı sol küncünü tamamilə əhatə edəcək şəkildə göstərmək CSS-in məsuliyyətidir. Bir ay sonra, loqonun bütün yuxarı sağ küncü əhatə etməsini istədikdə, bu HTML koduna və ya loqotipin yer aldığı şəkil faylına heç toxunmadan bu iş yenə CSS ilə hələ də ediləcək.

HTML və CSS arasında əlaqə

Əgər işimizi insanla müqayisə etsək, HTML həmin insanın skeleti, CSS isə xarici görünüşü olar. Yəni HTML ilə saytımızın əsas skeletini yaratarkən, CSS ilə mətn rəngləri və fon rəngləri kimi görünüş stilləri veririk. Saytın görünüşünü fərdiləşdirmək üçün bir növ CSS istifadə olunur. HTML və CSS arasındakı əlaqə əsasən bu prinsipə əsaslanır.

Nəticə olaraq

CSS ilə biz saytımızın görünüşünü gözəlləşdirə və bunu edərkən vaxta qənaət edə bilərik. Kompüter ekranları kimi böyük ekranlar üçün hazırladığımız saytımızı kiçik ekranlara uyğunlaşdırıb daha çox istifadəçinin diqqətini cəlb edə bilərik.

Müəllif

Kənan Kamranoğlu

. ....