CSS Nədir? Əsas anlayışlar, Tətbiq növləri

Veb texnologiyaları dedikdə bir çoxuna ilk növbədə HTML xatırlanır, amma bu skeletin üzərində forma və estetik yaradan əsas komponent isə CSS-dir. Məhz CSS veb səhifənin görünüşünü, dizayn strukturunu və interaktivliyini formalaşdıran texnologiyadır. CSS sadəcə “rəng vermək” və ya “şrift dəyişmək” vasitəsi deyil, o, çox qatlı dizayn məntiqi, fərqli ekran ölçülərinə uyğunlaşdırma, animasiyalar və istifadəçi təcrübəsini artıran vizual sistemlərin qurulması üçün istifadə olunur.

Texnologiyanın bu sahəsində CSS bilikləri olmayan bir veb tərtibatçının işi yarımçıq hesab edilir. Sadə təriflərdən uzaqlaşaraq, CSS-i dinamik və sistematik yanaşma ilə dərk etmək vacibdir. HTML yalnız struktur verirsə, CSS o strukturun “həyat tapan” hissəsidir. CSS vasitəsilə bir elementin görünməsini, gizlədilməsini, fərqli hallarda dəyişməsini təmin etmək mümkündür. Bu texnologiya responsiv dizaynın – yəni cihazlara uyğun tərtibatın – əsasında dayanır.

CSS-in yaranması və tarixi inkişafı

CSS-in yaranması 1990-cı illərin ortalarına təsadüf edir. İnternetin inkişafı ilə birlikdə HTML dili sürətlə yayılmağa başladı, lakin dizayn imkanları son dərəcə məhdud idi. 1994-cü ildə norveçli kompüter alimi Håkon Wium Lie tərəfindən CSS konsepti irəli sürüldü. Məqsəd, məzmunu dizayndan ayıraraq daha çevik, dəyişən və yenilənə bilən veb interfeyslər yaratmaq idi. Bu təşəbbüs W3C (World Wide Web Consortium) tərəfindən dəstəklənərək CSS-in ilk versiyasının 1996-cı ildə yayımlanması ilə nəticələndi.

İlk versiya CSS1 sadə xüsusiyyətlərə sahib idi – şrift ölçüsü, rəng, arxa fon kimi əsas dizayn elementlərini dəyişdirməyə imkan verirdi. Daha sonra CSS2 (1998) əlavə funksionallıqlar gətirdi: media tipləri, yerləşdirmə metodları və daha mürəkkəb selektorlar əlavə edildi. Lakin CSS3 bu texnologiyanın dönüş nöqtəsi oldu. Modullar şəklində hazırlanmış CSS3 animasiyalar, transformasiyalar, responsiv dizayn elementləri və interaktiv keçidlər kimi çoxsaylı yenilikləri dəstəkləyirdi.

CSS-in hər yeni versiyası veb proqramlaşdırmanın imkanlarını genişləndirdi. Bugünkü CSS yalnız “görünüş tənzimləyici” deyil, bir dizayn mühərrikidir və JavaScript ilə inteqrasiya şəraitində daha güclü UI tətbiqləri yaratmağa imkan verir.

CSS-in əsas anlayışları və sintaksisi

CSS-in işləmə prinsipi sadə sintaksis üzərində qurulub: seçici, xüsusiyyət və dəyər. Seçici HTML elementini müəyyən edir, xüsusiyyət isə hansı vizual dəyişikliyin ediləcəyini göstərir. Dəyər isə bu dəyişiklik üçün tətbiq ediləcək konkret parametri müəyyənləşdirir. Məsələn:

css
CopyEditp {
  color: red;
  font-size: 16px;
}

Burada p seçici, color və font-size isə xüsusiyyətlərdir. Onlara uyğun olaraq red və 16px dəyərləri təyin olunmuşdur. CSS-də yazılan bütün qaydalar bu struktur əsasında formalaşır.

Selektorlar fərqli ola bilər: class, id, element, attribute və s. İstifadəçi bu selektorları kontekstə uyğun olaraq fərqli səviyyələrdə tətbiq edə bilər. Daha kompleks strukturlar üçün kombinə olunmuş selektorlar və psixoloji selektorlar da geniş istifadə olunur. Misal üçün: .menu li:hover kimi yazılışlar CSS-in tətbiq sahələrini genişləndirir.

CSS-in tətbiq növləri

CSS üç əsas üsulla tətbiq edilə bilər: inline, internal və external. Inline CSS birbaşa HTML elementinə əlavə olunur və adətən çox tövsiyə edilmir. Internal CSS <style> teqləri arasında yazılır və həmin HTML sənədinə aiddir. External CSS isə ayrıca .css faylı kimi saxlanılır və <link> teqi vasitəsilə sənədə qoşulur. Aşağıdakı cədvəldə bu üsullar arasında müqayisəni görə bilərsiniz:

Bu metodlar arasında external CSS ən çevik və peşəkar yanaşma hesab olunur. Çünki stilin yenilənməsi üçün bir faylın dəyişdirilməsi bütün sistemə təsir edir.

Responsiv dizayn və media sorğuları

CSS-in ən vacib imkanlarından biri də responsiv dizayn yaratmaqdır. Müasir veb saytlar masaüstü, planşet və mobil cihazlarda fərqli ölçü və görünüşdə olmalıdır. Media query anlayışı vasitəsilə CSS cihaz ölçülərinə görə müxtəlif dizayn tətbiqlərinə imkan verir. Misal üçün:

css
CopyEdit@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Bu kod 768 pikseldən kiçik ekranlarda şrift ölçüsünü avtomatik olaraq kiçildir. Beləliklə, istifadəçi təcrübəsi hər bir cihaz üçün optimallaşdırılır. Responsiv dizayn həm istifadəçi məmnuniyyətini artırır, həm də axtarış sistemləri üçün SEO baxımından vacibdir.

Animasiya və keçidlər

CSS yalnız statik görünüş tənzimləmək üçün deyil, həm də interaktiv elementlər yaratmaq üçün istifadə olunur. transition, animation və transform kimi xüsusiyyətlər sayəsində veb interfeysə hərəkət, keçid və vizual effektlər əlavə etmək mümkündür. Məsələn:

cssCopyEdit.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Bu kod button elementi üzərində hover olduqda rəngin yavaş dəyişməsini təmin edir. CSS animasiyaları isə daha kompleks hərəkətləri idarə etmək üçün istifadə olunur. Açar çərçivələr (keyframes) vasitəsilə obyektin başlanğıc və son vəziyyətləri müəyyənləşdirilir.

CSS modulyarlığı və təkrar istifadə

CSS kodlarının modulyar yazılması böyük layihələrdə vacib prinsipdir. BEM (Block Element Modifier), OOCSS (Object-Oriented CSS) və SMACSS (Scalable and Modular Architecture for CSS) kimi metodologiyalar bu məqsədlə istifadə olunur. Məsələn, BEM üsulu ilə belə yazılır:

cssCopyEdit.header__logo--big {
  font-size: 24px;
}

Bu yanaşma kodun təkrar istifadəsini və oxunaqlılığını artırır. Həmçinin CSS-in SCSS, SASS kimi preprocessorlara çevrilməsi sayəsində daha funksional və dəyişkən strukturlar qurmaq olur.

CSS və JavaScript əlaqəsi

CSS müstəqil işləyə bilər, lakin JavaScript ilə birlikdə işlədikdə daha funksional tətbiqlər meydana çıxır. JavaScript vasitəsilə DOM obyektləri üzərində dəyişiklik etmək, CSS siniflərini dinamik olaraq əlavə və ya çıxarmaq mümkündür. Bu inteqrasiya vasitəsilə istifadəçi ilə daha sıx əlaqəli və interaktiv dizaynlar qurulur.

CSS-in gələcəyi və inkişaf istiqamətləri

CSS sahəsində davamlı yeniliklər baş verir. CSS4 kimi qeyri-rəsmi terminlər, dəyişkənliklər, yeni xüsusiyyətlər – məsələn, :has() selektoru, container queries, subgrid kimi anlayışlar, bu sahədə peşəkarların işini daha da zənginləşdirir. Gələcəkdə CSS-in daha çox komponent əsaslı strukturlarla, funksional dizaynlarla işləyəcəyi proqnozlaşdırılır. CSS-in JavaScript kitabxanaları (React, Vue) ilə inteqrasiyası da bu texnologiyanı daha da irəli aparır.

CSS-in mahiyyəti, sadə vizual tənzimləmədən ibarət deyil. Bu texnologiya vebin ruhunu daşıyan, estetik yanaşmanı funksionallıqla birləşdirən bir sistemdir. Onun düzgün tətbiqi saytın vizual dəyərini və istifadəçi təcrübəsini əhəmiyyətli dərəcədə yüksəldir. CSS-i dərindən öyrənmək, yalnız texniki bilik deyil, həm də dizayn hissiyatı və strukturlaşdırma bacarığı tələb edir. Gələcəkdə texnologiyalar daha da inkişaf etdikcə, CSS bilikləri olan mütəxəssislər daha da yüksək tələbatla qarşılaşacaqlar.

Ən Çox Verilən Suallar