CSS Nədir ? Veb saytlarda CSS necə istifadə olunur ? CSS nələr bacarır və siz bu video dərsliklərə baxdıqda nələri öyrənəcəksiz və nələr edə biləcəksiz ?
Bu gün biz CSS ilə tanış oluruq və CSS ilə nələr etmək mümkün olduğuna baxırıq.
CSS saytda dizayna görə cavabdehdir. CSS HTML-siz istifadə olunmur və sadəcə saytın görünüşündən əlavə animasiyalar və elementlərin hərəkət etməsini də təmin edir.
CSS selektorlar HTML teqlərə müraciət etmək üçün istifadə olunur. Hər hansısa bir HTML teqi seçmək üçün biz həmin teqə class və ya id verməliyik və CSS-də ona teqin öz adı ilə və ya verdiyimiz class və id ilə müraciət edə bilərik. Teqi seçdikdən sonra biz ona istədiyimiz dizaynı verə bilərik.
Bu gün biz CSS-də elementlərə ölçülərin necə verildiyindən və onların səhifədə necə yerləşdirmək lazım olduğundan danışırıq.
Yeni öyrəndiyimiz CSS parametrlər:
1. width - enliliyi təyin edir
2. height - hündürlüyü təyin edir
3. display - elementin göstərilmə tərzini təyin edir
4. position - elementin səhifədə necə yerləşdirildiyini təyin edir
5. background - fonu təyin edir
6. margin - xarici məsafəni (digər elementlər ilə arasında olan məsafəni) təyin edir
7. padding - daxili məsafəni təyin edir
8. left - soldan məsafəni təyin edir
9. right - sağdan məsafəni təyin edir
10. top - yuxarıdan məsafəni təyin edir
11. bottom - aşağıdan məsafəni təyin edir
Bu gün tanış olduğumuz paramterlər:
font-family - şriftin adını təyin edir
font-style - şriftin üslubunu təyin edir
font-weight - şriftin qalınlığını təyin edir
font-size - şriftin ölçüsünü təyin edir.
@font-face - sayta yeni şrift əlavə etmək üçün istifadə olunur. "src" parametrində fərqli formatlarda (eot, woff2, woff, ttf, otf, svg) şriftə yolu göstəririk.
Bu gün biz CSS-də fona rəng verməyi, fona şəkil əlavə etməyi, əlavə olunan şəkili istədiyimiz kimi yerləşdirməyi öyrənirik.
Yeni öyrəndiyimiz parametrlər:
background
background-color - fonun rəngini təyin edir
background-image - fonun şəkilini təyin edir
background-position - fonun yerləşdirilməsini təyin edir
background-size - fonun ölçüsünü təyin edir
background-repeat - fonun təkrarlanıb təkrarlanmayacaqını təyin edir
background-attachment - fonun səhifə scroll olduqda özünü necə aparacaqını təyin edir
background-origin - fon şəkilinin hardan başlayacaqını təyin edir
background-clip - fon rənginin hardan başlayacaqını təyin edir
Qradientli fonlar üçün "background" parametrinin iki təyinatı istifadə olunur:
1. linear-gradient
2. radial-gradient
"linear-gradient" rəngləri bir istiqamətdə qarışıqını təyin edir. Birinci təyinatda istiqamət, növbəti təyinatlarda isə müxtəlif rənglər və onların ərazi ölçüsü təyin olunur.
"radial-gradient" isə rəngləri dairəvi və ellips formasında rəngləri qarışdırır. Birinci təyinatda qradientin forması, növbəti təyinatlarda isə müxtəlif rənglər və onların ərazi ölçüsü təyin olunur.
Bu gün öyrəndiyimiz parametrlər:
1. border
2. border-style
3. border-width
4. border-color
5. border-radius
6. line-height
"border-style" - çərçivənin hansı tərzdə olacağını təyin edir. Növbəti təyinatları ilə tanış olduq:
1. solid - sadə xətt
2. dashed - qırıq xəttlər
3. double - iki sadə xətt
"border-width" - çərçivənin qalınlığını təyin edir. Təyinatları px ilə verilir.
"border-color" - çərçivənin rəngini təyin edir.
"border-radius" - çərçivənin künclərinin dairəvi edir.
"line-height" - sətrin hündürlüyünü təyin edir. Təyinatları px ilə verilir.
"border" parametri "border-width", "border-style" və "border-color" parametrlərini bir yerə cəmləyir.
Kölgələr üçün CSS-də "box-shadow" və "text-shadow" parametrləri mövcuddur.
box-shadow - blokların kənarından çıxan kölgəni vermək üçün istifadə olunur.
text-shadow - yazılardan çıxan gölgəni vermək üçün istifadə olunur.
CSS-də elementlərin təbəqələrini idarə etmək üçün "z-index" parametri var. "z-index" parametrinin təyinatları mənfi və müsbət rəqəmlərdən ibarətdir. "z-index"-in təyinatı az olduqda element "z-index"-i çox olan digər elementlərin arxasında gizlənəcək.
Elementlərin şəffaflığını idarə etmək üçün "opacity" parametri var. "opacity" parametrinin təyinatları 0-dan 1-dək rəqəmlərdən ibarətdir.
Elementi görünməz etmək üçün "visibility" parametri istifadə olunur.
"hidden" təyinatı elementi gizlədir, "visible" təyinatı isə əksinə.
Pseudo-class-lar element ilə müəyyən hadisə baş verdikdə nə baş verəcəyini təyin edir.
Bu gün öyrəndiyimiz pseudo-class-lar:
:nth-child( [rəqəm] ) - sıra nömrəsi mötərizənin içində göstərilən rəqəmə bərabər olan elementi seçir
:first-child - sırada birinci olan elementi seçir
:last-child - sırada sonuncu olan elementi seçir
:hover - mouse elementin üzərində olduqda nə baş verəcəyini təyin edir
:active - elementin üzərində mouse-un sol düyməsi basıldıqda nə baş verəcəyini təyin edir
:focus - focus elementin üzərində olduqda nə baş verəcəyini təyin edir
:disabled - disabled attributu olan elementləri seçir
:target - linkdə id ilə müraciət olunan elementi seçir
:visited - daxil olunmuş linkləri seçir
:link - daxil olunmamış linkləri seçir t( [selector] ) - çıxmaq şərti ilə mənasını daşıyır. Mötərizənin içində bir selector yazılmalıdır
Səlis keçidlər istifadə etmək üçün CSS-də transition parametri var.
transition-duration - keçidin sürəklikini təyin edir
transition-delay - keçidin gecikməsini təyin edir
transition-property - hansı parametrin səlis deyişəcəyini təyin edir
transition-timing-function - keçidin sürətinin tərzini təyin edir
CSS-də 2D Transformasiyalar üçün transform parametri var. Bu parametr təyinat kimi növbəti metodları götürür:
translate - elementi indiki yerinə əsasən X və Y koordinatları ilə hərəkət etdirir.
rotate - elementi saat əqrəbi ilə və ya əks istiqamətdə fırladır
scale - elementin miqyasını təyin edir
skew - elementi çəp formaya gətirərək əyir
t( [selector] ) - çıxmaq şərti ilə mənasını daşıyır. Mötərizənin içində bir selector yazılmalıdır
