CSS nədir?
CSS (Cascading Style Sheets) — veb səhifələrin vizual görünüşünü və dizaynını idarə etmək üçün istifadə olunan stil dilidir. HTML veb saytın strukturunu yaradırsa, CSS onun görünüşünü formalaşdırır: rənglər, şriftlər, ölçülər, elementlərin düzülüşü və s. CSS olmadan HTML səhifələr sadə və bəzəksiz görünərdi.
Sadə desək: HTML evin divarları və otaqlarıdırsa, CSS onun rəngi, mebeli və bəzəyidir. JavaScript isə evdəki işığı yandırıb-söndürən, qapını açan “elektrik sistemi”dir.
CSS-i 1994-cü ildə Håkon Wium Lie təklif edib, ilk rəsmi standart — CSS1 — isə 1996-cı ildə qəbul olunub.
CSS nə üçündür?
🎨 Rəngləri, fonları və sərhədləri təyin etmək
🔠 Şrift növlərini, ölçüsünü və yazı üslubunu idarə etmək
📏 Elementlərin ölçüsünü, yerləşməsini, margin və padding kimi boşluqları tənzimləmək
📱 Müxtəlif cihazlara uyğunlaşan dizayn (responsive design) yaratmaq
⚙️ Animasiya və keçid effektləri əlavə etmək
📐 Səhifənin quruluşunu (layout) yaratmaq — Flexbox və Grid vasitəsilə
🔹 Əsas anlayışlar
- Selektor (selector) — stilin hansı HTML elementinə tətbiq olunacağını göstərir. Məsələn: p, .btn, #header.
- Xassə (property) — elementə tətbiq olunan stil xüsusiyyəti. Məsələn: color, font-size, background-color.
- Dəyər (value) — xassəyə verilən konkret qiymət. Məsələn: color: red;, font-size: 16px;.
- Media queries — müxtəlif ekran ölçüləri üçün fərqli dizayn qaydaları təyin edir.
Tam bir CSS qaydası belə görünür:
css
.btn {
background-color: #FF8C00;
color: white;
font-size: 16px;
}
Burada .btn — selektor, background-color — xassə, #FF8C00 isə dəyərdir. Saytlarda rənglər çox vaxt belə, HEX formatında yazılır: #FF8C00 narıncı rəngdir.
Media query nümunəsi — ekranın eni 768 pikseldən kiçik olduqda şrift kiçilir:
css
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
“Cascading” nə deməkdir?
Adındakı “Cascading” (“kaskad”, “pillə-pillə axan”) CSS-in əsas prinsipini bildirir. Bir elementə eyni anda bir neçə qayda tətbiq oluna bilər. Belə hallarda brauzer müəyyən qaydalara əsasən hansı stilin qalib gələcəyinə qərar verir. Sadələşdirilmiş qayda belədir:
- daha konkret selektor daha ümumi selektordan güclüdür: #id > .class > p;
- eyni güclü qaydalardan sonra yazılan qalib gəlir.
CSS yazmağın üç yolu
1. Inline CSS — birbaşa HTML elementinin style atributunda:
html
<h1 style="color: blue;">Başlıq</h1>
2. Internal CSS — HTML sənədinin içində, <style> teqi ilə:
html
<style>
p { color: green; }
</style>
3. External CSS — ayrıca .css faylında yazılır və HTML-ə qoşulur:
html
<link rel="stylesheet" href="style.css">
Böyük layihələrdə ən çox üçüncü üsuldan istifadə olunur: bir CSS faylı bütün saytın görünüşünü idarə edir və onu bir yerdən dəyişmək kifayət edir.
CSS necə işləyir?
Brauzer səhifəni yükləyəndə əvvəlcə HTML-i oxuyub onun strukturunu — DOM-u — qurur. Sonra CSS qaydalarını oxuyur və selektorlara əsasən hər elementə uyğun stilləri tətbiq edir. Nəticədə ekranda rəngli, səliqəli səhifə görünür.
CSS olmadan veb sayt necə görünərdi?
Yalnız ardıcıl düzülmüş mətn və şəkillər — heç bir dizayn olmadan. CSS sayəsində isə saytlar cəlbedici, istifadəçi dostu və müasir görünür.
Tez-tez verilən suallar
CSS proqramlaşdırma dilidirmi? Xeyr. CSS stil dilidir: onda proqramlaşdırma dillərindəki kimi dövrlər, şərtlər və alqoritmlər yoxdur. Amma veb saytlar yaratmaq istəyən hər kəs üçün HTML və JavaScript ilə yanaşı öyrənilməli əsas texnologiyalardan biridir.
İstəyirsiniz ki, bu biliyi praktikaya keçirib real nəticələr əldə edəsiniz? IT və Kompüter Mühəndisliyi kursumuzla addım-addım öyrənməyə başlayın. Ətraflı məlumat üçün linkə keçid edin: IT və Kompüter Mühəndisliyi kursu