.
foydalanish CSS-xususiyatlari chegara oralig'i.
Shuni alohida ta'kidlash kerak chegara oralig'i bir butun sifatida jadval uchun belgilangan, mulk esa to'ldirish to'g'ridan-to'g'ri hujayralar uchun yoziladi.
Keling, bir misolni ko'rib chiqaylik:
Jadval (chegara: toʻliq 1px koʻk; hoshiyani yigʻish: alohida; hoshiya oraligʻi: 5px; ) td (chegara: qattiq 1px koʻk; toʻldirish: 10px; toʻldirish-pastki: 20px; )
Va natijada:
Darhol ta'kidlaymizki, siz bunday chekinishlarni ishlatishga urinmasligingiz kerak chegara-burilish: qulash. Axir, ushbu parametrdan foydalanganda hujayralar bir-biriga "yopishadi".
Va ularni bir-biridan ajratib turish uchun siz foydalanishingiz kerak chegara-siqilish: alohida. Ushbu qiymat standart qiymat ekanligini tushunish muhimdir. Va u faqat bu muammo qanday hal qilinishini aniq ko'rsatish uchun ishlatiladi. Agar biz ushbu qatorni o'chirsak, bir-biridan alohida joylashgan katakchalar ko'rinishidagi natija saqlanadi.
Darsning maqsadi: Jadval xususiyatlari va CSS jadvalini joylashtirish tamoyillari bilan tanishish
Keling, asosiy narsani ko'rib chiqaylik CSS xususiyatlari jadvallar
chegara
Mulk bittada ko'rib chiqiladi va bir vaqtning o'zida bir nechta xususiyatlarni o'z ichiga oladi:
- BORDER-STIL
- BORDER-WIDTH
- CHEGARA-RANGI
Bundan tashqari, umumiy qoida mavjud:
table.collapse(chegara-yiqilish:yiqilish; ) table.separate(chegara-siqilish:ajratish; )
Natija:
kengligi va balandligi
(stol balandligi va kengligi)
Qiymatlar:
Misol:
matnni tekislash
(gorizontal hizalanish)
Qiymatlar:
- markaz (markaz)
- chap (chap chekka bo'ylab)
- o'ng (o'ng chekka)
- asoslash (kenglik)
vertikal tekislash
(vertikal tekislash)
Qiymatlar:
- asosiy chiziq (asosiy chiziq bo'ylab)
- pastki (subindeks sifatida)
- super (superindex kabi)
- yuqori (yuqori chetida)
- o'rtada (o'rtada)
- pastki (pastki chekka bo'ylab)
- % (satr oralig'i balandligidan)
Misol:
to'ldirish
(jadvaldagi ichki chegaralar)
fon rangi (fon)
rang (matn rangi)
CSS jadvali tartibi
Ko'p sonli jadval xususiyatlari va dizayndagi o'zgarishlar tufayli jadvallar uzoq vaqt veb-sahifani joylashtirish uchun ba'zi bir standart edi. Jadvalning chegaralarini ko'rinmas qilib qo'ysangiz, uning alohida kataklaridan sahifaning alohida bloklari sifatida foydalanishingiz mumkin: sarlavha, menyu, altbilgi va boshqalar.
Ammo bu mutlaqo to'g'ri emas, chunki har bir tegning o'z maqsadi bor va jadvallar sahifa tartibida ishlatilmasligi kerak. Biroq, muqobil yo'qligi dizaynerlarni ushbu maxsus tartib usulidan foydalanishga undadi.
Endi boshqa yo'l bor - bu turdagi ishda jadvallarni asta-sekin veb-sahifa bilan almashtirgan qatlamlardan foydalanish. Biroq, bizning davrimizda ham ba'zi dizaynerlar stol tartibini muvaffaqiyatli ishlatishadi.
Ikki ustunli jadval sxemasi
Eng keng tarqalgan tartib usullaridan biri ikkita ustundir, ya'ni. Sahifa ikki qismga bo'lingan.
Odatda chap tomonda menyu va qo'shimcha elementlar, va o'ng tomoni asosiy, asosiy tarkib uchun.
Bunday holda, chap qismning kengligi ma'lum bir qiymatga o'rnatiladi, ya'ni. qattiq va o'ng tomoni sahifaning qolgan qismini egallaydi.
Bunday holda, siz butun jadvalning umumiy kengligini (jadval yorlig'i) width xususiyati (100%) orqali foizda belgilashingiz kerak va birinchi katak (td yorlig'i) uchun kenglikni (shuningdek, kenglik xususiyatini) piksellarda belgilashingiz kerak. yoki foizlar.
Misol: sahifaning asosiy ramkasini ikkita ustundan o'rnating: birinchisi - belgilangan o'lchamli, ikkinchisi - brauzerning qolgan maydoni uchun. CSS uslublaridan foydalanib vazifani bajaring ()
Ishlash:
| </head>
<tanasi >
<jadval identifikatori = "maket" hujayralar oralig'i = "0" >
<tr >
<td id = "chap" > 1</td>
<td id = "o'ng" > 2</td>
</tr>
</jadval>
...
|
...
Natija:
Endi jadvalning ikkita ustunini bir-biridan vizual ravishda ajratishga harakat qilaylik.
Misol: turli hujayra fonlarini o'rnatish (ikkita ustunni bir-biridan ajratish uchun) va ustunlar orasidagi masofani o'rnatish (ajratuvchi)
Ishlash:
Keling, yangi uslub xususiyatlarini qo'shamiz: /* chap katak uchun */ td#left( eni:200px; fon: #ccc; chegara:1px qattiq qora; /* chegaralarni vaqtincha belgilash */ ) /* o‘ng katak uchun */ td#right( fon: #fc3; chegara: 1px qora; /* chegaralarni vaqtincha belgilang */ ) /* ajratuvchi uchun */ #razdel( kengligi: 10px; /* ustunlar orasidagi masofa */ )
Hamma birgalikda:
| </head>
<tanasi >
<jadval identifikatori = "maket" hujayralar oralig'i = "0" >
<tr >
<td id = "chap" > 1</td>
<td id = "razdel" >
<td id = "o'ng" > 2</td>
</tr>
</jadval>
|
Ajratuvchi uchun yangi katak qo'shildi.
Natija:
Ustunlar orasidagi ajratgich ham kamroq sezilarli bo'lishi mumkin. Buning uchun biz chegara uslublaridan foydalanamiz.
Misol: qo'shni hujayralarni chegaralovchi nuqtali chiziqdan foydalanib, jadval ustunlari o'rtasida ajratgich hosil qiling
Ishlash:
Keling, hujayralar uchun yangi chegara xususiyatlarini qo'shamiz: /* chap katak uchun */ td#left( kengligi:200px; fon: #ccc; /* Chap ustun fon rangi */ /* yangi */ chegara-o‘ng: 1px chiziqli #000; /* o‘ng chiziqli chegara parametrlari * / )
Hamma birgalikda:
| </head>
<tanasi >
<jadval identifikatori = "maket" hujayralar oralig'i = "0" >
<tr >
<td id = "chap" > 1</td>
<td id = "o'ng" > 2</td>
</tr>
</jadval>
|
Natija:
Uchta ustunli jadval tartibi
Ruxsat etilgan yoki "suyuq" tartib tushunchasi mavjud.
Ruxsat etilgan CSS tartibi
- Foydalanish belgilangan tartib butun jadvalning kengligi piksellarda ko'rsatilgan, va keyin, monitor va brauzer oynasining o'lchamlaridan qat'i nazar, jadval har doim bir xil kenglikda bo'ladi.
- Unday bo `lsa Qolgan ustunlarning kengligi ham o'rnatilishi kerak.
- Siz bitta katakning kengligini aniqlay olmaysiz, keyin u qolgan hujayralar va butun jadvalning o'lchamlari asosida avtomatik ravishda hisoblab chiqiladi.
Misol: uch ustunli sahifa shablonini yarating. Ruxsat etilgan jadval tartibidan foydalaning:
- chap ustun - 150 piksel;
- o'rta ustun - 400 piksel;
Ishlash:
| </head>
<tanasi >
<jadval identifikatori = "maket" hujayralar oralig'i = "0" >
<tr >
<td id = "chap" > 1</td>
<td id = "markaziy" > 2</td>
<td id = "o'ng" > 3</td>
</tr>
</jadval>
|
Natija:
Kauchuk maket
- Jadval kengligi"kauchuk" dizayndan foydalanganda brauzer oynasi kengligining % sifatida belgilang. Bu. Brauzer oynasi o'zgarganda, jadval hajmi ham o'zgaradi.
- Barcha hujayralar kengligi o‘rnatish mumkin foizlarda.
- Ikkinchi variant - qachon ba'zi hujayralarning kengligi o'rnatilgan foizlarda, A ba'zilari - piksellarda.
Muhim: Jadvalning kengligidan qat'i nazar, barcha ustunlar kengligining yig'indisi 100% bo'lishi kerak.
Misol:
- chap ustun - 20%;
- o'rta ustun - 40%;
- o'ng ustun - 40%;
Ustunlar uchun fon o'rnating va ustunlarni chegara bilan vizual ravishda ajrating.
Ishlash:
| </head>
<tanasi >
<jadval identifikatori = "maket" hujayralar oralig'i = "0" >
<tr >
<td id = "chap" > 1</td>
<td id = "markaziy" > 2</td>
<td id = "o'ng" > 3</td>
</tr>
</jadval>
|
Natija:
Ikkinchi variantni ko'rib chiqaylik, markaziy ustunning kengligi brauzer tomonidan avtomatik ravishda tanlanganda; Misol tariqasida quyidagi rasmni keltirish mumkin:
Misol: uch ustunli sahifa shablonini yarating. Suyuqlik jadvali tartibidan foydalaning:
- chap ustun - 150 piksel;
- o'rta ustun - 40%;
- o'ng ustun - 200 piksel;
Ustunlar uchun fon o'rnating va ustunlarni chegara bilan vizual ravishda ajrating.
Ishlash:
| </head>
<tanasi >
<jadval identifikatori = "maket" hujayralar oralig'i = "0" >
<tr >
<td id = "chap" > 1</td>
<td id = "markaziy" > 2</td>
<td id = "o'ng" > 3</td>
</tr>
</jadval>
|
Natija:
Natija taxminan bir xil bo'ladi, faqat markaziy ustun tufayli "cho'zish" sodir bo'ladi.
Suyuqlik tartibida o'rnatilgan jadvaldan foydalanish
Agar ikkita ustunning kengligi foizlarda, uchinchisi esa piksellarda o'rnatilgan bo'lsa, siz faqat bitta jadval bilan ishlay olmaysiz. Shunday qilib, agar butun jadvalning kengligi 100 foiz, birinchi ustun 200 piksel, qolgan ustunlar esa 20 foiz bo'lsa, oddiy hisoblash birinchi ustunning o'lchami 60 foizni tashkil etishini ko'rsatadi. Bunday holda, piksellardagi belgilangan qiymat brauzer tomonidan qabul qilinmaydi va o'lcham foiz sifatida o'rnatiladi.
- Asl jadval ikkita katak bilan yaratilgan. Jadvalning kengligi foiz sifatida belgilanadi.
- Chap katak uchun(birinchi ustun) kengligi o'rnatiladi piksellarda.
- To'g'ri hujayra kengligi(boshqa ustunlar uchun asos) ko'rsatilmagan. Ushbu katakcha ichiga ikkita katakdan iborat ikkinchi jadval kiritilgan.
- Ichki jadval hujayralarining kengligi foiz sifatida o'rnatiladi.
- Ichki stolning kengligi 100 foizga o'rnatilishi kerak Shunday qilib, bu jadval tashqi jadvaldagi barcha bo'sh joyni egallaydi.
- Markaziy va o'ng ustunlarning kengligi butun tashqi jadvalga emas, balki katakning kengligiga nisbatan hisoblanadi.
Misol: uch ustunli sahifa shablonini yarating. Ichki jadval bilan suyuqlik sxemasidan foydalaning:
- chap ustun - 150 piksel;
- o'rta ustun - 60%;
- o'ng ustun - 40%;
Ustunlar uchun fonni o'rnating.
Ishlash:
|
Jadvallar o'rtasida "bo'shliq" bo'lmasligini ta'minlash uchun hujayra to'plami va hujayra oralig'i teg atributlari bu erda zarur.
Natija:
Hammaga salom! Shunday qilib, endi siz kerak bo'lganda qancha qator va ustunlardan iborat elementar jadvallarni yaratishni bilasiz. Yomon emas, yomon emas. Keling, ushbu jadvallarning dizayni haqida gapiraylik.
Oldingi darsda jadvallar chegarasiz ko'rsatilgan. Va, ko'rdingizmi, u shunday ko'rinadi, siz buni hatto belgi deb atay olmaysiz. HTML-da jadval chegaralarini yaratish uchun tegga qo'shishingiz kerak
xususiyat chegara, unga noldan boshqa qiymat berish.
Shunday qilib, stol uchun chegaralarni yasaymiz. Masalan, bizda mavjud bo'lgan narsa uchun:
| Yuqori chap katak | Yuqori o'ng katak |
| Pastki chap katak | Pastki o'ng katak |
Brauzerda natija:
Jadval chegaralarini qanday olib tashlash mumkin
O'z navbatida, HTML jadvalining chegaralarini olib tashlash uchun yoki ularni ko'rinmas holga keltirish uchun sizga atribut kerak bo'ladi. chegara qiymatni belgilang 0
. Ushbu oddiy qadamlardan so'ng, ramka olib tashlanadi.
Atribut chegaralarni yaratishga, lekin boshqarishga imkon beradi. Bu faqat ularning qalinligini o'zgartirishga imkon beradi.
Shuning uchun, endi biz bu haqda gaplashamiz CSS, uning xususiyatlari foydalanishga imkon beradi chegara Jadval atrofida har bir hujayra ichida ham, tashqi chegaralarini ham yarating.
Keling, jadvalning tashqi va ichki chegaralarini yaratish uchun CSS-dan qanday foydalanishni ko'rib chiqaylik.
Buning uchun jadvalimizdan chegara atributini olib tashlang va uslublarni qo'shing:
Misol jadvali
| Yuqori chap katak |
Yuqori o'ng katak |
| Pastki chap katak |
Pastki o'ng katak |
Brauzerda natija:
Endi har bir katakchaga chegaralar qo'shamiz. Buning uchun shunchaki uslublarni qo'shing:
Brauzerda natija:
HTML jadvalidagi hujayralar orasidagi to'ldirishni qanday olib tashlash mumkin
CSS yordamida aniqlangan chegara bir xil emasligiga rozi bo'ling tashqi ko'rinish, biz xohlagandek. Shubhasiz, estetik nuqtai nazardan, ishlash kerak bo'lgan narsa bor. Brauzer sahifasida siz sukut bo'yicha jadval va hujayra chegaralarini alohida ko'rsatishini ko'rishingiz mumkin. Misol buni aniq ko'rsatib turibdi.
Biroq, agar siz border-collapse CSS xususiyatidan foydalansangiz, qo'sh chegara deb ataladigan bunday chegaralardan butunlay xalos bo'lishingiz mumkin. Amalda bu shunday ko'rinadi: Jadval (chegara: qat'iy 1px ko'k; chegara-yiqilish: yig'ish; ) ... Natijada hujayralar orasidagi masofa olib tashlanadi:
Chegara atributiga tayinlangan yig'ish qiymati ikki tomonlama chegaralarni olib tashlash imkonini beradi. Ko'rib turganingizdek, natijada qo'shni hujayra chegaralari, shuningdek, hujayra ramkalari va tashqi stol ramkasi yiqilib ketadi. Ikkinchisiga kelsak, u butunlay olib tashlanishi mumkin. Va agar uni ko'rsatish kerak bo'lsa, siz uning kengligini oshirishingiz kerak. Shu tarzda biz jadvaldagi ajratgichlardan xalos bo'ldik. Va keyingi darsda vertikal va gorizontal chegaralarni qanday o'rnatishingiz mumkinligi haqida gapiramiz. Hammaga omad!
Yangi
Tug'ilgandan keyin hayz ko'rishni qanday tiklash mumkin:
|
