header('Content-Type: image/webp'); ?>
11. CSS 3 haqida tushuncha
CSS 3 haqida
CSS - 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 -webkitOpera brouzeri uchun -o-
Firefox brouzeri uchun -moz- Internet Explorer(IE) brouzeri uchun esa -ms-
Man bu prefikslarni ishlatmagan holda misollar keltirdim, agar sizda bu
misollar ishlamasa oldiga prefikslarni qo’yib ishlatib ko’ring.
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. background-color: rgba(10,0,255,0.7);
Bu erda sahifa foniga rang berib, shu rangni 0.7 darajali och tusga
keltirilmoqda, tanishing CSS3 ning yangi elementi rgba.
Elementlarning istalgan burchagiga(qismiga) bir vaqtning o’zida har
xil rasmlarni joylashtirish. Bu saytni verstka qilish jarayonini
yengillashtiradi.
background:
url(top.gif) top left no-repeat, url(center.png) top 11px no-repeat,
url(bottom.png) bottom left no-repeat, url(middle.png) left no-repeat;
Resize buyrug’i. Bu buyruq orqali foydalanuvchi istalgan elementning
o’lchamini o’zgartirish mumkin bo’ladi.
div.resize { width: 25px; height: 35px; resize: both;
}
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.
#forma {
border-bottom-right-radius: 2em; border-bottom-left-radius: 1em; border-
top-left-radius: 5em;
border-top-right-radius: 3em;
}
CSS3ning soyalar bilan ishlash qismi. Barcha “p” teglari uchun soyalar
hosid qilish.
P {
text-shadow: #003471 /* soya rangi */ 2px /* o’ng tomonga surilishi*/ 5px
/*pastga surilish */ 2px /* размытие*/;
}
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.
@font-face {
font-family: shrift_akm;
src: url('
http://blabla.uz/fonts/shrift_akm.ttf'
);
}
h1 {
font-family: shrift_akm;
}
Web sahifada kolonkalar. Bunisiga nima deysiz? Element ichidagi
matnlarni bir necha ustunli kolonkalarda chiqarishingiz mumkin.
div {
column-width: 15em; column-gap: 2em; /* yashil rangda */ column-rule:
4px solid red; /* qizil rangda */ padding: 5px; /* qora rangda */
}-------
< div>
42242 422 42 422 422 4565 56 5454 54565 456
< /div>
CSS, nima o’zi u???
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 kodlami HTML singari
web brauzerning o’zi kompilyastiya qiladi va natijani chiqarib beradi.
Bu stillar jadvali(CSS) to’liq holatda 1997 yilda tashkil topib, “WWW
Consorcium” ida qo’llab quvvatlangan va foydalanishga taqdim etilgan.
O’sha paytlarda HTML ning 3 versiyasi ommabop edi. CSS ni dastlab
Netscape Navigator 4.0 va Internet Explorer 4.0 brouzerlarida ko’rish
mumkin bo’lgan. Hozirda barcha brouzerlar css da yozilgan kodlarni
tushuna oladi. Bu stillarga oid dasturlash tilini o’rganish sodda bo’lib,
yangi stillar qo’shilishi natijasida kengayib bormoqda.
CSS ni HTML xujjati ichida ishlatilishini birin ketin ko’rib o’tamiz:
1.
Web sahifada ishlatiladigan CSS kodlari orqali hosil qilinadigan stillarni
hammasini bitta faylga yozib, uni serverda saqlaymiz. So’ng,
sahifadan, serverdagi saqlab qo’yilgan faylga murojaat qilib, kerakli
stilni olamiz. Bu usul katta hajmdagi web sahifalar yaratishda foydali
hisoblanadi. Faylga murojaat, < head>tegi ichida amalga oshiriladi va
quyidagi ko’rinishga ega bo’ladi.
< LINK REL=STYLESHEET TYPE = “text/css" HREF="URL”>
< link> tegi sahifa biror faylga murojaatni amalga oshirmoqda degani,
REL- fayl qandaydir stillardan iborat degani, TYPE - stillar css kodlaridan
iborat va fayl joylashgan manzil yoziladi.
1. CSS kodlar veb sahifa ichidagitegi orasida beriladi. Bunda yaratilgan
stillar shu sahifaga tegishli bo’ladi, bu degani faqat shu sahifada ishlatilish
mumkindir.
< head>< STYLE TYPE=
”
text/css
”
>
< !--
A {text-decoration:none; }
-->
< /--STYLE>< /head>
2. Navbatdagi turi, bu har bir element uchun alohida teg ichida stil berib
chiqishdan iborat. Misol uchun, “p” tegi ichida biror matn yozilsa, shu
matn uchun teg ichida alohida stil beriladi va bu stil shu teg uchun xususiy
bo’ladi. Bu usuldan foydalanishni maslahat bermiman, chunki bu usul
kodlarni chalkash va tushunarsiz bo’lishiga olib keladi. Shoshilinch
vaziyatlarda yoki stil qay tartibda namoyon bo’lishni ko’rib olish uchun bu
usuldan foydalanishni maslahat beraman.
Undan tashqari < style> tegi orqali css faylni import qilish mumkin
bo’ladi.
@import: url(mystyles.css);
CSS stillarini ishlatishda, quyidagi guruhlash usullaridan foydalanish,
tartibli web sahifa tuzishga olib keladi:
- Kodlarni ixchamlash uchun, xar hil elementlar uchun bir hil tipdagi
stillarni guruhlab ishlatish maqsadga muvofiqdir.
H1 {font-family: Verdana}
H2 {font-family: Verdana}
Yuqoridagi stilni guruhlab quyidagicha yozamiz.
H1, H2 {font-family: Verdana}
- Guruhlashda bir hil element uchun bir necha stillarni birlashtirish
mumkin.
H2 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
Barcha stillarni bittaga yiramiz.
H2 {font-weight: bold; font-size: 14pt; font-family: Verdana;}
- Ba’zi stillar bitta stil ichida berilishi ham mumkin.
H2 {font: bold 14pt Verdana}
CSS stillari bilan ishlaganda, element ichidagi elementlar ham o’zidan
yuqori turgan element stilini qabul qiladi, ya’ni o’zidan oldingi element
”ota” vazifasini bajaradi va o’z “farzandlari”ga ham o’zida borini beradi.
Misol uchun, < p> tegi ichidagi matn ko’k rangda yozilishi lozim bo’lsa(P
{color: blue}), < p> tegi ichidagi < em> tegiga tegishli bo’lgan matn ham
ko’k rangda yoziladi.
Ba’zi stillar faqat yakka tartibda ishlaydi, ya’ni ichki teglarga stillari
o’tmaydi(misol uchun, background), shuning uchun barcha stillarni birma
bir ishlatib, o’rganib olish lozim.tegiga stil berib, dastlabki o’rnatilish (po
umolchaniyu) jarayonini hosil qilish mumkin. Shunda biror elementga stil
berish esdan chiqib qolsa, < body> tegida ta’luqli stil esdan chiqgan
elementga o’rnatiladi.
BODY {color: green; font-family: "Verdana"; background: url(joke.gif)
white; }
| 