CSS: Kaskadlı stil cədvəllərinin əsasları və prinsipləri

Gülər Rəhimli 11 avq 2024

CSS (Cascading Style Sheets) və ya kaskadlı stil cədvəlləri, veb səhifələrin görünüşünü və formatını təsvir etmək üçün bir dildir. CSS, müasir veb dizaynda əsas rol oynayır və tərtibatçılara səhifənin məzmununu (HTML) onun xarici tərtibatından ayırmağa imkan verir. Bu məqalədə CSS-in əsas konsepsiyaları, iş prinsipləri və vacib aspektləri ilə tanış olacağıq.

CSS-in Əsasları

CSS HTML elementlərinin, məsələn, mətn, şəkillər, bloklar və digər veb səhifə elementlərinin stillərini təyin etmək üçün istifadə olunur. Onun köməyi ilə rənglər, şriftlər, kənar boşluqlar, haşiyələr, animasiyalar və digər bir çox vizual aspektlər təyin edilə bilər.

Selektorlar: CSS-də selektorlar, HTML elementlərinə hansı stillərin tətbiq olunacağını müəyyənləşdirmək üçün istifadə olunur. Selektorlar etiketlər, siniflər, identifikatorlar (ID) və ya elementlərin atributları əsasında ola bilər.
- Etiket selektoru: Müəyyən bir növ elementə stil tətbiq edir, məsələn, bütün abzaslara (p { color: blue; }).
- Sinif selektoru: Müəyyən bir sinifə malik olan elementlərə stil tətbiq edir (.class-name { color: green; }).
- ID selektoru: Müəyyən bir identifikatora malik elementə stil tətbiq edir (#id-name { color: red; }).
Xüsusiyyətlər və dəyərlər: CSS, "xüsusiyyət-dəyər(məna)" cütlərindən ibarətdir. Hər bir xüsusiyyət, elementin tərtibatının müəyyən bir aspektinə cavab verir.
- Nümunə: color: blue; — bu, mətni mavi rəngə çevirən color xüsusiyyəti və blue dəyəridir(mənasıdır).

CSS-in Prinsipləri

Kaskadlıq: CSS-in ən vacib prinsiplərindən biri kaskadlıqdır. Bu o deməkdir ki, stillər onların ardıcıllığına, spesifikliyinə və mənşəyinə görə tətbiq olunur.
- Ardıcılıq: Bir neçə stil eyni elementə tətbiq olunarsa, sonuncu tətbiq olunmuş stil üstünlük təşkil edir.
- Spesifiklik: Daha yüksək spesifikliyə malik stillər, daha az spesifik olanlardan üstünlük təşkil edir. Məsələn, ID selektoru, sinif selektorundan daha spesifikdir.
İrsiyyət: CSS xüsusiyyətlərinin çoxu valideyn elementlərindən övlad elementlərə irsən keçir. Bu, səhifənin böyük hissələrinə stillərin tətbiqini asanlaşdırır.
- Nümunə: Əgər siz <body> elementi üçün mətnin rəngini təyin etsəniz, bu rəng <body> daxilindəki bütün elementlərə tətbiq olunacaq, əgər onlar öz rəng dəyərlərinə malik deyilsə.
Blok və xətt modeli: CSS-də iki əsas element növü var: blok (block) və xətt (inline).
- Blok elementləri: Valideyn elementin bütün enini tutur və yeni sətirdən başlayır. Nümunələr: <div>, <p>.
- Xətt elementləri: Yalnız məzmun üçün lazım olan eni tutur və yeni sətir yaratmır. Nümunələr: <span>, <a>.
Flexbox: Bu, elastik dizaynların yaradılması üçün güclü bir vasitədir. Flexbox, konteyner daxilində elementlərin hamarlanmasını və boş məkanın bölüşdürülməsini asanlaşdırır.
- Nümunə: display: flex; istifadə etmək konteyneri flexbox-konteynerə çevirir və onun övlad elementləri flex-elementlərə çevrilir.
Grid (CSS Grid): CSS Grid — mürəkkəb dizaynlar yaratmaq üçün başqa bir vasitədir. Flexbox bir istiqamətdə (sətirlərlə və ya sütunlarla) işlədiyi halda, Grid ikiölçülü dizaynlar yaratmağa imkan verir.
- Nümunə: Konteynerdə display: grid; istifadə etmək sətirləri və sütunları təyin etməyə və sonra elementləri şəbəkədə lazım olan yerlərə yerləşdirməyə imkan verir.

CSS-in Mürəkkəb Texnikaları

Psevdo-siniflər və psevdo-elementlər: Bu vasitələr, elementin vəziyyətinə və ya hissəsinə əsaslanaraq stilləri tətbiq etməyə imkan verir.
- Psevdo-siniflər: Elementlərin vəziyyətinə əsaslanaraq tətbiq edilir, məsələn, mouse-u gəzdirdikdə stilin dəyişdirilməsi üçün :hover.
- Psevdo-elementlər: Elementin bir hissəsinə tətbiq edilir, məsələn, elementin məzmunundan əvvəl və ya sonra məzmun daxil etmək üçün ::before və ya ::after.
Animasiya və keçidlər: CSS, elementlərin vəziyyətləri arasında keçidlər və animasiyalar yaratmağa imkan verir.
- Keçidlər: Müəyyən hadisələrin baş verdiyi zaman CSS xüsusiyyətlərinin dəyərlərinin hamar dəyişdirilməsinə imkan verir, məsələn, transition: all 0.3s ease;.
- Animasiya: Mürəkkəb animasiya effektləri yaratmaq üçün istifadə olunur, məsələn, açar kadrlar (@keyframes) ilə.
Cavablı dizayn (Responsive Design): Saytın cavablılığı, ekranın eni və digər cihaz xüsusiyyətlərindən asılı olaraq stilləri dəyişdirməyə imkan verən media sorğuları (@media) vasitəsilə təmin edilir.
- Nümunə: @media (max-width: 768px) { ... } — bu yalnız ekranın eni 768 piksel və ya daha az olan zaman tətbiq edilir.

CSS, gözəl və funksional veb səhifələrin yaradılması üçün güclü bir vasitədir. O, elementlərin tərtibatı, mürəkkəb dizaynların yaradılması və istifadəçi təcrübəsinin yaxşılaşdırılması üçün çevik imkanlar təqdim edir. CSS-in əsasları və prinsiplərini bilmək hər bir veb tərtibatçısı və veb dizayner üçün vacib bacarıqdır. CSS sayəsində müxtəlif cihazlara və ekranlara uyğunlaşdırılmış unikal və cəlbedici interfeyslər yaratmaq mümkündür ki, bu da onu müasir veb dizaynın ayrılmaz bir hissəsi edir.