Fənn:Alqoritmlərin analizi və hazırlanması üsulları Müəllim:Mirzəyeva Gülnar Tələbə:Zeynalova Nərmin Mövzu:CSS.

... konulu sunumlar: "Fənn:Alqoritmlərin analizi və hazırlanması üsulları Müəllim:Mirzəyeva Gülnar Tələbə:Zeynalova Nərmin Mövzu:CSS."— Sunum transkripti:

1 Fənn:Alqoritmlərin analizi və hazırlanması üsulları Müəllim:Mirzəyeva Gülnar Tələbə:Zeynalova Nərmin Mövzu:CSS

2 ■ №1) CSS hündürlük və en Hündürlük və enin qurulması Hündürlük və en xassələri bir elementin hündürlüyü və enini təyin etmək üçün istifadə olunur. Hündürlüyü və eni (Bu defaultdur. Brauzer hündürlüyü və eni hesablayır deməkdir), və ya uzunluq dəyərləri ilə müəyyən edilə, px, sm, kimi və s., və ya blokun tərkibində faiz (%) ilə avtomatik müəyyən edilə bilər. Bu element 200 piksel hündürlüyü və 50% eni var ■ Məsələn div { height: 200px; width: 50%; background-color: powderblue; }

3

4 ■ Qeyd: hündürlük və enin xassələrinə tamamlanması, sərhədləri, və ya səhifənin kənarı daxil deyil; Onlar elementin padding sərhəd və səhifənin kənarı daxilində sahəsinin hündürlüyü /enini qurmaqdır! Maksimal-enin qurulması Maxsimum-en xassəsi elementin maksimum enini təyin etmək üçün istifadə edilir. Maxsimum-en uzunluq dəyərləri ilə px, sm, kimi və s., və ya müəyyən faiz (%) olan blokda, və ya heç birində müəyyən edilə bilər (Bu defaultdur.Heç bir maksimum eni yoxdur deməkdir). Window brauzeri elementin eni (500px) daha kiçik olduğu zaman dən yuxarıda problem baş verir.Brauzer sonra səhifə üçün bir üfüqi sürüşdürmə edir.

5 Bu vəziyyətdə, maksimal-enin əvəzinə istifadə edərək, kiçik window brauzerinizin idarə edilməsini yaxşılaşdıracaq. ■ Ipucu: iki div arasında fərqi görmək üçün, daha kiçik 500px geniş brauzer pəncərə sürükləyin. Bu elementin 100 piksel hündürlüyü 500 piksel maksimal-eni var ■ Qeyd: max-eni xassəsinin dəyəri eni yenidən təyin edər. Aşağıdakı misal 100 piksel hündürlüyü 500 piksel maksimal-eni olan bir elementini göstərir: Məsələn: div { max-width: 500px; height: 100px; background-color: powderblue; }

6

7 ■ Hündürlük- bir elementin hündürlüyünü təyin edir. ■ Maksimal hündürlük- bir elementin maksimum hündürlüyünü təyin edir. ■ Maxsimum eni- bir elementin maksimum enini təyin edir. ■ Minimum hündürlük- bir elementin minimum hündürlüyünü təyin edir. ■ Minimum eni - bir elementin minimum enini təyin edir. ■ En - bir elementin enini təyin edir.

8 ■ №2)CSS Box Model (CSS model qutusu) Bütün HTML elementləri qutular kimi hesab edilə bilər. CSS-də dizayn və düzən haqqında danışarkən, " model qutusu" termini istifadə olunur. CSS model qutusu mahiyyətcə hər HTML elementini ətrafını örtən bir qutudur. O ibarətdir:səhifənin kənarı, sərhədləri, tamamlanması və faktiki məzmunu.görünüş aşağıdakı model qutusunu göstərir:

9

10 ■ Müxtəlif yerlərin izahı: ■ Content - qutunun məzmunu haradaki mətn və şəkillər görünür. ■ Padding - məzmun ətrafında bir sahəni silir. padding şəffafdır. ■ Border - sərhəd padding və content ətrafında gedir. ■ Margin - sərhəd xaricində sahəni silir. margin şəffafdır. ■ Model qutusu bizə elementləri ətrafında bir sərhəd əlavə etmək üçün, və elementləri arasında yer müəyyən etməyə imkan verir.

11

12 ■ Elementin eni və hündürlüyü Bütün brauzerlərdə düzgün bir elementin eni və hündürlüyü müəyyən etmək üçün, siz model qutusunu necə işlətmək lazımdır bilməlisiniz. ■ Mühüm: CSS ilə bir elementin eni və hündürlüyü xassələri müəyyən edən zaman, yalnız content sahənin eni və hündürlüyünü seçin. Bir elementin tam ölçüsünü hesablamaq üçün, siz də padding, borders və margins əlavə etməlisiniz. Fərz edək ki, biz 350px ümumi eni üçün bir elementini stil istəyirik :

13

14 ■Burada riyaziyyat: ■320px (eni) ■+ 20px (sol + sağ padding) ■+ 10px (sol + sağ s ə rh ə di) ■+ 0PX (sol + sağ margin) ■= 350px ■Bir elementin ümumi eni buna oxşar hesablanır : Ümumi elementini eni = eni + sol padding + sağ padding + sol s ə rh ə d + sağ s ə rh ə d + sol margin + sağ margin ■Bir elementin ümumi hündürlüyü buna oxşar hesablanır : Ümumi elementini hündürlüyü = hündürlüyü + yuxarı padding + alt padding + yuxarı s ə rh ə d + alt s ə rh ə d + yuxarı margin + alt margin Köhn ə IE üçün Qeyd: Internet Explorer 8 v ə ə vv ə lki versiyasını, eni xass ə sind ə padding v ə s ə rh ə d daxildir. Bu problemi h ə ll etm ə k üçün, HTML s ə hif ə sin ə bir ə lav ə edin.

15 ■ №3)Nişanlar necə əlavə etmək olar? ■ HTML səhifəsinə bir nişan əlavə etmək üçün ən sadə yolu, Awesome Font kimi bir simvol kitabxana ilədir. ■ Hər hansı bir inline HTML element müəyyən işarə sinfinin adını əlavə et ( kimi və ya ). ■ Bütün nişanlar aşağıdakı nişan kitabxanalarında geniş əhatəli vektordurki ( ölçüsü, rəngi, kölgəsi və s.) CSS ilə xüsusi ola bilər ■ Font Awesome nişanlar ■ Font Awesome nişanlar istifadə etmək üçün HTML səhifəsinin bölməsinin daxilində aşağıdakı sətri əlavə etmək lazımdır: ■ ■ Qeyd: Endirilməsi və ya quraşdırılması tələb olunmur!

16

17 ■ Önyükləmə nişanlar ■ Bootstrap glyphicons istifadə etmək üçün HTML səhifəsinin bölməsinin içərisində aşağıdakı sətiri əlavə etmək lazımdır: ■ ■ Qeyd: Endirilməsi və ya quraşdırma tələb olunmur!

18

19 ■ Google nişanlar ■ Google nişanlar istifadə etmək üçün HTML səhifəsinin bölməsi içərisində aşağıdakı sətiri əlavə etmək lazımdır : ■ ■ Qeyd: Endirilməsi və ya quraşdırma tələb olunmur!

20

21 ■ №4) CSS padding ■ CSS padding xassələri məzmun ətrafında yer yaratmaq üçün istifadə olunur.Padding bir elementin (sərhəd daxilində) məzmun ətrafında bir sahəni təmizləyir. ■ CSS ilə, padding üzərində tam nəzarət var. Bir elementin hər tərəfində (sol yuxarı, sağ, alt, və s) padding yaradılması üçün CSS xüsusiyyətləri var. ■ Padding - Fərdi tərəflər ■ CSS bir elementin hər tərəfində padding ifadə etmək üçün xüsusiyyətləri var: ■ padding-yuxarı ■ padding sağ ■ padding-aşağı ■ padding-sol ■ Bütün padding xassələrinin aşağıdakı mənaları ola bilər:

22 ■ Uzunluq - px, pt, sm, və s. bir padding müəyyən edir. ■ % - bir padding elementin tərkibində enini % müəyyən edir. ■ varis - müəyyən edir ki,padding ana elementini miras etməlidir. ■ Aşağıdakı misal bir elementin bütün dörd tərəfdən müxtəlif padding müəyyən edir:

23

24 ■ Padding - stenoqrafiya xassə ■ Kodu qısaltmaq üçün, bir xassəsində bütün padding xassələrinin müəyyən etmək mümkündür. ■ Padding xassəsi aşağıdakı fərdi padding xassələri üçün stenoqrafiya xassə: ■ padding-yuxarı ■ padding sağ ■ padding-aşağı ■ padding-sol

25

26 ■ Burada necə işləyir : Əgər padding xassəsi dörd dəyərləri varsa: ■ padding: 25px 50px 75px 100px; ■ yuxarı padding 25px edir ■ sağ padding 50px edir ■ aşağı padding 75px edir ■ sol padding 100px edir ■ Əgər padding xassəsi üç dəyərləri varsa: ■ padding: 25px 50px 75px; ■ yuxarı padding 25px edir ■ sağ və sol paddings 50px var ■ aşağı padding 75px edir

27 ■ Əgər padding xassəsi iki dəyərləri varsa: ■ padding: 25px 50px; ■ üst və alt paddings 25px var ■ sağ və sol paddings 50px var ■ Əgər padding xassəsi bir dəyər varsa: ■ padding: 25px; ■ bütün dörd paddings 25px dir ■ Məsələn: ■div.ex1 { padding: 25px 50px 75px 100px; } div.ex2 { padding: 25px 50px 75px; } div.ex3 { padding: 25px 50px; } div.ex4 { padding: 25px; }

28 ■ Xassə təsviri ■ padding- bir bəyanatda bütün padding xassələri qəbulu üçün stenoqrafiya xassəsidir. ■ padding-aşağı bir elementin aşağı paddingini təyin edir. ■ padding-sol bir elementin sol paddingini təyin edir. ■ padding- sağ bir elementin sağ paddingini təyin edir. ■ padding-yuxarı bir elementin yuxarı paddingini təyin edir.

29 ■ №5)Text Color (Mətn rəngi) ■ Rəng xassəsi mətnin rəngini təyin etmək üçün istifadə olunur. ■ CSS ilə bir rəng çox vaxt müəyyən edilir: ■ bir rəng adı-"Qırmızı" kimi ■ bir hex dəyər-"# Ff0000" kimi ■ bir RGB dəyəri - "RGB (255,0,0)« kimi ■ Mümkün rəng dəyərlərin tam siyahısı üçün CSS Rəng Dəyərlərinə baxın. ■ Default bir səhifə üçün mətn rəngi bədən selektorda müəyyən olunur.

30

31 ■ Qeyd: CSS uyğun W3C üçün: Əgər siz rəng xassəsini müəyyənləşdirirsinizsə, siz fonrəngini müəyyən etməlisiniz. ■ Mətn düzülüşü Mətn-cərgəsi xassəsi mətnin üfüqi düzülüşü təyin etmək üçün istifadə edilir. Mətn sol və ya sağ, mərkəzi düzə bilir və ya bir sıraya düzür. ■ Aşağıdakı misal mərkəzi düzür və sol və sağ düzülmüş mətn (sol düzülüş defaultdur əgər mətn istiqamətdə soldan-sağadırsa, sağ düzülüş defaultdur əgər mətn istiqaməti sağdan-soladırsa) göstərir:

32

33 ■ Mətn Dekorasiya ■ Mətn-dekorasiya xassəsi mətn bəzək təyin etmək və ya aradan qaldırılması üçün istifadə olunur.

34 ■ Digər mətn-dekorasiya dəyərlər mətn bəzəmək üçün istifadə olunur:

35 Mətn Dönüşümü ■ Mətnçevirmək xassəsi mətndə böyük və kiçik hərfləri müəyyən etmək üçün istifadə olunur. Bu böyük və ya kiçik hərflərə daxil hər şeyi çevirmək və ya hər sözün ilk hərfini kapitallaşdırmaq üçün istifadə edilə bilər:

36 ■ Mətn abzas ■ Mətn-abzas xassəsi mətnin birinci sətrinin abzasını müəyyən etmək üçün istifadə olunur:

37 ■ Hərf aralığı ■ Hərf aralığı xassəsi - Mətndə simvollar arasında yer müəyyən etmək üçün istifadə olunur.Aşağıdakı misal simvollar arasında boşluğu artırmaq və ya azaltmaq necə baş verdiyini göstərir:

38 ■ Sətir hündürlüyü ■ Sətir-hündürlük xassə sətirlərin arasında yer müəyyən etmək üçün istifadə olunur:

39 ■ Mətn istiqaməti ■ İstiqamət xassə elementin mətn istiqamətində dəyişdirmək üçün istifadə olunur:

40 ■ Söz aralığı ■ Söz-aralığı xassəsi mətndə sözlər arasında boşluq müəyyən etmək üçün istifadə olunur.Aşağıdakı sözlər arasında boşluğu misal artırmaq və ya azaltmaq necə baş verdiyi göstərir:

41 ■ Xassə təsviri ■ Rəng mətnin rəngini təyin edir ■ İstiqamət mətn istiqamətini / yazı istiqamətini göstərir ■ Hərf aralığı mətndə simvol arasında boşluğu artırır və ya azalır ■ Sətir-hündürlük sətrin hündürlyünü təyin edir. ■ Mətn-cərgəsi mətnin üfüqi düzülüşünü göstərir ■ mətn-dekorasiya mətnin əlavə bəzəyini göstərir ■ Mətn-abzas mətn blokunda ilk sətrinin abzasını göstərir ■ Mətn-shadow mətnə əlavə kölgə təsirini göstərir ■ Mətn-çevirmək mətn kapitallaşdırılmasını kontrol edir. ■ Şaquli-düzülüş bir element şaquli düzülüş təyin edir ■ Ağ- sahə bir element daxilində ağ sahə necə idarə olunur göstərir ■ Söz-aralığı mətndə sözlər arasında boşluq artırır və ya azalır.