Yuxarıdakı kodun izahı: Bu kod, ekranın genişliği 600 pikseldən böyük, 900 pikseldən kiçik olduğu durumlarda .container sınıfına sahip HTML elementlərinin üzərinə tətbiq olunan CSS qaydalarını tanımlayır.
@media screen and (max-width: 900px) and (min-width: 600px) ifadəsi, sadece ekran genişliği 600 pikseldən böyük, 900 pikseldən kiçik olduğu zaman CSS qaydalarının tətbiq edilməsini bildirir. screen ifadəsi, media tipini ekran olaraq təyin edir.
.container seçiciyi, HTML sənədindəki .container sınıfına sahip elementlərin stilini təyin edir.
İstifadə olunan CSS qaydaları:
font-size: 50px;: .container elementinin mətninin şrift ölçüsünü 50 pikselə təyin edir.
padding: 50px;: .container elementinin içindəki məzmunun etrafına 50 piksellik boşluq əlavə edir.
border: 8px solid black;: .container elementinə 8 piksellik qara sərhəd əlavə edir.
background: yellow;: .container elementinin arxa fonunu sarı rəngə təyin edir.
Xülasə, bu kod hissəsi, ekran genişliği 600 ilə 900 piksel arasında olan cihazlarda .container elementlərinin böyük bir şrift ölçüsü, geniş boşluq, qara sərhəd və sarı arxa fon ilə göstərilməsini təmin edir. Bu, orta ölçülü cihazlar üçün görsəmə üslubunu tənzimləyir və veb səhifəni responsiv şəkildə düzəltməyə kömək edir.
33.
CSS-də Grid izah edin. Flexbox və Grid fərqlərini açıqlayın. Aşağıdakı kod nümunəsini izah edin.
CSS Grid, web səhifələrinin layoutlarını düzəltmək üçün yeni bir CSS modulu kimi yaradılmışdır. Bu modul, elementlərin təqdimatını, yerləşməsini və hərəkətini rahat şəkildə idarə etmək üçün əlverişli bir yol təqdim edir.
CSS Grid, əsasən xüsusi bir elementi olan "grid-container" və "grid-item"lardan ibarətdir. "Grid-container", bütün grid elementlərini içərisində saxlayan ana səhifədir. Bu elementə "display: grid;" CSS xüsusiyyəti verilir. "Grid-item"lar, ana səhifə içərisindəki bütün elementlərdir və hər hansı bir CSS Grid layoutundakı yerləşmələrə uyğun olaraq yerləşir. Grid elementlərinin hamısı bu "grid-item"lardır.
CSS Grid, elementlərin yerləşməsini üçün iki əsas mərhələni təklif edir: "grid-template-columns" və "grid-template-rows". Bu iki xüsusiyyət, grid elementlərinin sütun və sətirlərinin həcmi və genişliyini təyin edir. Buna görə də CSS Grid, məhdudiyyətləri asanlaşdıraraq, kompleks səhifə layoutlarına imkan verir.
Flexbox və Grid, hər ikisi də CSS-də düzənləmə sistemləri olmasına baxmayaraq, fərqli məqsədlər üçün istifadə edilirlər:
Flexbox, bir element və ya element qrupunu bir sətir və ya sütun üzərində tənzimləmək üçün istifadə olunur. Flexbox, daha sadə düzənləmə və əlavə elementləri diqqətə almaq üçün yararlıdır. Flexbox, çox yönlülük təmin edir və responsive düzənləmə problemlərinə yaxşı bir həll təqdim edir.
Grid, daha kompleks düzənləmələr üçün istifadə olunur və əlavə xüsusiyyətlər tələb edən şəkildə bölgələndirməyə imkan verir. Grid, həm sətir həm də sütun istiqamətində elementləri düzənləmək üçün istifadə edilir. Grid, kompleks məzmun strukturlarının yaradılması üçün daha çox imkan təqdim edir.
Əsas fərqlər:
Flexbox, bir sətir və ya sütun üzərində elementləri düzənləmək üçün sadədir, Grid isə elementlərin həm sətir həm də sütun istiqamətində düzənlənməsinə imkan verir.
Grid, daha kompleks düzənləmələr üçün daha çox imkan təqdim edir və bölgələndirməyə daha yaxınlaşır.
Flexbox, bir element və ya element qrupunu tənzimləmək üçün daha optimal seçimdir və daha sadə düzənləmə problemləri üçün daha yaxşı işləyir.
Grid, kompleks məzmun strukturlarının yaradılması və bölgələndirmədə daha yaxşı imkanlar təqdim edir.
Flexbox, elementlər arasında məkan bölgələndirməsinə daha yaxşı uyğun gəlir, Grid isə elementləri qlobal şəkildə bölgələndirmək üçün daha yararlıdır.
34.
SASS nədir və nə üçün istifadə olunur? Üstünlükləri nələrdir? CSS ilə fərqlərini kodlarla izah edin.
Aşağıdakı css kod nümunəsini scss koduna çevirin.
Sass (Syntactically Awesome Style Sheets), CSS preprocessoru kimi tanınan bir açıq mənbəli CSS dilidir. Sass, standart CSS sintaksisindən daha çox funksionalıq və effektivliyi təmin edir. Sass, CSS stil saytlarını idarə edərkən müxtəlif imkanlar təklif edir, örnək üçün:
Sass, dəyişənlər istifadə etməyə imkan verir və bu, CSS yazarkən mümkün olmayan bir çox funksinallığı təmin edir.
Sass, funksiyalar və mixinlər kimi CSS-in dəstəkləmədiyi əlavə funksionalıqları təmin edir.
Sass, nesting strukturu dəstəkləyir, daxili seçicilərə (inner selectors) işlətməklə kodu daha qısa və oxunaqlı edir.
Sass quraşdırın
Sass-ı sisteminizdə quraşdırmağın bir neçə yolu var. Mac, Windows və Linux üçün bir neçə dəqiqə ərzində sizi Sass ilə işə salacaq bir çox proqram var. Visual Studio Code-da Sass extensionu ilə, istifadə etmək mümkündür.
Sass variables, Sass dilində CSS xüsusiyyətlərinə mənimsədilmiş dəyişənlərdir. Bu, bir dəyişənin dəyərini bir yerə yazaraq, CSS stil saytlarındakı bütün istifadələrdən asanlıqla dəyişdirə biləcəyiniz anlamına gəlir.
Sass variables, Sass dilində CSS xüsusiyyətlərinə mənimsədilmiş dəyişənlərdir. Bu, bir dəyişənin dəyərini bir yerə yazaraq, CSS stil saytlarındakı bütün istifadələrdən asanlıqla dəyişdirə biləcəyiniz anlamına gəlir.
Sass nesting, Sass dilində CSS seçicilərini (nested) şəkildə yazmağı təmin edən funksionalıqlardan biridir. Bu, seçicilərin bir-birinin daxilindəki seçicilərə görə qruplandırılmasına imkan verir. Sass nesting, CSS stil saytlarının yazılmasını daha səmərəli edir və daha oxunaqlı bir kod yaradır.
@import direktivi bir faylın məzmununu digərinə daxil etməyə imkan verir. Digər sözlə, @import ilə, bir faylın daxilində başqa bir faylın kodunu daxil etmək olar.
Partials (hissələr), Sass-da faylın adının başına "_" (alt vurğu) əlavə edilmiş fayllardır. Partials, Sass faylında böyük bir proyektə daxil olan kodun hissələrinin saxlanılmasına imkan verir.
@mixin direktivi sizə vebsaytda təkrar istifadə ediləcək CSS kodu yaratmağa imkan verir.
@include direktivi mixindən istifadə etmək (daxil etmək) üçün yaradılmışdır
@extend əmri, CSS-də mövcud olan seçicilərin özəlliklərini digər seçicilərə genişləndirmək üçün istifadə olunur. Bu, təkrarlanan kod hissələrini azaltmağa və CSS kodunun yığılmasını azaltmağa kömək edir.
@extend ilə işləmək üçün mümkün olan yalnız bir şərt var - hər iki seçicinin eyni css özəlliklərinə malik olması lazımdır.
CSS ilə fərqlərini kodlarla izah edin:
