background-attachment - bu propertyni misol uchun body tagi uchun ishlatdingiz, va siz orqa fon rasmini web sahifa matni bilan birgalikda yuqori va quyi qismiga (sichqoncha roligi yordamida) harakatlanishini yoki harakatlanmasligini belgilashingiz mumkin bo'ladi. Bu property faqat background-image:url(rasm.jpg); ishlatilgandagina ishlatish mumkin bo'ladi, chunki o'zi yo'q fonni qando harakatlantiramiz, agar ishlatmasangiz orqa fon matn bilan birgalikda harakatlanadi.
background-attachment:scroll; - scroll pastga va tepaga harakatlantirish degan ma'noni beradi va bu qiymat default qiymatdir, ishlatmasangiz ham rasm matn bilan birga harakatlanadi.
background-attachment:fixed; - fixed qat'iy belgilangan degan ma'noni beradi, ya'ni siz bu qiymat yordamida orqa fon rasmini harakatlantirmasligingiz mumkin bo'ladi.
background-position - bu property bizga orqa fon rasmimizni joylashuv o'rnini belgilaydi va faqat rasm yuklatilinganda va background-repeat: no-repeat; bilan birga ishlatilinadi, chunki bu qiymat rasmning asl o'zini beradi. Qiymatlari quyida ko'rsatilingandir:
background-position: x% y%; - x va y larning o'rnida ixtiyoriy son bo'lishi mumkin faqat foiz qiymatida, birinchi yozilgan qiymat gorizontal ya'ni x o'qi yo'nalishida hisoblanadi va chap tarafga nisbatan rasmni qancha foiz qilib ko'rsatilinsa o'shancha uzoqlashadi, y esa orqa fonimizni yuqoriga nisbatan uzoqlashtiradi. Foiz belgisi (%) qo'yilishi shart aks holda pixel o'lchamda hisoblab yuboradi. Birinchi chap tarafdan gorizontal uzoqlashtirish qiymati (x%) keyin esa yuqoridan vertikal (y%) uzoqlashtirish qiymati yoziladi va ular orasida joy tashlanishi kerak (x%_y%). Quyida (a) misolda background-position: 10% 20%; qilib olingandir to'liq CSS kodi:
.a {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: 10% 20%; }
background-position: x y; - x va y larning o'rnida ixtiyoriy son bo'lishi mumkin faqat pixel qiymatida, birinchi yozilgan qiymat gorizontal ya'ni x o'qi yo'nalishida hisoblanadi va chap tarafga nisbatan rasmni qancha pixel qilib ko'rsatilinsa o'shancha uzoqlashadi, y esa orqa fonimizni yuqoriga nisbatan uzoqlashtiradi. Pixel belgisi (px) qo'yilishi shart emas. Birinchi chap tarafdan gorizontal uzoqlashtirish qiymati (x) keyin esa yuqoridan vertikal (y) uzoqlashtirish qiymati yoziladi va ular orasida joy tashlanishi kerak (x_y). Quyida (b) misolda background-position: 10 20; qilib olingandir ya'ni chap tarafda 10 pixel yuqoridan esa 20 pixel joy tashlash uchun buyruqdir, bu qoidani ba'zi browserlar o'qimaydi, to'liq CSS kodi:
.b {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: 10 20; }
background-position: left top; - chap-yuqori degan tarjimaga ega ya'ni orqa fonimizni chap va yuqoriga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (left_top). Bu qiymat yozilmasa ham bo'ladi chunki bu qiymat default qiymat hisoblanadi. Quyida (c) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
.c {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: left top; }
background-position: left center; - chap-markaz degan tarjimaga ega ya'ni orqa fonimizni chap va markazga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (left_center). Quyida (d) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
.d {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: left center; }
background-position: left bottom; - chap-quyi degan tarjimaga ega ya'ni orqa fonimizni chap va quyi qismga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (left_bottom). Quyida (e) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
.e {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: left bottom; }
background-position: right top; - o'ng-yuqori degan tarjimaga ega ya'ni orqa fonimizni o'ng tarafga va yuqoriga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (right_top). Quyida (f) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
.f {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: right top; }
background-position: right center; - o'ng-markaz degan tarjimaga ega ya'ni orqa fonimizni o'ng tarafga va markazga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (right_center). Quyida (g) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
.g {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: right center; }
background-position: right bottom; - o'ng-quyi degan tarjimaga ega ya'ni orqa fonimizni o'ng taraf va quyi qismga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (right_bottom). Quyida (h) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
.h {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: right bottom; }
background-position: center top; - markaz-yuqori degan tarjimaga ega ya'ni orqa fonimizni markazda yuqoriga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (center_top). Quyida (i) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
.i {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: center top; }
background-position: center center; - markaz-markaz degan tarjimaga ega ya'ni orqa fonimizni gorizontal va vertikal yo'nalish bo'yicha markazda qilib belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (center_center). Quyida (j) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
.j {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: center center; }
background-position: center bottom; - markaz-quyi degan tarjimaga ega ya'ni orqa fonimizni markazga va quyi qismga yopishgan holda belgilash uchun ishlatiladi, hech qanday pixel yoki foyiz belgilari qo'yilmaydi shunchaki so'zlar yozilsa bo'lgani, va orasida joy tashlanishi shart bo'ladi (center_bottom). Quyida (k) misolda bu holat ko'rsatilgandir va to'liq CSS kodi quyidagichadir:
.k {
background-image:url(002.jpg);
background-repeat:no-repeat;
background-position: center bottom;}
.a
|
.b
|
.c
|
.d
|
.e
|
.f
|
.g
|
.h
|
.i
|
.j
|
.k
|
.l
|
background - bu property yuqorida ko'rsatilingan hamma qiymatlarni umumiy holda bitta qilib yozib olish uchun qulaylik yaratish maqsadida ishlatiladi, masalan ushbu CSS kodga e'tibor bering:
background: #ffffff url(002.jpg) no-repeat center center; bu holda orqaga qora rang berib, rasmni asl holatini yuklab, keyin gorizontal va vertikal yo'nalish bo'yicha markazga joylanyapti. ushbu holat yuqorida (l) misolda ko'rsatilingandir. Kiritgan CSS qiymatlarizni HTML o'zi aftomatik tarzda o'qiydi va nima demoqchi ekanligizi qiymatlardan ajrata oladi. Quyida to'liq CSS kodi berilgandir:
.l { background: #ffffff url(002.jpg) no-repeat center center;}
Quyida HTML bilan CSS kodlarni equivalent (bir-birini o'rnini bosa oladigon) yozilish holati misoli keltirilgandir, ikkala holat ham bir hil natija beradi, farqi CSS yordamida siz bitta website ingizni kamida 20 ta sahifasi bo'lsa hammasini qismi ichiga ushbu kodlarni kiritib chiqishingiz shart bo'lmaydi.
HTML kod
|
CSS kod
|
|
body {
background-image: url(rasm.jpg);
color: #FFFFFF;
background-color: #000000;
}
|
Mashq: Quyidagi background-image larni o'zingizga yuklab olib huddi shu ko'rinishda jadval ichiga joylashtiring, jadval border="0" qilib oling. Keyin bu rasmlar ustida yuqorida o'tilgan qoidalar bo'yicha har hil amallarni mustaqil bajarib chiqing.
|
HTML kodlari yordamida tuzilgan jadvallarga biroz ishlov berish kerak bo'ladi, va bu holda CSS ning Border property si juda qo'l keladi. Yani, HTML shunchaki jadval tuzsa, u javalning chiziqlari turi, rangi, qalinligi va boshqa ishlovlar beriladi. Ishlovlar jadvalning har tamoni uchun alohida ham berish mumkindir. Buning uchun jadvalning qaysi tamoniga qanday ishlov berilishini ko'rsatsangiz bo'lgani. Border chegara deganidir. Quyidagi barcha funksiyalarni Internet Explorer 8.0 da o'rganish tafsiya etiladi. Agar kutilmagan natijaga biror holatda erishilmaganini sezsangiz boshqa browserlarda ochib ko'ring albatta natijaga erishasiz.
Avvalo jadvalga umumiy ishlov berishni ko'rib chiqamiz.
border: ; - property ning valusi (:qiymati;) jadvalning hamma chiziqlari uchun o'rinlidir.
border:#ffff00; - # belgisidan keyin qo'yilgan istalgan Hexa kod jadvalni rangini belgilaydi. border:yellow; deb ham belgilash mumkindir. Uning uchun avvalo bo'lishi kerak bo'ladi, bo'lsa jadvalimiz chiziqlari yo'q degani shuning uchun rang berishdan ma'no yo'q.
table {
border:#ffff00;
}
|
|
border:medium; - medium o'rtacha degan ma'noni beradi, ya'ni jadval chegarasi o'rtacha qalinlikda degani. 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 qalinligini belgilashning hojati yo'qdir.
table {
border:medium;
}
|
|
|
|
table {
border:medium;
border:#ff00ff;
}
|
|
border:thin; - thin ingichka degan ma'noni beradi, ya'ni jadval chegarasi ingichka degani. 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 qalinligini belgilashning hojati yo'qdir.
table {
border:#ffff00;
border:thin;
}
|
|
border:thick; - thick qalin degan ma'noni beradi, ya'ni jadval chegarasi qalin degani. 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 qalinligini belgilashning hojati yo'qdir.
table {
border:#0000ff;
border:thick;
}
|
|
border:2px; - px pixel o'lchamdaham, belgilash mumkin istagancha qalinlikda belgilashingiz mumkin. 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 qalinligini pixelda belgilashning hojati yo'qdir.
table {
border:#0000ff;
border:2px;
}
|
|
|
|
table {
border:#0000ff;
border:3px;
}
|
|
|
|
table {
border:#0000ff;
border:4px;
}
|
|
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.
table {
border:#0000ff;
border:dashed;
}
|
|
|
|
table {
border:#0000ff;
border:3px;
border:dashed;
}
|
|
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.
table {
border:#0000ff;
border:dotted;
}
|
|
|
|
table {
border:#0000ff;
border:3px;
border:dotted;
}
|
|
|
|
table {
border:#0000ff;
border:6px;
border:dotted;
}
|
|
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.
table {
border:#0000ff;
border:groove;
border:16px;
}
|
|
border:hidden; hidden berkinish, yashinish degan tarjimalarga egadir. Ya'ni chegaralar ko'rinmas shaklga keladi.
table {
border:#0000ff;
border:hidden;
}
|
|
border:inset; qalinligini 16 pixel qilib oldim sizga farqi ko'rinishi uchun. Chap va Yuqori qismlari, quyi va o'ng tamonlaridan farqlidir.
table {
border:#0000ff;
border:inset;
border:16px;
}
|
|
border:none; none yo'q deganidir, ya'ni hech qanday chegara yo'q.
table {
border:#0000ff;
border:none;
}
|
|
border:outset; qalinligini 16 pixel qilib oldim sizga farqi ko'rinishi uchun. Chap va Yuqori qismlari, quyi va o'ng tamonlaridan farqlidir.
table {
border:#0000ff;
border:outset;
border:16px;
}
|
|
border:ridge; ridge inset bilan outset ning birlashmasidir.
table {
border:#0000ff;
border:ridge;
border:16px;
}
|
|
border:solid; solid shunchaki tekis qattiq deganidir.
table {
border:#0000ff;
border:solid;
border:16px;
}
|
|
Do'stlaringiz bilan baham: |
