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. Azərbaycan dilində “Kaskad Stil Cədvəlləri” kimi ifadə olunur. CSS vasitəsilə veb səhifədə yerləşən elementlərin rəngini, ölçüsünü, şriftini, aralarındakı boşluqları, düzülüşünü və digər vizual xüsusiyyətlərini müəyyən etmək mümkündür. Sadə dillə desək, HTML veb saytın skeletini yaradırsa, CSS həmin skeletin necə görünəcəyini müəyyən edir. Məsələn, HTML vasitəsilə səhifəyə başlıq, mətn, şəkil və düymə əlavə edilir. CSS isə həmin başlığın hansı rəngdə olacağını, mətnin ölçüsünü, düymənin formasını və elementlərin ekranda necə yerləşəcəyini idarə edir. CSS müasir veb proqramlaşdırmanın əsas texnologiyalarından biridir. Xüsusilə Frontend proqramlaşdırmada HTML və JavaScript ilə birlikdə istifadə olunur.

CSS nə üçün istifadə olunur?

CSS-in əsas məqsədi veb səhifələrin vizual görünüşünü formalaşdırmaq və dizaynını idarə etməkdir. CSS olmadan HTML səhifəsi əsasən brauzerin standart görünüş qaydaları ilə təqdim olunur.

CSS vasitəsilə aşağıdakı əməliyyatları yerinə yetirmək mümkündür:

• Mətnlərin rəngini, ölçüsünü və şriftini dəyişmək.
• Səhifənin fon rəngini və fon şəklini müəyyən etmək.
• Düymələrin, menyuların və digər elementlərin dizaynını hazırlamaq.
• Elementlər arasındakı məsafəni tənzimləmək.
• Səhifənin ümumi düzülüşünü qurmaq.
• Animasiya və keçid effektləri əlavə etmək.
• Saytı mobil telefon, planşet və kompüter ekranlarına uyğunlaşdırmaq.

Məsələn, onlayn mağazanın məhsul kartlarını düşünün. Məhsul şəkli, adı və qiyməti HTML vasitəsilə strukturlaşdırılır. CSS isə həmin kartın ölçüsünü, fonunu, kənarlarını və digər məhsul kartları ilə yanaşı necə yerləşəcəyini müəyyən edir. Bu xüsusiyyət CSS-i həm sadə veb səhifələrdə, həm də böyük və mürəkkəb veb tətbiqlərdə vacib texnologiyaya çevirir.

CSS necə işləyir?

CSS müəyyən HTML elementlərini seçərək onlara stil qaydaları tətbiq edir. Brauzer HTML sənədini emal etdikdən sonra ona uyğun CSS qaydalarını da oxuyur və elementləri həmin qaydalara əsasən göstərir. CSS kodu əsasən üç hissədən ibarətdir: Selector, Property və Value. Selector stil tətbiq ediləcək elementi müəyyən edir. Property dəyişdiriləcək xüsusiyyəti, Value isə həmin xüsusiyyətin qiymətini göstərir.

Məsələn, p { color: blue; } qaydası səhifədəki abzas elementlərinin mətn rəngini mavi edir. Burada p selector, color property, blue isə value hesab olunur. Eyni prinsipdən istifadə edərək HTML elementlərinə bir neçə stil xüsusiyyəti əlavə etmək mümkündür. Bunun sayəsində veb səhifənin bütün vizual görünüşü CSS vasitəsilə idarə olunur.

CSS HTML sənədinə necə əlavə olunur?

CSS kodlarını HTML səhifəsinə əlavə etməyin üç əsas üsulu var.

Inline CSS — stil qaydası birbaşa HTML elementinin style atributunda yazılır. Bu üsul kiçik dəyişikliklər üçün istifadə oluna bilər, lakin böyük layihələrdə idarəetməni çətinləşdirir.

Internal CSS — stil qaydaları HTML sənədinin head hissəsində yerləşdirilən style elementi daxilində yazılır.

External CSS — bütün stil qaydaları ayrıca .css faylında saxlanılır və HTML sənədinə link elementi vasitəsilə qoşulur.

Məsələn, layihədə style.css adlı fayl yaradaraq səhifənin bütün dizayn qaydalarını həmin faylda saxlamaq mümkündür. External CSS xüsusilə bir neçə səhifədən ibarət layihələrdə faydalıdır. Çünki eyni CSS faylını müxtəlif HTML səhifələrinə qoşmaq və dizaynda edilən dəyişiklikləri mərkəzləşdirilmiş şəkildə idarə etmək olur.

CSS Selector nədir?

CSS Selector stil tətbiq ediləcək HTML elementlərini seçmək üçün istifadə olunan ifadədir. CSS-də müxtəlif selector növləri mövcuddur.

Element Selector: Müəyyən HTML teqinə aid bütün elementləri seçir. Məsələn, p selector-u bütün abzaslara stil tətbiq edə bilər.

Class Selector: Eyni class adına sahib elementləri seçir. Məsələn, .button selector-u button class-ına malik elementlərə tətbiq olunur.

ID Selector: Müəyyən ID-yə sahib elementi seçir. Məsələn, #header selector-u header ID-sinə malik elementi hədəfləyir.

Pseudo-class Selector: Elementin müəyyən vəziyyətinə əsasən stil tətbiq edir. Məsələn, :hover istifadəçi siçan göstəricisini elementin üzərinə gətirdikdə müvafiq stilin tətbiq olunmasına imkan verir. Selector-ların düzgün istifadəsi CSS kodunun daha səliqəli yazılmasına və böyük layihələrdə dizaynın rahat idarə olunmasına kömək edir.

CSS-də Cascading nə deməkdir?

CSS sözündəki Cascading anlayışı stil qaydalarının müəyyən prioritetlərə əsasən tətbiq olunmasını ifadə edir. Bəzən eyni HTML elementi üçün bir neçə fərqli CSS qaydası yazıla bilər. Belə hallarda brauzer hansı qaydanın tətbiq olunacağını kaskad mexanizmi vasitəsilə müəyyən edir. Bu prosesdə qaydanın mənbəyi, əhəmiyyət səviyyəsi, tətbiq olunma konteksti, selector-un spesifikliyi (specificity) və müvafiq hallarda yazılma ardıcıllığı nəzərə alınır. Məsələn, bir abzas üçün həm ümumi p, həm də .description selector-u ilə rəng təyin edilərsə, eyni kaskad səviyyəsində daha spesifik olan class selector-u üstünlük qazana bilər. Cascading məntiqini başa düşmək CSS kodunda gözlənilməz stil dəyişikliklərinin səbəbini müəyyən etmək üçün vacibdir.

CSS Box Model nədir?

CSS Box Model HTML elementlərinin brauzerdə nə qədər yer tutduğunu izah edən əsas anlayışlardan biridir. Hər bir element müəyyən qutu modeli əsasında təsvir edilə bilər. Bu model dörd əsas hissədən ibarətdir:

Content — elementin əsas məzmunudur. Mətn və şəkil kimi məlumatlar burada yerləşir.

Padding — məzmunla elementin sərhədi arasındakı daxili boşluqdur.

Border — elementin ətrafında yerləşən sərhəddir.

Margin — elementin xaricində digər elementlərlə məsafə yaratmaq üçün istifadə olunan boşluqdur.

Məsələn, məhsul kartının içərisindəki mətnlə kartın kənarı arasındakı məsafə padding, iki məhsul kartı arasındakı xarici boşluq isə margin vasitəsilə tənzimlənə bilər. Box Model CSS öyrənərkən mütləq başa düşülməli mövzulardandır. Çünki səhifədə elementlərin ölçüləri və yerləşməsi birbaşa bu məntiqlə əlaqəlidir.

CSS-də Margin və Padding arasında fərq nədir?

Margin və Padding tez-tez qarışdırılan CSS xüsusiyyətləridir. Hər ikisi boşluq yaratmaq üçün istifadə edilsə də, funksiyaları fərqlidir. Margin elementin xaricində məsafə yaradır. Padding isə elementin məzmunu ilə sərhədi arasında daxili boşluğu müəyyən edir. Məsələn, bir düymənin içərisindəki yazının düymənin kənarlarına çox yaxın görünməməsi üçün padding istifadə olunur. Həmin düymə ilə onun yanında yerləşən başqa element arasında məsafə yaratmaq lazım gəldikdə isə margin istifadə edilə bilər. Bu fərqi başa düşmək interfeyslərin düzgün hazırlanması üçün əsas bacarıqlardan biridir.

CSS Flexbox nədir?

Flexbox — HTML elementlərini bir istiqamət üzrə çevik şəkildə yerləşdirməyə imkan verən CSS layout sistemidir. Flexbox vasitəsilə elementləri üfüqi və ya şaquli istiqamətdə düzmək, aralarındakı məsafəni tənzimləmək, mərkəzləşdirmək və mövcud sahəyə uyğun yerləşdirmək mümkündür. Məsələn, veb saytın yuxarı hissəsində loqo və menyunun eyni sətirdə yerləşdirilməsi, düymələrin yan-yana düzülməsi və ya məhsul kartlarının müəyyən ardıcıllıqla göstərilməsi üçün Flexbox istifadə oluna bilər. Flexbox xüsusilə interfeysin bir istiqamət üzrə təşkil edilməsi üçün rahat yanaşmadır.

CSS Grid nədir?

CSS Grid — veb səhifədə elementlərin sətir və sütunlardan ibarət struktur üzrə yerləşdirilməsi üçün istifadə olunan layout sistemidir. Grid vasitəsilə daha mürəkkəb səhifə düzülüşləri yaratmaq mümkündür. Məsələn, üç sütundan ibarət məhsul kataloqu, fərqli ölçülü kartların yerləşdiyi dashboard və ya əsas məzmunla yan paneldən ibarət sayt strukturu Grid vasitəsilə hazırlana bilər. Flexbox əsasən bir istiqamətli yerləşdirmədə, Grid isə iki istiqamətli — sətir və sütun üzrə düzülüşlərdə istifadə olunur. Bu iki texnologiya bir-birini əvəz etmək məcburiyyətində deyil. Müasir veb layihələrdə Flexbox və Grid çox vaxt birlikdə istifadə edilir.

Responsive Design nədir?

Responsive Design — veb səhifənin müxtəlif ekran ölçülərinə uyğunlaşmasını təmin edən dizayn yanaşmasıdır. İstifadəçilər saytlara kompüter, planşet və mobil telefon kimi fərqli cihazlardan daxil olurlar. Eyni səhifənin bütün ekranlarda rahat görünməsi üçün elementlərin ölçüləri və yerləşməsi uyğunlaşdırılmalıdır. CSS-də responsiv dizayn hazırlamaq üçün çevik ölçülər, Flexbox, Grid və Media Query kimi imkanlardan istifadə olunur. Məsələn, kompüter ekranında üç sütun şəklində yerləşən məhsul kartları mobil telefonda bir sütun şəklində göstərilə bilər. Media Query vasitəsilə müəyyən ekran xüsusiyyətlərinə uyğun CSS qaydaları tətbiq etmək mümkündür. Responsiv dizayn istifadəçinin müxtəlif cihazlarda saytdan rahat istifadə etməsinə kömək edir.

CSS3 nədir?

CSS3 CSS texnologiyasının inkişafında geniş istifadə olunan tarixi versiya adıdır. Flexbox, animasiya və digər müasir dizayn imkanlarının inkişafı ilə birlikdə bu anlayış daha geniş yayılıb. Lakin CSS artıq vahid CSS3 və CSS4 versiyaları şəklində inkişaf etdirilmir. Müasir CSS standartı ayrı-ayrı modullar əsasında yenilənir. Buna görə bu gün CSS öyrənərkən konkret bir versiya nömrəsindən daha çox onun müasir xüsusiyyətlərini və brauzer dəstəyini başa düşmək vacibdir.

CSS Framework nədir?

CSS Framework veb interfeyslərin hazırlanmasını asanlaşdıran hazır stil qaydaları, komponentlər və ya utility class-lar təqdim edən alətlər toplusudur. Məsələn, Bootstrap hazır düymələr, formalar, grid sistemi və digər interfeys komponentləri təqdim edir. Tailwind CSS isə utility-first yanaşmasına əsaslanır. Bu yanaşmada rəng, ölçü, boşluq və digər xüsusiyyətlər üçün hazır CSS class-larından istifadə olunur. Belə alətlər dizayn prosesini sürətləndirə və təkrarlanan CSS kodlarının yazılması ehtiyacını azalda bilər. Bununla belə, CSS Framework-lərlə işləməzdən əvvəl CSS-in əsaslarını, selector-ları, Box Model, Flexbox və Grid məntiqini başa düşmək faydalıdır.

CSS və JavaScript arasında fərq nədir?

CSS və JavaScript veb səhifələrdə fərqli məqsədlər üçün istifadə olunur. CSS səhifənin görünüşünü, elementlərin yerləşməsini, rəngləri, ölçüləri, animasiyaları və vizual vəziyyətlərini idarə edir.

JavaScript isə proqramlaşdırma məntiqi və interaktiv funksionallıq yaratmağa imkan verir. Məsələn, düymənin rəngini, ölçüsünü və üzərinə gəldikdə necə görünəcəyini CSS vasitəsilə müəyyən etmək olar. Həmin düyməyə klik etdikdə serverdən məlumat alınmasını və ya səhifədə yeni məzmun göstərilməsini isə JavaScript vasitəsilə həyata keçirmək mümkündür. Bu səbəbdən HTML, CSS və JavaScript müasir Frontend proqramlaşdırmanın bir-birini tamamlayan əsas texnologiyaları hesab olunur.

CSS istifadə edərkən ən çox edilən səhvlər hansılardır?

CSS öyrənənlərin qarşılaşdığı əsas çətinliklərdən biri elementlərə tətbiq edilən qaydaların gözlənilən nəticəni verməməsidir. Buna yanlış selector istifadəsi, specificity qaydalarının nəzərə alınmaması, element ölçülərinin düzgün hesablanmaması və ya mövcud stillərin bir-birinə təsir etməsi səbəb ola bilər. Digər geniş yayılmış səhvlərdən biri responsiv dizaynı nəzərə almadan bütün ölçüləri sabit piksel dəyərləri ilə təyin etməkdir. Belə hallarda səhifə kompüter ekranında düzgün görünsə də, kiçik ekranlarda elementlər yerləşmə sahəsindən kənara çıxa bilər. Bu problemləri müəyyən etmək üçün brauzerin Developer Tools alətlərindən istifadə etmək mümkündür. CSS kodundakı xətaların aşkar edilməsi və düzəldilməsi də proqramlaşdırmada Debugging prosesinin bir hissəsidir.

CSS necə öyrənilir?

CSS öyrənmək üçün ilk növbədə HTML haqqında əsas biliklərə sahib olmaq faydalıdır. Çünki CSS qaydaları HTML elementlərinə tətbiq olunur. Başlanğıc mərhələdə selector, property, value, rənglər, şriftlər, ölçü vahidləri, margin, padding və Box Model mövzularını öyrənmək tövsiyə olunur. Daha sonra Flexbox, Grid, position, Media Query və responsiv dizayn kimi mövzulara keçmək olar. CSS-i yalnız nəzəri formada öyrənmək əvəzinə kiçik praktik layihələr hazırlamaq daha faydalıdır. Məsələn, şəxsi portfolio səhifəsi, məhsul kartı, naviqasiya menyusu və ya mobil uyğun landing page hazırlamaqla bilikləri möhkəmləndirmək mümkündür. CSS-dən sonra JavaScript, React və digər müasir veb texnologiyalarına keçərək Frontend sahəsində biliklərinizi genişləndirə bilərsiniz.

Frontend öyrənmə ardıcıllığı haqqında daha ətraflı məlumat üçün Frontend proqramçı olmaq üçün nədən başlamaq lazımdır? məqaləsi ilə tanış olun.

Əgər siz də HTML, CSS, JavaScript, React və digər müasir veb texnologiyalarını praktik layihələr üzərində öyrənmək istəyirsinizsə, JET Academy-də keçirilən Frontend Proqramlaşdırma Təlimi ilə tanış ola bilərsiniz.