Css css 3 haqida

 
CSS 
 
 

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 -webkit- 
Opera 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 /* размытие*/; 
} 

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. 
@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 */ 
}-------- 
--------