border:dashed; - dashed chiziqli degan tarjimaga ega. Agar qalinligi belgilanmasa, 1px qilib o'zi olinadi. Rang berilmasa oq bo'ladi, agar biror rang belgilasangiz o'sha rangda bo'ladi. Bu holat quyida ko'rsatilingandir. Bu funksiya bajarilishi uchun avvalo
bo'lishi kerak bo'ladi,
bo'lsa jadvalimiz chiziqlari yo'q degani shuning uchun uning chegarasini chiziq bilan belgilashning hojati yo'qdir.
border:dotted; - dotted nuqtali degan tarjimaga ega. Agar qalinligi belgilanmasa, 1px qilib o'zi olinadi. Rang berilmasa oq bo'ladi, agar biror rang belgilasangiz o'sha rangda bo'ladi. Bu holat quyida ko'rsatilingandir. Bu funksiya bajarilishi uchun avvalo
bo'lishi kerak bo'ladi,
bo'lsa jadvalimiz chiziqlari yo'q degani shuning uchun uning chegarasini nuqtali qilib belgilashning hojati yo'qdir.
border:double; - double ikkitalik degan tarjimaga ega. Agar qalinligi belgilanmasa, 1px qilib o'zi olinadi. Rang berilmasa oq bo'ladi, agar biror rang belgilasangiz o'sha rangda bo'ladi. Bu holat quyida ko'rsatilingandir. Bu funksiya bajarilishi uchun avvalo
bo'lishi kerak bo'ladi,
bo'lsa jadvalimiz chiziqlari yo'q degani shuning uchun uning chegarasini ikki qavat qilib belgilashning hojati yo'qdir.
table {
border:#0000ff;
border:double;
}
border:groove; 16 px qalinlikdagi ushbu ko'rinish groove yordamida yasaladi, aynan nima degan tarjimaga ega ekanligini bilmayman.
ning o'rniga bitta qilib har birining orasida bittadan joy tashlagan holda table {border:#0000ff solid 16px;} yozsak ham bo'laveradi, o'rinlari almashib kelishining ahamiyati yo'q.
border-bottom: ;- jadvalning faqat quyi qismiga ishlov berish uchun ishlatiladi. Yuqoridagi barcha qoidalar bu uchun ham o'rinlidir. Masalan:
border-style: ; - qiymatlari quyidagilar. Bitun bir jadvalga tegishlidir. Agarda jadvalning ma'lum bir tamoniga tegishli bo'lishini hohlasangiz, unda qutyidagilardan birini tamoniga qarab tanlashingiz kerak bo'ladi.
Siz shuningdek to'rt tamonini to'rt hil qilishingiz ham mumkindir. U holda quyidagi misolni ko'ring.
border-style:dotted dashed solid double; Birinchi kelgani (dotted) jadvalning yuqori qismi uchun, ikkinchi kelgani (dashed) o'ng tarafi uchun, uchunchi kelgani (solid) quyi qismi uchun, ohirgi to'rtinchisi (double) chap tarafi uchun.
table {border-style:dotted dashed solid double;}
border-width: ; - qiymatlari thin medium thick va px (pixel) o'lchamdagi istalgan qiylatlardir. Bitun bir jadvalga tegishlidir. Agarda jadval qalinligi jadvalning ma'lum bir tamoniga tegishli bo'lishini hohlasangiz, unda quyidagilardan birini tamoniga qarab tanlashingiz kerak bo'ladi.
Siz shuningdek to'rt tamonini to'rt hil qalinlikda qilishingiz ham mumkindir. U holda quyidagi misolni ko'ring.
border-width:thin medium thick 5px; Birinchi kelgani (thin) jadvalning yuqori qismi uchun, ikkinchi kelgani (medium) o'ng tarafi uchun, uchunchi kelgani (thick) quyi qismi uchun, ohirgi to'rtinchisi (5px) chap tarafi uchun.
table {border-width:thin medium thick 5px;}
border-color: ; - qiymatlari istalgan rangdir, hohlang Hexa code hohlang rang nomi Ingiliz tilida (Bu haqda HTML darslarda o'tganmiz). Bitun bir jadvalga tegishlidir. Agarda jadvalning ma'lum bir tamoniga tegishli bo'lishini hohlasangiz, unda istalgan rangni birini tamoniga qarab tanlashingiz kerak bo'ladi.
Siz shuningdek to'rt tamonini to'rt hil rangda qilishingiz ham mumkindir. U holda quyidagi misolni ko'ring.
border-color:green red blue yellow ; Birinchi kelgan yashil rang (green) jadvalning yuqori qismi uchun, ikkinchi kelgani (red) o'ng tarafi uchun, uchunchi kelgani (blue) quyi qismi uchun, ohirgi to'rtinchisi (yellow) chap tarafi uchun.
font-family: ; - Ma'lum bir matnni Fontini belgilaydi. Masalan "arial, times new roman". Fontlarni bir nechtasini ketma ket yozish ham mumkin agar biror browser ma'lum bir fontni o'qimasa keyingi navbatda turganini aftomatik tarzda o'qiydi, ikkinchi navbatdagisi ham o'qilmasa uchunchisi va hokazo. Fontlar katta harfda yoziladimi kichik harfdami farqi yo'q. MS Word programmasining deyarli barcha font nomlari tushadi.
font-size: ; Ma'lum bir matnni katta kichiklik o'lchamini belgilaydi. Quyida uning qiymatlari misollar bilan keltirilgan. O'lchov qiymatlari istalgan kattalikda olinishi mumkin, men ihtiyoriylarini oldim.
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:smaller;}
smaller-kichikroq
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:x-small;}
x-small-qo'shimcha kichik
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:xx-small;}
xx-small-2 marta qo'shimcha kichik
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:medium;}
medium-o'rtacha
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:large;}
large-katta
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:larger;}
larger-kattaroq
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:x-large;}
x-large-qo'shimcha katta
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:xx-large;}
xx-large-2 marta qo'shimcha katta
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:14px;}
px (pixel) - piksel
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:150%;}
% (percent)-protsent
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:0.2in;}
in (inch)-dyum
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:14pt;}
pt (point)-nuqtali o'lcham
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:0.4cm;}
cm (centimeter)-santimetr
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:5mm;}
mm (millimter)-millimetr
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:1.5pc;}
pc (picas)-pikas
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-size:1em;}
em (emphasized)-ajratib ko'rsatishga
Asosiy Matningiz o'lchami ushbu ko'rinishida bo'ladi.
font-style: ; - font turini belgilaydi. Qiymatlari quyidagicha.
.asosiyMatn {font-style:normal;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-style:italic;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-style:oblique;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-style:inherit;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
font-variant: ; - bunda quyidagi ikki ko'rsatilingan funksiyalar amalga oshiriladi.
.asosiyMatn {font-variant:normal;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-variant:small-caps;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
font-weight: ; - Matnimizning so'zlarini qalinligini belgilaydi.
.asosiyMatn {font-weight:100;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-weight:800;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-weight:bold;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-weight:bolder;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-weight:lighter;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font-weight:normal;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
font: ; - bu property umumiy bo'lib istalgan fontga ta'luqli value (qiymat) ni ola oladi. Masalan: font:arial; yoki font:bold; yoki: font:14px; yoki font:italic; va hokazo. Istasangiz hammasini bitta qilib yozishingiz ham mumkindir, ya'ni font: bold arial 14px italic; ushbu qiymatlar o'rinlari almashib kelishi ahamiyatsiz oralarida vergul shart emas.
.asosiyMatn {font:arial;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font:bold;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font:14px;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font:italic;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {font:arial bold 14px italic;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
color: ; - Matnning rangini belgilaydi, HTML ranglar darsida o'tganimiz kabi rang berishning uchu hil uslubi bu yerda o'rinli hisoblanadi.
.asosiyMatn {color:#0000ff;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {color:blue;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {color:rgb(0,0,255);}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
text-align: ; - Matnimizni garizontal joylashuvini belgilaydi.
.asosiyMatn {text-align:right;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-align:center;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-align:left;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
text-decoration: ; - Bu property Matnimizga quyida keltirilgan funksiyalarni amalga oshiradi. Asosan linklar yaratishda qo'l keladi.
.asosiyMatn {text-decoration:blink;}
.asosiyMatn {text-decoration:line-through;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-decoration:none;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-decoration:overline;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-decoration:underline;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
- bu property abzastga o'xshab joy tashlash uchun ishlatiladi. Faqatgina birinchi qatorga ta'sir qiladi. O'lchamlari em, px, %, pc, cm, mm, in kabilar bo'lishi mumkindir. Shuningdek sonlar manfiy qilib ishlatilinishi ham mumkin u holda chap tarafga qarab matnimiz bosh qatori chiqib ketib qoladi, eng oxirgi qatorda bu misol ko'rsatilingan. Manfiy o'lchamlar ham o'z vaqtida kerak bo'ladi.
.asosiyMatn {text-indent:2em;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-indent:12px;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-indent:20%;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-indent:10pc;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-indent:5cm;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-indent:20mm;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-indent:2in;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-indent:-2cm;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
text-transform: ; - (text-transformation: ;) desa ham bo'ladi faqat 4 ta value isi bor quyida keltirilgan. Tarjimalari uppercase (katta harf) hamma harflari kattaga aylanadi, lowercase (kichik harf) hamma harf va so'zlar kichik harfda yoziladi, capitalize (bosh harfi katta) hamma so'z katta harf bilan boshlanadi, none (hech narsa) ya'ni hech qanday o'zgarish bo'lmaydi ohirgisini ishlatmasa ham bo'ladi.
.asosiyMatn {text-transform:uppercase;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-transform:lowercase;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-transform:capitalize;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {text-transform:none;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
letter-spacing: ; - bu property so'zlarning harflari orasidagi joyni qancha tashlanishini aniqlaydi. O'lchamlari em, px, %, pc, cm, mm, in kabilar bo'lishi mumkindir. Shuningdek sonlar manfiy qilib ishlatilinishi ham mumkin u holda harflar ustma ust chiqib ketadi, eng oxirgi qatorda bu misol ko'rsatilingan. Manfiy o'lchamlar ham o'z vaqtida kerak bo'ladi.
.asosiyMatn {letter-spacing:3px;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {letter-spacing:4px;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {letter-spacing:5px;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {letter-spacing:6px;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {letter-spacing:0.7em;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.asosiyMatn {letter-spacing:-1px;}
Asosiy Matningiz ushbu ko'rinishida bo'ladi.
line-height: ; - line (chiziq), height (balandlik) degan tarjimalarga egadir. Ya'ni matnimizning qatorlari orsidagi masofa uchun ishlatilinadi, o'lchamlari em, px, %, pc, cm, mm, in kabilar bo'lishi mumkindir.
.asosiyMatn {line-height:normal;}
line (chiziq), height (balandlik) degan tarjimalarga egadir. Ya'ni matnimizning qatorlari orsidagi masofa uchun ishlatilinadi, o'lchamlari em, px, %, pc, cm, mm, in kabilar bo'lishi mumkindir. Shuningdek sonlar manfiy qilib ishlatilinishi ham mumkin u holda qatorlar ustma ust chiqib ketadi, eng oxirgi qatorda bu misol ko'rsatilingan. Manfiy o'lchamlar ham o'z vaqtida kerak bo'ladi.
.asosiyMatn {line-height:25px;}
line (chiziq), height (balandlik) degan tarjimalarga egadir. Ya'ni matnimizning qatorlari orsidagi masofa uchun ishlatilinadi, o'lchamlari em, px, %, pc, cm, mm, in kabilar bo'lishi mumkindir. Shuningdek sonlar manfiy qilib ishlatilinishi ham mumkin u holda qatorlar ustma ust chiqib ketadi, eng oxirgi qatorda bu misol ko'rsatilingan. Manfiy o'lchamlar ham o'z vaqtida kerak bo'ladi.
.asosiyMatn {line-height:2.5em;}
line (chiziq), height (balandlik) degan tarjimalarga egadir. Ya'ni matnimizning qatorlari orsidagi masofa uchun ishlatilinadi, o'lchamlari em, px, %, pc, cm, mm, in kabilar bo'lishi mumkindir. Shuningdek sonlar manfiy qilib ishlatilinishi ham mumkin u holda qatorlar ustma ust chiqib ketadi, eng oxirgi qatorda bu misol ko'rsatilingan. Manfiy o'lchamlar ham o'z vaqtida kerak bo'ladi.
.asosiyMatn {line-height:200%;}
line (chiziq), height (balandlik) degan tarjimalarga egadir. Ya'ni matnimizning qatorlari orsidagi masofa uchun ishlatilinadi, o'lchamlari em, px, %, pc, cm, mm, in kabilar bo'lishi mumkindir. Shuningdek sonlar manfiy qilib ishlatilinishi ham mumkin u holda qatorlar ustma ust chiqib ketadi, eng oxirgi qatorda bu misol ko'rsatilingan. Manfiy o'lchamlar ham o'z vaqtida kerak bo'ladi.
.asosiyMatn {line-height:2pc;}
line (chiziq), height (balandlik) degan tarjimalarga egadir. Ya'ni matnimizning qatorlari orsidagi masofa uchun ishlatilinadi, o'lchamlari em, px, %, pc, cm, mm, in kabilar bo'lishi mumkindir. Shuningdek sonlar manfiy qilib ishlatilinishi ham mumkin u holda qatorlar ustma ust chiqib ketadi, eng oxirgi qatorda bu misol ko'rsatilingan. Manfiy o'lchamlar ham o'z vaqtida kerak bo'ladi.
.asosiyMatn {line-height:1cm;}
line (chiziq), height (balandlik) degan tarjimalarga egadir. Ya'ni matnimizning qatorlari orsidagi masofa uchun ishlatilinadi, o'lchamlari em, px, %, pc, cm, mm, in kabilar bo'lishi mumkindir. Shuningdek sonlar manfiy qilib ishlatilinishi ham mumkin u holda qatorlar ustma ust chiqib ketadi, eng oxirgi qatorda bu misol ko'rsatilingan. Manfiy o'lchamlar ham o'z vaqtida kerak bo'ladi.
Biz yuqorida barcha holatlarni faqatgina bitta qoidada ko'rdik. Biroq bir qancha CSS kodlarini birgalashtirib ham yozish kerak aslida. Masalan:
list-style-image: ; Biz odatda HTMLdan bilamiz ro'yhat tuzishda ro'yhatimiz sonli tartibda (1, 2, 3, 4, 5, 6, 7, yoki i, ii, iii, iv, v, vi, vii, viii,), abc tartibida (a, b, c, d, e, yoki A, B, C, D,) va hokazo bo'ladi. Lekin list-style-image: ; - ro'yhatimiz oldidan biror siz belgilagan rasmni qo'yadi, u rasm odatda kichikroq ihcham bo'lishi kerak. quyida uchbu holat ko'rsatilingandir.
list-style-position: ; Ro'yhatimizning matnga nisbatan joylashuvini belgilaydi, qiymatlari "inside" (ichki) va "outside" (tashqi) bo'lishi mumkindir. Yani matnga nisbatan ichkarida yoki tashqarida joylashishi mumkindir. HTML ning
,
,
, ,
, taglari uchun qo'llaniladi.
Browserda ko'rinishi
HTMLda kodi
CSSda kodi
Biror matn bor deb faraz qilaylik u holda quyidagi ro'yhatimiz inside holati quyidagicha
Alisher
Bahtiyor
Bahodir
Dilshod
Alisher
Bahtiyor
Bahodir
Dilshod
.listPosition { list-style-position:inside;}
list-style-type: ; Ro'yhatimizning oldidagi nuqtalari turlarini belgilovchi property hisoblanadi.
Browserda ko'rinishi
HTMLda kodi
CSSda kodi
Alisher
Bahtiyor
Bahodir
Dilshod
Alisher
Bahtiyor
Bahodir
Dilshod
.listType1 { list-style-type:armenian;}
Alisher
Bahtiyor
Bahodir
Dilshod
Alisher
Bahtiyor
Bahodir
Dilshod
.listType2 { list-style-type:circle;}
Ushbu ikki ustunda list-style-type ning barcha qiymatlari keltirilgandir. Siz hammasini bir ma bir qo'yib bajarish funksiyalarini tekshiring.
a {
color: #FF6600;
font-weight:bold;
text-decoration:none;
}
bu barcha liklar uchun berilgan umumiy CSS kodi, HTML dokumentda har qanday linkiz shu kodga asososan yasaladi. Masalan Link desangiz bu link ushbu kodlar asosidagi ranglarni va boshqa qoidalarni oladi, yani Link. Quyidagi a: bilan boshlanuvchi kodlar alohida tuzuladi va alohida CSS qoidalar yoziladi ihtiyorga qarab. Asosan ranglari holatga qarab har hil tanlanadi.
a:link { }
a:visited { }
a:hover { }
a:active { }
oddiy, hali foydalanuvchi kirmagan link uchun
foydalanuvchi allaqachon kirgan link uchun
sichqoncha link ustiga borgandagi holat uchun
sichqoncha link ustiga bosilgandagi holat uchun
Link ko'rinishi
CSS Margin
margin: ; - asosan web sahifaning matnga nisbatan to'rt tamoni (yuqori, o'ng, quyi, chap) dan joy tashlab ishlash uchun qo'llaniladi. Agar margin ishlatilinmasa web sahifa huddi manitor devorlariga yopishib turgandek bo'ladi. O'lchamlari asosan px yoki % da beriladi, cm, mm lar ham mumkin agar istasangiz. Men pixelda misol qilib ko'rsataman. Bitta qiymati barcha tamondan ko'rsatilgan qiymatchalik joy tashla degan buyruq bo'ladi. Asosan body uchun umumiy qilib belgilanadi.
body {
margin:20px; }
-web sahifaning to'rtala tamonidan ham 20 pixeldan joy tashla degan buyruqdir.
Siz shuningdek web sahifaning har hil tamonlari uchun har hil o'lchamlarni olishingiz ham mumkindir. Uning uchun quyidagi propertylarni qo'llasangiz bo'lgani.
body {
margin-top:20px; }
web sahifaning yuqori qismidan 20 pixel joy tashla degan buyruqdir.
body {
margin-right:30px; }
web sahifaning o'ng qismidan 30 pixel joy tashla degan buyruqdir.
body {
margin-bottom:25px; }
web sahifaning quyi qismidan 25 pixel joy tashla degan buyruqdir.
body {
margin-left:30px; }
web sahifaning chap qismidan 30 pixel joy tashla degan buyruqdir.
body {
margin:30px 40px 50px 60px ; }
Bu buyruq hamma tarafga birdaniga kiritish mumkin bo'lgan buyruqdir. Birinchi kelgan qiymat (30px) web sahifaning yuqori qismidan joy tashlaydi, ikkinchisi (40px) o'ng tamonidan, uchunchisi (50px) quyi qismidan, to'rtinchisi (60px) chap qismidan.
body {
margin-top:30px; margin-right:40px; margin-bottom:50px; margin-left:60px; }
Bitta yuqoridagi qoida bilan bir hil ma'noga ega, faqat birgalashi kelmoqda halos. Hohlasangiz ihtiyoriy 2 ta, hohlasangiz ihtiyoriy 3 tasini olishingiz mumkin.