Frontend proqramlaşdırmaya başlayanda ilk öyrəndiyimiz texnologiyalardan biri HTML, digəri isə CSS olur. HTML ilə səhifənin strukturunu qururuq, CSS vasitəsilə isə həmin strukturun necə görünəcəyini müəyyən edirik.
Bəs CSS nədir, necə işləyir və real veb saytda nə üçün istifadə olunur?
CSS — Cascading Style Sheets ifadəsinin qısaltmasıdır. Bu, HTML və XML kimi dillərlə yaradılmış sənədlərin necə göstəriləcəyini təsvir edən stylesheet dilidir. Rənglər, ölçülər, boşluqlar, fontlar, elementlərin yerləşməsi və müxtəlif ekran ölçülərinə uyğun görünüş CSS vasitəsilə idarə oluna bilər.
Əgər frontend-ə yeni başlayırsınızsa, əvvəlcə HTML nədir və necə işləyir? yazısını oxumaq CSS-in rolunu daha rahat başa düşməyə kömək edəcək.
CSS nədir?
CSS veb səhifənin vizual görünüşünü idarə etmək üçün istifadə olunan stylesheet dilidir.
Sadə nümunəyə baxaq.
HTML:
<h1>Frontend proqramlaşdırma</h1>
<p>HTML, CSS və JavaScript frontend-in əsasını təşkil edir.</p>
Bu kod səhifənin strukturunu yaradır.
İndi CSS əlavə edək:
h1 {
font-size: 40px;
text-align: center;
}p {
font-size: 18px;
line-height: 1.6;
}
Burada artıq h1 və p elementlərinin necə görünəcəyini müəyyən edirik.
Yəni sadə şəkildə:
HTML → səhifədə nə var?
CSS → həmin elementlər necə görünür?
JavaScript → həmin elementlər necə davranır?
Bu üç texnologiya birlikdə frontend development-in əsas hissəsini təşkil edir. Frontend developer-in nə iş gördüyünü izah etdiyim məqalədə də HTML, CSS və JavaScript-in frontend daxilindəki rollarına ayrıca toxunmuşam.
CSS nə üçün istifadə olunur?
CSS yalnız saytın rəngini dəyişmək üçün istifadə edilmir.
Real layihədə CSS vasitəsilə səhifənin demək olar ki, bütün vizual hissəsini idarə etmək mümkündür.
Məsələn:
- mətnlərin ölçüsü və fontu;
- rənglər;
- background;
- elementlər arasındakı boşluqlar;
- border və radius;
- button dizaynı;
- kartların yerləşməsi;
- navbar;
- grid strukturu;
- mobil görünüş;
- animasiyalar;
- hover effektləri.
Sadə bir button nümunəsi:
<button class="contact-button">Əlaqə saxla</button>
CSS:
.contact-button {
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
}
HTML button-un səhifədə mövcud olduğunu müəyyən edir. CSS isə onun vizual görünüşünü formalaşdırır.
CSS necə işləyir?
CSS-də əsas məntiq üç hissədən ibarətdir:
selector {
property: value;
}
Məsələn:
h2 {
font-size: 32px;
}
Burada:
- h2 — selector,
- font-size — property,
- 32px — value-dur.
Brauzer bu qaydanı oxuyur və uyğun gələn h2 elementlərinə həmin stili tətbiq edir.
Bir elementə eyni anda bir neçə stil də vermək mümkündür:
h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
}
CSS öyrənərkən sintaksisi əzbərləməkdən daha vacib olan məsələ selector, property və value arasındakı məntiqi başa düşməkdir.
CSS-i HTML-ə necə əlavə etmək olar?
CSS-i səhifəyə bir neçə üsulla əlavə etmək mümkündür.
Inline CSS
Stil birbaşa HTML elementinin daxilində yazılır:
<p style="font-size: 18px;">Salam dünya!</p>
Kiçik testlər üçün işləyə bilər, amma böyük layihələrdə idarə etmək çətinləşir.
Internal CSS
CSS HTML sənədinin <style> elementi daxilində yazılır:
<head>
<style>
p {
font-size: 18px;
}
</style>
</head>
External CSS
Stil ayrıca .css faylında saxlanılır:
<link rel="stylesheet" href="style.css">
style.css:
p { font-size: 18px; }
Layihə böyüdükcə CSS-i ayrıca fayllarda və ya istifadə olunan frontend arxitekturasına uyğun şəkildə idarə etmək kodun təşkilini asanlaşdıra bilər.
CSS selector nədir?
Selector CSS qaydasının hansı HTML elementinə tətbiq ediləcəyini müəyyən edir.
Məsələn:
p { line-height: 1.6; }
Burada bütün p elementləri seçilir.
Class ilə:
<p class="intro">Frontend haqqında giriş mətni</p>
.intro { font-size: 20px; }
ID ilə:
<section id="portfolio"></section>
#portfolio { padding: 80px 0; }
Başlanğıc mərhələsində element, class və ID selector-larını başa düşmək CSS-lə işləmək üçün yaxşı bazadır.
CSS class və ID arasındakı fərq nədir?
Yeni başlayanların tez-tez qarışdırdığı mövzulardan biri class və id fərqidir.
Class eyni stil və ya davranış qrupunu bir neçə elementdə istifadə etmək üçün əlverişlidir:
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
.card {
padding: 20px;
border-radius: 12px;
}
Eyni .card qaydası üç elementə də tətbiq edilir.
id isə sənəd daxilində konkret elementi identifikasiya etmək üçün nəzərdə tutulur:
<section id="contact">
...
</section>
CSS yazarkən hər elementə ID vermək əvəzinə təkrar istifadə edilə bilən komponentlər üçün class-lardan istifadə etmək çox vaxt daha rahat struktur yaradır.
CSS Box Model nədir?
CSS öyrənərkən başa düşülməsi vacib mövzulardan biri Box Model-dir.
Brauzer səhifədəki elementləri müəyyən mənada düzbucaqlı sahələr kimi hesablayır.
Bu sahənin əsas hissələri:
- Content — elementin əsas məzmunu.
- Padding — məzmun ilə border arasındakı daxili boşluq.
- Border — elementin sərhədi.
- Margin — elementin xaricindəki boşluq.
Məsələn:
.card {
width: 300px;
padding: 20px;
border: 1px solid;
margin-bottom: 24px;
}
Layout problemlərinin bir hissəsi məhz elementin real ölçüsünün necə hesablandığını düzgün anlamamaqdan yaranır.
Praktik layihələrdə tez-tez belə qayda da görəcəksiniz:
* {
box-sizing: border-box;
}
border-box istifadə edildikdə təyin edilən width və height hesablanarkən padding və border həmin ölçünün daxilində nəzərə alınır.
Flexbox nədir?
Flexbox elementləri bir istiqamət üzrə yerləşdirmək və aralarındakı məsafəni idarə etmək üçün çox istifadə olunan CSS layout sistemlərindən biridir.
Məsələn, navbar daxilində logo və menyunu yerləşdirək:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
Burada:
- display: flex — flex layout-u aktiv edir;
- justify-content — əsas ox üzrə yerləşməni idarə edir;
- align-items — digər ox üzrə elementlərin düzülüşünü idarə edir.
Kartlar, navbar, button qrupları və bir çox komponentdə Flexbox praktik seçimdir.
CSS Grid nədir?
Grid daha çox sətir və sütunlardan ibarət layout-lar yaratmaq üçün istifadə olunur.
Məsələn:
.projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
Bu nümunədə layihələri üç sütunda yerləşdiririk.
Grid və Flexbox bir-birinin alternativi olmaq məcburiyyətində deyil. Real layihədə hər ikisindən ehtiyaca uyğun istifadə etmək mümkündür.
Məsələn, səhifənin ümumi kart grid-i CSS Grid ilə, kartın daxilindəki elementlərin düzülüşü isə Flexbox ilə qurula bilər.
Responsive dizayn CSS ilə necə qurulur?
Sayt yalnız kompüter ekranında düzgün görünürsə, iş tamamlanmış sayılmır.
İstifadəçi eyni səhifəni:
- telefondan;
- planşetdən;
- notebook-dan;
- böyük monitordan
aça bilər.
Responsive web design müxtəlif ekran və cihaz şəraitinə uyğunlaşan layout yaratmaq yanaşmasıdır. Müasir CSS layout imkanları bunun üçün bir çox vasitə verir.
CSS-də bunun üçün istifadə olunan alətlərdən biri media query-dir:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
Böyük ekranda üç sütun olan layout burada daha dar viewport-da bir sütuna keçir. Media queries viewport və cihaz xüsusiyyətlərinə əsasən CSS qaydalarını şərti şəkildə tətbiq etməyə imkan verir və responsive design üçün əsas alətlərdən biridir.
Amma responsive dizayn yalnız media query yazmaq demək deyil. Flexible layout, uyğun ölçü vahidləri, responsive şəkillər və düzgün komponent strukturu da nəzərə alınmalıdır.
CSS və SEO arasında əlaqə varmı?
CSS birbaşa səhifənin məzmununu müəyyən edən dil deyil, amma frontend implementation istifadəçi təcrübəsinə və texniki performansa təsir edə bilər.
Məsələn, zəif hazırlanmış frontend nəticəsində:
- mobil görünüş pozula bilər;
- mətn oxumaq çətinləşə bilər;
- səhifədə layout problemləri yarana bilər;
- lazımsız böyük CSS faylları performansa təsir edə bilər;
- vacib məzmun istifadəçiyə əlverişsiz formada təqdim oluna bilər.
SEO ilə frontend-i ayrı-ayrı iki dünya kimi görmək əvəzinə, texniki implementasiyanın istifadəçiyə və səhifənin işləməsinə necə təsir etdiyini birlikdə nəzərə almaq daha düzgündür.
Saytdakı portfolio layihələrində HTML, CSS, JavaScript, responsive development və SEO işlərinin birlikdə tətbiq olunduğu real nümunələr var. Məsələn, Dam Yağmuru layihəsində HTML, CSS/Bootstrap və JavaScript ilə responsive frontend işi görülüb.
CSS öyrənərkən ən çox edilən səhvlər
Hər şeyə sabit ölçü vermək
Belə yanaşma:
.container {
width: 1200px;
}
kiçik ekranlarda problem yarada bilər.
Kontekstdən asılı olaraq max-width, faiz, rem, Grid və Flexbox kimi daha elastik həllərdən istifadə etmək mümkündür.
Hər problemi !important ilə həll etmək
.title {
font-size: 30px !important;
}
!important bəzi hallarda lazım ola bilər, amma onu hər specificity problemində istifadə etmək CSS-in idarəsini çətinləşdirə bilər. Əvvəlcə selector-ların niyə bir-birini override etdiyini anlamaq daha sağlam yanaşmadır.
CSS specificity-ni başa düşməmək
Bəzən developer stil yazır, amma brauzerdə dəyişiklik görünmür. Səbəb çox vaxt başqa CSS qaydasının həmin stili override etməsidir. CSS-də hansı qaydanın tətbiq ediləcəyini anlamaq üçün cascade, inheritance və specificity anlayışlarını mərhələli şəkildə öyrənmək lazımdır.
Yalnız desktop üçün dizayn etmək
Səhifəni 1920px monitorda hazırlayıb mobil versiyanı sonda düşünmək əlavə problemlər yarada bilər. Mobil və desktop görünüşləri development prosesi boyunca test etmək daha düzgündür.
HTML strukturundakı problemi CSS ilə gizlətmək
Bəzən problem CSS-də deyil, HTML strukturundadır. Məsələn, səhv parent-child strukturu və ya lazımsız wrapper-lər layout-u çətinləşdirə bilər.
Buna görə CSS öyrənərkən HTML-i də yaxşı başa düşmək vacibdir. HTML üzrə başlanğıc bələdçisində bu strukturun əsaslarını ayrıca izah etmişəm.
CSS öyrənmək üçün hansı ardıcıllıqla getmək lazımdır?
Yeni başlayırsınızsa, bütün CSS xüsusiyyətlərini eyni anda öyrənməyə çalışmaq lazım deyil.
Praktik ardıcıllıq belə ola bilər:
- CSS sintaksisi və selector-lar- Əvvəlcə selector, property və value məntiqini başa düşün.
- Rəng, font və mətn stilləri- color, font-size, font-weight, line-height kimi əsas xüsusiyyətləri öyrənin.
- Box Model- margin, padding, border, width, height və box-sizing anlayışlarını praktikada yoxlayın.
- Flexbox- Sadə navbar, kart və iki sütunlu layout hazırlayın.
- Grid - Kart grid-ləri və daha mürəkkəb səhifə strukturları yaradın.
- Responsive design - Eyni səhifənin telefon, planşet və desktop görünüşünü hazırlayın.
- Kiçik real layihələr - Landing page, portfolio və ya blog səhifəsi hazırlayın.
Frontend müsahibələrinə hazırlaşırsınızsa, CSS əsaslarını öyrəndikdən sonra Frontend müsahibə sualları məqaləsində Flexbox, Grid, Box Model və digər frontend mövzularını təkrar edə bilərsiniz.
CSS öyrəndikdən sonra nə öyrənmək lazımdır?
HTML və CSS ilə statik və responsive interfeyslər hazırlamaq mümkündür. Növbəti əsas mərhələ JavaScript-dir.
JavaScript vasitəsilə səhifəyə interaktivlik əlavə edə bilərsiniz:
- menyunu açıb bağlamaq;
- modal göstərmək;
- form məlumatını yoxlamaq;
- API-dən məlumat almaq;
- istifadəçinin hərəkətlərinə reaksiya vermək.
Daha sonra React kimi JavaScript əsaslı alətlərə keçmək mümkündür.
Yəni başlanğıc üçün məntiqli ardıcıllıq belə qalır:
HTML → CSS → JavaScript → React
Nəticə
CSS nədir sualına qısa cavab versək, CSS HTML ilə qurulan veb səhifənin təqdimatını və vizual görünüşünü idarə edən stylesheet dilidir.
CSS vasitəsilə rəng və font dəyişməkdən daha çox iş görmək mümkündür. Layout, boşluqlar, responsive görünüş, Flexbox, Grid və müxtəlif UI komponentlərinin vizual davranışı CSS-in əsas istifadə sahələrindəndir.
CSS öyrənməyin ən effektiv yolu yalnız property-ləri əzbərləmək deyil. HTML ilə kiçik bir səhifə qurun, sonra onu CSS vasitəsilə desktop və mobil görünüşə uyğunlaşdırın. Bu zaman Box Model, Flexbox, Grid və responsive design kimi anlayışların niyə lazım olduğunu praktik şəkildə görəcəksiniz.
Frontend sahəsində davam etmək istəyirsinizsə, növbəti mərhələ JavaScript-in nə olduğunu və səhifəyə necə interaktivlik əlavə etdiyini öyrənməkdir.
Tez-tez verilən suallar
CSS nədir?
CSS, yəni Cascading Style Sheets, HTML və digər markup dilləri ilə yaradılmış sənədlərin vizual görünüşünü idarə etmək üçün istifadə olunan stylesheet dilidir.
CSS nə üçün istifadə olunur?
CSS rəng, font, ölçü, boşluq, border, layout, responsive görünüş, animasiya və digər vizual xüsusiyyətləri idarə etmək üçün istifadə olunur.
HTML və CSS arasındakı fərq nədir?
HTML səhifənin məzmununu və strukturunu yaradır, CSS isə həmin strukturun necə görünəcəyini müəyyən edir.
CSS selector nədir?
CSS selector stil qaydasının hansı HTML elementinə və ya elementlər qrupuna tətbiq ediləcəyini müəyyən edən hissədir.
CSS Flexbox nədir?
Flexbox elementlərin bir istiqamət üzrə yerləşdirilməsini, hizalanmasını və aralarındakı boşluğun idarə edilməsini asanlaşdıran CSS layout sistemidir.
CSS Grid nədir?
CSS Grid sətir və sütunlardan ibarət ikiölçülü layout-ların qurulması üçün istifadə olunan CSS layout sistemidir.
CSS ilə responsive sayt hazırlamaq mümkündür?
Bəli. Flexible layout-lar, uyğun ölçü vahidləri və media queries kimi CSS imkanları ilə səhifənin müxtəlif ekran ölçülərinə uyğun görünüşünü qurmaq mümkündür.
CSS öyrəndikdən sonra nə öyrənmək lazımdır?
HTML və CSS əsaslarından sonra JavaScript öyrənmək məntiqlidir. JavaScript səhifəyə interaktivlik və dinamik davranış əlavə etməyə imkan verir.
