CSS: stol dizayn. ro'yxatga misollar

Dars qiziqarli va mas'uliyatli - CSS bilan jadvallar qilish. Bu biznes uchun yondashuv barcha mumkin bo'lgan uslublar ilmi bilan, barkamol kerak. Bundan tashqari, ularning ijod mehmonlarni off qo'rqitish uchun emas, balki maqsadida go'zallik tuyg'usi egalik qilish kerak.

jadvallar deyarli hamma narsani o'zgartiradi. Go'zal dizayn CSS jadvallar dizayn chegaralari, stol fon, hujayra fon, ular va yana o'rtasidagi farq foydalanishni o'z ichiga oladi. eng asosiy o'ylab ko'ring.

stol chegara

CSS stol uslubi dizayn har doim bir chegara (ramka) bilan o'yin o'z ichiga oladi. Barcha standart jadvallar ko'rinishi ramka emas. Ya'ni, u 0 piksel tengdir. Lekin, bu xususiyat chegarasi orqali tuzatadi.

Siz butun jadval uchun tashqi ramkani tanlashingiz mumkin:

stol {border: 3PX qora jism; }

Bu uslub foydalanadi saytida barcha jadvallar bu line tufayli qora ramka bo'ladi. Eslatma chekkalarida emas, balki stol ichki chegara faqat shu. Uyali aloqa liniyalari va freym uchun, aks holda ko'rsatilgan.

th, td {border: 3PX qattiq qora;}

qalinligi va rangi, siz har qanday ko'rsatish mumkin. hujayralarni birlashma qachon chegaralari ikki barobar emas ekanligini yodda tuting.

so'z mustahkam uzluksiz ro'yxatga anglatadi. Siz boshqa qiymatlarni tanlashingiz mumkin.

u yanada jozibador ko'rinadi sifatida eng keng tarqalgan, qattiq ramka ishlatiladi va sayt asosiy mazmuni e'tiborini chalg'itish emas.

chegara mulk bortida ham belgilangan bo'lishi mumkin. chegara faqat chap yoki o'ng tomoni, yuqori, pastki uchun o'rnatishingiz mumkin. Ba'zi hollarda bu birdaniga butun jadval uchun ramka bilan mumkin variant emas, chunki.

stol {border-to'p: 1px qizil qattiq; }

Bas, siz faqat jadvalni yuqori kvadrat uchun o'rnatishingiz mumkin. Xuddi boshqa har qanday partiyalar, o'rniga faqat eng yozish uchun: o'ng, chap yoki pastki.

stol header

Stol header teg yordamida belgilangan bo'lishi mumkin. Ushbu teg uyg'unlikka uchun xususiyatlari ko'p ro'yxatdan uchun CSS bo'lishi mumkin. IT xodimlari kerakli tarzda manevra mumkin, chunki CSS stol dizayn yaxshi.

Bu nom (masalan, "1-jadval" kabi) kitoblarida bir standarti bir xil tarzda ko'rsatiladi.

Siz nomi va mulkiy caption-yon (yuqori yoki pastki) manzilni ko'rsatish mumkin. o'ng chap tenglashtirish yoki mulkiy matn-align bilan belgilanadi.

fon jadvallar

stol fon har qanday rang yoki namuna bo'lishi mumkin. Rangi bir xususiyat fon-rangini belgilaydi. so'z foydalanish bilan to'liq izchil xususiyatlari nomlari. Bu bir necha marta saqlash oson bo'ladi.

rang nomi va turli kodlash sifatida belgilangan bo'lishi mumkin. Bundan tashqari, siz quyidagi ko'rsatish mumkin:

• Shaffof - Shaffof.
• Meros - rang ota elementning bir xil bo'ladi.
• Boshlang'ich - default.

shaffoflik bilan Option CSS faylida matn barcha jadvallar, bir rangli qilingan bu holatlarda foydalanish mumkin, lekin bu holda hech qanday ehtiyoj bor.

Bundan tashqari, fon tasvir bo'lishi mumkin. uslub belgilangan background-image mulk, Buning uchun. yo'l, bu kabi bo'ladi:

url ( 'url')

faylga yo'l nisbiy yoki mutlaq bo'lishi mumkin.

Yanada murakkab plomba bir gradient bilan amalga oshirilishi mumkin:

• chiziqli-gradient ();
• radial-gradient ();
• takrorladi-chiziqli-gradienti () va takrorladi-radial-gradienti () - gradient takrorlanadi.

fon hujayra

umuman bir fon tashqari, siz satr yoki ustunlar bir qatorli fon ko'rsatish mumkin. oson liniyalari vizual ajratish ma'lumotni o'qish uchun, chunki mulkni ro'yxatga olish uchun, juda tez-tez ishlatiladi.

almashinishida tashqari, va siz bir alohida ustun yoki qatorni sonini tanlashingiz mumkin. Bu kabi Masalan:

• UZ: nth-bola (hatto) {...} - nazar tashlab belgilash;
• UZ: nth-bola (1) {...} - bir alohida satr xususiyatlari ko'rsatish;
• Td: nth-bola (hatto) {...} - ustunlar galma bir ma'lumot;
• Td: nth-bola (1) {...} - muayyan ustun xususiyatlari bir ma'lumot.

natija va raqamlar ko'rsatilgan bo'lishi mumkin Bundan tashqari - birinchi (td: birinchi bola) yoki o'tgan (td: Oxirgi-bola).

hujayralar o'rtasida farq

CSS, stol dizayn sizga hujayralar orasidagi masofani yaqin olib tashlash imkonini beradi. Sukut bo'yicha ular. Agar chegaralari orasidagi masofani belgilash holda jadvalda ramkani belgilangan Misol uchun, agar, bu yerda bu natija bo'ladi.

Rozi, u juda chiroyli ko'rinadi va o'qish uchun qulay emas. Foydalanuvchilar, chunki bu nazarida dalgalanmayı bo'ladi. stol uslubidagi faqat bunday chiziq yozib bo'lishi mumkin bu kamchiliklarni bartaraf:

chegara-buzish: buzilish

Lekin u ham masofa, aksincha, ortib lozim bo'ladi. Bundan tashqari, bo'shliqlar hajmi ustunlar o'rtasida va chiziqlar orasidagi sifatida belgilangan bo'lishi mumkin. bir qiymati (o'rniga siqila) deb ko'rsatish uchun:

chegara-buzish: alohida

Lekin, bunday harakat u hujayralarga ajratish zarur, deb ko'rsatadi. ularning ulushi edi, qo'shimcha mulkni ko'rsatilgan:

chegara-oralig'i: 20px.

satr va ustunlar orasidagi farq masofani belgilash bo'lsangiz, u ikki narsani bildiradi:

chegara-oralig'i: 10px20px.

brauzerlar farq

CSS dizayn jadvallar brauzer qarab, turli qarash mumkin yodda tuting. Ayniqsa, yomon CSS yangiliklar mavjud emas, deb, katta versiyalari ham shundaydir.

Yuqoridagi raqamli qadriyatlarga ramka kalınlıklarının namunasidir.

Bu, masalan, konstantalar uchun ramkalar qalinligi.

chegara uslublar ham katta farq qiladi.

Shuning uchun, rivojlanish har doim turli brauzerlarda natija qarang.

CSS dizayn jadvallar brauzer turini tekshirish uchun tavsiya. Ayniqsa, ishlatiladigan katta muammo Internet Explorer oldingi versiyalarida bilan foydalanuvchilarga bo'lishi.

Juda ilg'or Dasturchilar, brauzer qarab butunlay boshqacha CSS fayllarni ulash mumkin. Va kimdir har bir chek yoki ba'zi bir maxsus uslubi (sinf) qiladi.

Eng muammolar soyalar paydo.

CSS: Table Format misollar

Ro'yxatdan juda o'zgarishi mumkin. Bu butun sayt va uning dizayni bog'liq. Barcha birlashgan va rang-barang ranglar lozim. Bundan tashqari, u buyuk o'rni va lazzat Ishlab qiladi. go'zallik tuyg'usi har xil bo'ladi.

Biz turli jadvallar bir necha misollar keltiradi. Yuqoridagi rasmda og'ishish foydalanishni ko'rsatadi va fon rangi va chegarasi bilan o'ynash.

Ko'pchilik ko'z foydalanuvchilar kesib bo'lmaydi chiroyli ozoda dizayni qiziqarli misol bo'ladi. Ushbu tartibga solish, deyarli har qanday vaziyatda o'rinli bo'ladi.

qirralarning yumaloq amalga oshirilishi mumkin. Bu juda ham yaxshi ko'rinadi.

xulosa

Ko'rib turganingizdek, CSS jadvaldagi paydo ko'p asboblar mavjud. Har bir o'lchov ham qiymati variantlari katta miqdori. Agar bir marta uni hamma foydalanish bo'lsangiz, asarlari yaratishingiz mumkin. Ayniqsa, siz qilsangiz adaptiv dizayn barcha brauzerlar uchun.

dizayn asosiy narsa - ta'siri bilan harakat qilmoq emas. Hamma narsa me'yorida amalga oshirilishi lozim. Avvaliga, tartib tajriba va darhol barcha bilimlarini foydalanish kabi. stol natijasida oversaturated xususiyatlari bor. Bu xatolarni oldini olish uchun harakat qilib ko'ring.

Bundan tashqari, ba'zi parametrlar bir-biriga xalaqit berishi mumkin. Misol uchun, belgilash uchun hech qanday ehtiyoj bor fon rangini , stol esa hali ham belgilangan rang ustiga o'raydigan qiladi fon tasvirini, u erda o'rnatilgan bo'lsa.