CSS3 dan foydalanish kaskadli jadval stillari tushunchasi kaskadli jadval tushunchasi va imkoniyatlari shrift xususiyati

Загружено в:

20.09.2019

Скачано:

0

Размер:

58.5 KB

Скачать

CSS3 dan foydalanish kaskadli jadval stillari tushunchasi kaskadli jadval tushunchasi va imkoniyatlari shrift xususiyati R е ja: 1 . CSS h aqida umumiy ma’lumot. 2. Matnni bezash xususiyatlari. Matn bilan ishlash. Shrift xususiyati. 3. Web sahifa stilini yaratishda class va id ni qo’llash h aqida umumiy ma’lumot .

CSS – bu stillar bilan ishlay oladigan kaskadli stillar majmuasidir. Web sahifalarga har xil stillar berish uchun ishlatiladi. HTML xujjat ichida teglar bilan birga foydalaniladi. CSS kodlarini kompilyastiya qilish uchun qandaydir kompillyatorlar, qandaydir dasturlar, va bu kod tushuna oladigan qandaydir redaktorlar kerak bo’lmaydi. Bu kodlarni HTML singari web brauzerning o’zi kompilyastiya qiladi va natijani chiqarib beradi. Ajoyib dizaynni yaratish uchun o‘nlab rasmlar, kaskadli stil jadvallari (CSS) va ayrim hollarda javascript (JS) lardan keng foydalanilmoqda. Adobe Dreamveawer CS4. Veb dasturlash tillari va Kaskadli stillar jadvali (CSS) bilan vizual ishlash uchun juda qulay dasturiy ta’minot. SS — bu stillar bilan ishlash uchun mo’ljallangan kodlar majmuasidir. Hozirgi kunga kelib yangi CSS3 versiyasi ishlab chiqilmoqda, lekin hali ko’p brauzerlar bu stillarni aks ettira olmayapti. Shuning uchun CSS3 yaratuvchilari brauzer o’rtasida kelishmovchiliklarni oldini olish maqsadida brauzer turiga qarab har xil prefikslar ishlab chiqishdi va bu prefikslardan CSS3 to’liq yaratilmaguncha ishlatish tavsiya etilgan, CSS3 to’liq yaratilgandan so’ng bu prefikslar olib tashlanadi. Bu prefikslar quydagilar: Safari va Chrome brouzerlari uchun -webkit- Opera brouzeri uchun -o- Firefox brouzeri uchun -moz- Internet Explorer(IE) brouzeri uchun esa -ms- Css3 da eng asosiy qo’shilgan stillardan biri bu animastiyalardir, ya’ni stillar almashinish jarayoni birdaniga emas, balki sekin astalik bilan sodir bo’lishidir. Quyida Css3 versiyasiga yangi qo’shilgan ba’zi stillarni misol tariqasida ko’rsatib o’taman.  Elementlarni(matn, rasm, fon,..) och( прозрачный ) ko’rinishda aks ettirish.  Elementlarning istalgan burchagiga(qismiga) bir vaqtning o’zida har xil rasmlarni joylashtirish. Bu saytni verstka qilish jarayonini yengillashtiradi.  Resize buyrug’i. Bu buyruq orqali foydalanuvchi istalgan elementning o’lchamini o’zgartirish mumkin bo’ladi.

 CSS3 ning yana bir yangiligi bu – elementlar(shakllar, bloklar) burchagini istalgan radiusda burish mumkinligidir. Ko’p web saytlar forma yaratish jarayonida, formaning burchaklarini burishni verstka paytida biror rasm orqali amalga oshirishadi, bu esa qo’shimcha ish va vaqt yo’qotishga olib keladi, CSS3 da bu muammo bartaraf etilgan va quyidagicha amalga oshirish mumkin bo’ladi.  CSS3ning soyalar bilan ishlash qismi. Barcha “p” teglari uchun soyalar hosil qilish.  Shriftlar. Internetda ko’p foydalanuvchilar verdana shrifti bilan ishlaydi. Nega? Chunki bu shrift barcha kompyuterlarda mavjud va brouzerda chiroyli ko’rinishga ega. Agar stillarda qo’llanilgan shrift foydalanuvchi kompyuterida mavjud bo’lmasa, brouzer matnni istalgan boshqa shriftda ko’rsatishi mumkin. Bu esa shriftlar rang barangligiga olib keladi. CSS3 da shriftlar bilan ishlash uchun yangi komanda @font-face.  Web sahifada kolonkalar. Bunisiga nima deysiz? Element ichidagi matnlarni bir necha ustunli kolonkalarda chiqarishingiz mumkin. Matnlarni bezash HTML tilida matnni tasvirlashning bir qancha usullari mavjud. Brauzer ekranida matn satrini tasvirlash uchun hech qanday teg ishlatishga hojat yo’q. Matnni yozish kifoya. Lekin uni hattoki abzatsga bo’lish ham teglarsiz amalga oshmaydi. Har xil kompyuter tizimlarida matnlarni abzatsga bo’lish uchun har xil simvollar ishlatiladi, lekin HTML hujjati kompyuter tizimi qanday bo’lishidan qa'tiy nazar bir xil tasvirlanishi lozim va shuning uchun abzatsni ifodalovchi teg kiritilishiga to’g’ri kelgan. Har bir abzats boshida <p> tegi qo’yiladi, oxirida esa yopiluvchi </ p> tegi qo’yiladi. Bu teg o’z parametrlariga ega. Bu parametrlar qatoriga identifikatsiya parametrlari class va id , shaklli bezash parametri style va tekislash ( tenglash ) parmetri align kiradi. Abzatsni brauzer oynasining o’ng yoki chap tomoniga tekislash, markazlashtirish yoki to’la eniga yoyib yozish uchun ularga mos ravishda left , right , center va justify qiymatlari ishlatiladi. Bularning qo’llanilishini quyidagi misolda ko’ramiz:

Misol <html> <head> <title>Abzatslarni gorizontal tanlash </title> </head> <body> <p align =left>chap tomonga tekislagan abzats</p> <p align =right>o’ng tomonga tekislangan abzats</p> <p align =center>markazlashtirilgan abzats</p> <p align =justify>eni bo’yicha yoyib yozilgan abzats</p> </body> </html> Bunday kod bilan yozilgan faylning Internet Explorer brauzer tasviri 1 rasmda tasvirlangan. Internet Explorerning oldingi versiyalari bazi bir teglarni qo’llamasligi mumkin. Masalan eni bo’yiga yoyib yozish tegini brauzer qo’llamasa ekranda oddiy ko’rinishdagi matn yoziladi Shriftlar deganda, yozuv qanday shriftlar oilasida yozilganligi, uning o‘lchami, rangi va yana bir necha xususiyati tushuniladi. Shriftlarga quyidagi stil xususiyatlari javob bradi: — font-family ; — font-style ; — font-variant ; — font-weight ; — font-size ; — font . Bularning barchasini birma-bir ko‘rib chiqamiz. Font-family — shriftlar oilasi. Shriftlar ko‘rinishiga qarab ma’lum bir oilalarga bo‘linadi, asosiylari quyidagilar: 1. Serif . Quyidagi shriftlar bu oilaga tegishli: Times, Times New Roman, New York.

2. Sans-serif . Quyidagi shriftlar bu oilaga tegishli: Verdana, Geneva, Arial. 3. Monospace . Quyidagi shriftlar bu oilaga tegishli: Courier, Courier New. Odatda, agar shrift nomida bo‘sh joy bo‘lsa, bu shrift qo‘shtirnoqga olinadi. Font-style — bu xususiyat shriftga stil beradi va uch xil qiymatni qabul qilishi mumkin: 1. Normal — oddiy ko‘rinish. 2. Italic — biroz qiyshaygan ko‘rinish. 3. Oblique — bu ham qiyshaygan ko‘rinish, lekin ma’lum bir burchakka, suniy yaratilgan. Barcha shriftlarning oddiy biroz qiyshaygan va qalin yozuvli ko‘rinishi bo‘ladi, qiyshaygan ko‘rinishi bu « Italic «, « Oblique » esa suniy ravishda yaratilgan qiyshayish. Klass Agar bizga, kod ichida foydalaniladigan bir xil teglarga har xil stillarni o‘rnatishimiz lozim bo‘lsa, klass yoki identifikatorlardan foydalanish juda qulay hisoblanadi. Dastlab klass haqida to‘xtalib o‘tamiz. Bir xil elementlarga har xil stil berish uchun, element nomi va nuqta(.) qo‘yib, stilga biror nom beramiz. So‘ng shu nomga tegishli bo‘ladigan stillar ketma- ketligini yozib chiqamiz. Shundan so‘ng, kod ichida kerakli bo‘lgan joyda, classso‘zi yordamida o‘rnatilgan stil nomi chaqiriladi. Misol ko‘ramiz: <head> <style TYPE="text/css"> H1.rd {color:red;} H1.be {color:red;background-color:blue;} </style>

</head> E'lon qilingan stilni kerakli joyda chaqiramiz. <body> <h1 class="rd">Qizil shrift</h1> <h1 class="be">Ko'k fonda qizil shrift</h1> </body> Shu tariqa istalgan elementga istalgan stillarni o‘rnatish mumkin bo‘ladi. YUqoridagi misolda faqat bitta element(H1) uchun stil yaratdik. Agar biz biror stilni yaratib, uni istalgan element uchun ishlatmoqchi bo‘lsak, u holda yaratilgan stilga element nomini qo‘ymasdan, faqatgina nuqta orqali stil uchun doimiy nom beramiz va kerakli joyda chaqiramiz. Tushunmadingizmi? Unday bo‘lsa quyidagi misolni yaxshilab tahlil qilib chiqing. <STYLE TYPE="text/css"> red {color: red;} blue {color:red; background-color: blue} </STYLE> Biz 2 ta stil yaratdik, “red” va “blue” deb nomladik, endi bu stillarni istalgan element uchun ishlatishimiz mumkin. <P CLASS="red">Qizil shrift</P> <P CLASS="blue">Ko'k fonda qizil shrift</P> Identifikator. Bu o‘z ismi bilan etib turilibdi Identifikator, ya'ni butun veb sahifasida faqatgina bitta elementga stil berish uchun ishlatiladi. Dastlab stil yozilib, unga “#” belgisi orqali nom beriladi. “#” bu identifikatorli stillar to‘plami degan ma'noni beradi. #akm{font-family:verdana; color:green;} So‘ng kod ichida bu identifikator ID kalit so‘zi orqali chaqiriladi va yagona element uchun ishlatiladi. Bu ta'rif identifikatorga berilgan xaqiqiy ta'rifdir. Lekin

$hozirgi kundagi ko‘p brouzerlarda id orqali bir necha elementga ham stil berish mumkin bo‘lib qoldi, brouzerlar bunga ruhsat berishmoqda. <STYLE TYPE="text/css"> #myID {letter-spacing: 1em;} H1#form3 {color:red; background-color: blue} </STYLE> <BODY> <P ID=myID> 1em lik yozuv</P> <H1 ID=form2>Qora rangda</P> YUqoridagi kodda "form3" identifikatori e'lon qilindi, lekin "form2" identifikatori ishlatildi. Bunda "form2" bo‘lmaganligi sababli yozuv odatiy holda namoyon bo‘ldi. Hozirgi kunda identifikatordan klassda yaratilgan stillarning ma'lum bir qismini o‘zgartirish uchun ishlatishmoqda. Misol uchun, bitta klass ochib, unga nom beramiz va stillar ketma-ketligini kiritamiz. HTML kod ichida shu klassni chaqirib, undan foydalanamiz, agar bizga stillar ketmaketligini biror elementini o‘zgartirish kerak bo‘lib qolsa, identifikatorni ishga solamiz. Shunda butun stilni bitta elementini o‘zgartirish uchun boshidan yozib o‘tirmaymiz. HTML tegida klass va identifikatorni birga ishlatsak, identifikator kuchliroq hisoblanadi. Misol ko‘ramiz. Ikkala holatda ham matn qizil rangda chiqadi, identifikatorda o‘rnatilgani kabi. Oxirgi berilgan stil natijaga ta'sir qiladi. <style> .klas{color:blue;font-family:verdana;} #iden{color:red;} </style> <p class="klas" id="iden">test_klas</p> <p id="iden">test_klas</p> CSS stillar quyidagicha yoziladi:$

CSS3 dan foydalanish kaskadli jadval stillari tushunchasi kaskadli jadval tushunchasi va imkoniyatlari shrift xususiyati

20.09.2019

0

58.5 KB

Похожие