Xurmatli Web sahifani sabr bilan hamma html darslarini o'qib o'rgangan yurtdoshlar, barchangizga tashakkurimni bildiraman. Sizlarni tabriklasam ham bo'ladi sizlar juda muhim bo'lgan bosqichni o'tib bo'ldingiz

Download 267 Kb.

bet	3/4
Sana	16.05.2020
Hajmi	267 Kb.
	#106888

1 2 3 4

Bog'liq
CSS Tutorial - LOTIN

Shu yerda bir narsani ta'kidlamoqchi edim. Yuqorida ishlatilingan:

table {
border:#0000ff;

border:solid;
border:16px;
}

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:

table {
border-bottom:#0000ff;
border:ridge;
border:16px;
}

border-left: ;- jadvalning faqat chap qismiga ishlov berish uchun ishlatiladi. Yuqoridagi barcha qoidalar bu uchun ham o'rinlidir. Masalan:

table {
border-left:#0000ff;
border:ridge;
border:16px;
}

border-right: ; - jadvalning faqat o'ng qismiga ishlov berish uchun ishlatiladi. Yuqoridagi barcha qoidalar bu uchun ham o'rinlidir. Masalan:

table {
border-right:#0000ff;
border:ridge;
border:16px;
}

border- top: ; - jadvalning faqat yuqori qismiga ishlov berish uchun ishlatiladi. Yuqoridagi barcha qoidalar bu uchun ham o'rinlidir. Masalan:

table {
border-top:#0000ff;
border:ridge;
border:16px;
}

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.

border-top-style: ;

border-right-style: ;
border-bottom-style: ;
border-left-style: ;

dotted

dashed

solid

double

groove

inset

outset

ridge

none

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.

border-top-width: ;

border-right-width: ;
border-bottom-width: ;
border-left-width: ;

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.

border-top-color: ;

border-right-color: ;
border-bottom-color: ;
border-left-color: ;

border-color:#0000FF;

border-top-color:#990000;

border-right-color:#CC00FF;

border-bottom-color:#FFCC00;

border-left-color:#CC0000;

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.

table {border-color:green red blue yellow;}

4-DARS: Font va Matnga ishlov berish

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.

.asosiyMatn {font-family:Arial, Helvetica, sans-serif;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:Times New Roman, Times, serif;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:Courier New, Courier, monospace;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:Georgia;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family: sans-serif ;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:Helvetica;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:monospace;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:algerian;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:andalus;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:angsana new;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:batang;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:cursive;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.
.asosiyMatn {font-family:fantasy;}	Asosiy Matningiz ushbu font ko'rinishida bo'ladi.

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.

.asosiyMatn {font-size:small;}	small-kichik	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;}	Asosiy Matningiz ushbu ko'rinishida bo'ladi.
.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.

Download 267 Kb.

Do'stlaringiz bilan baham:

1 2 3 4