|
Matn xususiyatlari.
Xususiyati
|
Tavsifi
|
Qiymatlari
|
color
|
Matn rangini belgilaydi
|
RGB, hex, keyword
|
line-height
|
Chiziqlar orasidagi masofani belgilaydi
|
normal, number, length, %
|
letter-spacing
|
Belgilar orasidagi masofani orttirish yoki kamaytirish
|
normal, length
|
text-align
|
Matnni element ichida tekislash
|
left, right, center, justify
|
text-decoration
|
Matnning bezagi ustida ishlash
|
none, underline, overline, line-through
|
text-indent
|
Element tarkibida birinchi qatorni ko’rsatadi
|
length, %
|
text-transform
|
Elementdagi harflarni boshqaradi.
|
none, capitalize, uppercase, lowercase
|
Ro’yhat xususiyatlari.
Xususiyati__Tavsifi__Qiymatlari__list-style'>Xususiyati
|
Tavsifi
|
Qiymatlari
|
list-style
|
Bitta deklaratsiyada ro'yxat uchun barcha xususiyatlarni o'rnatadi
|
list-style-type, list-style-position, list-style-image, inherit
|
list-style-image
|
Rasmni ro'yxat elementi markeri sifatida belgilaydi
|
URL, none, inherit
|
list-style-position
|
Ro'yxat elementlari markerini qayerda joylashtirishni belgilaydi
|
inside, outside, inherit
|
list-style-type
|
Ro'yxat elementlari markerining turini belgilaydi
|
none, disc, circle, square, decimal, decimal-leading-zero,armenian, georgian, lower-alpha, upper-alpha, lower-greek,lower-latin, upper-latin, lower-roman, upper-roman, inherit
|
Chegara xususiyatlari
Xususiyati
|
Tavsifi
|
Qiymatlari
|
border
|
Barcha chegara xususiyatlarini bitta deklaratsiyada o'rnatadi
|
border-width, border-style, border-color
|
border-bottom
|
Bitta deklaratsiyada barcha pastki chegara xususiyatlarini o'rnatad
|
border-bottom-width, border-bottom-style, border-bottom-color
|
border-color
|
To'rt chegaraning rangini belgilaydi
|
color_name, hex_number, rgb_number, transparent, inherit
|
border-left
|
Chapdagi barcha chegara xususiyatlarini bitta deklaratsiyada o'rnatadi
|
border-left-width, border-left-style, border-left-color
|
border-right
|
Bitta deklaratsiyada barcha o’ng chegara xususiyatlarini o'rnatadi
|
border-right-width, border-right-style, border-right-color
|
border-style
|
To'rt chegaraning uslubini sozlaydi
|
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit
|
border-top
|
Bitta deklaratsiyada barcha yuqori chegara xususiyatlarini o'rnatad
|
border-top-width, border-top-style, border-top-color
|
border-width
|
To'rt chegaraning kengligini o'rnatadi
|
thin, medium, thick, length, inherit
|
Shrift xususiyatlari
Xususiyati
|
Tavsifi
|
Qiymatlari
|
font
|
Shriftning barcha xususiyatlarini bitta deklaratsiyada o'rnatadi.
|
font-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar, inherit
|
font-family
|
Matn uchun shrift turkumini belgilaydi.
|
family-name, generic-family, inherit
|
font-size
|
Matnning shrift hajmini belgilaydi
|
xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %, inherit
|
font-style
|
Matn uchun shrift uslubini belgilaydi.
|
normal, italic, oblique, inherit
|
font-variant
|
Matnni kichik harf bilan yoziladigan shriftda ko'rsatish kerakligini belgilaydi.
|
normal, small-caps, inherit
|
font-weight
|
Shriftning og'irligini belgilaydi.
|
normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
|
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-
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’tamiz.
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;
}
3. Resize buyrug’i. Bu buyruq orqali foydalanuvchi istalgan elementning o’lchamini o’zgartirish mumkin bo’ladi.
div.resize {
width: 25px;
height: 35px;
resize: both;
}
4. 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;
}
5. CSS3ning soyalar bilan ishlash qismi. Barcha “p” teglari uchun soyalar hosil qilish.
p {
text-shadow: #003471 /* soya rangi */ 2px /* o’ng tomonga surilishi*/ 5px /* pastga surilish */ 2px /* размытие*/;
}
6. 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;
}
7. 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 */
}
42242 422 42 422 422
4565 56 5454 54565 456
Xulosa
Ushbu mustaqil ishda biz veb-sahifalarni qanday jozibador qilishda CSS-dan foydalanishni ko’rib chiqdik. CSS bizga qoidalar yaratishga imkon beradi elementning tarkibi qanday paydo bo'lishi kerakligini belgilaydi.
Shunday qilib, ushbu mustaqil ishda:
● CSS qanday ishlashini
● CSS qoidalarini yozishni
● CSS va CSS 3 xususiyatlarini ko’rib chiqdik .
Css ni qanday ishlashini tasavvur qilish uchun HTML elementlarini atrofida ko’rinmas quti bor deb faraz qilish kerak ekan. CSS bizga har bir alohida katakchani (va shu qutining tarkibini) taqdim etish usulini boshqaruvchi qoidalar sosida yaratishga imkon berar ekan
Do'stlaringiz bilan baham: |
