CSS: meza design. mifano ya usajili

Kufanya meza na CSS - ya somo kuvutia na kuwajibika. Mbinu ya biashara hii haja ya ufanisi, maarifa ya mitindo yote iwezekanavyo. Aidha, ni muhimu wamiliki hisia ya uzuri ili si kuitisha mbali wageni wao ubunifu.

meza yanaweza kubadilisha karibu kila kitu. Usanifu bora inahusisha matumizi ya CSS meza kubuni mipaka, meza background, simu ya background, pengo baina yao na zaidi. Fikiria msingi zaidi.

mpaka meza

CSS meza style design daima inahusisha mchezo na mpaka (sura). meza wote default si mtaro fremu. Hiyo ni, ni sawa na 0 pikseli. Lakini hii inaweza kuwa corrected na mpaka mali.

Unaweza kutaja sura ya nje kwa meza nzima:

meza {mpaka: 3px imara nyeusi; }

Shukrani kwa mstari huu katika meza wote katika tovuti ambayo inatumia mtindo huu ni nyeusi fremu. Kumbuka kuwa mpaka tu kwenye kingo, lakini si ndani ya meza. Kwa ajili ya mistari kiini na sura maalum vinginevyo.

th, td {mpaka: 3px imara nyeusi;}

unene na rangi, unaweza kubainisha yoyote. Kumbuka kwamba mipaka si mara mbili wakati splicing seli.

neno inaashiria imara usajili kuendelea. Unaweza kutaja thamani nyingine.

ni kawaida kutumika frame imara, kama inaonekana kuvutia zaidi na si kuvuruga mawazo kutoka maudhui kuu ya tovuti.

mali mpaka inaweza maalum kwenye bodi. mpaka unaweza tu kuwekewa juu, chini, kushoto au upande wa kulia. Kwa sababu wakati mwingine wala haiwezekani chaguo na fremu kwa meza nzima kwa mara moja.

meza {mpaka-juu: 1px imara nyekundu; }

Hivyo unaweza kuweka frame kwa juu ya jedwali tu. Vile vile kwa upande wa mwingine yeyote, badala ya kuandika tu juu: haki, kushoto au chini.

header meza

Meza header inaweza maalum kwa kutumia tag . Lebo hii inaweza kuwa katika CSS kujiandikisha mengi ya mali kwa faini-tuning. kubuni CSS meza ni nzuri kwa sababu kuna uwezekano wa kuingiza mambo ya njia unataka.

Kichwa hiki kuonyeshwa katika njia ile ile kama kawaida katika vitabu (kama vile "Jedwali 1").

Unaweza kutaja eneo la cheo na mali maelezo ya upande (juu au chini). Kuandaa kushoto au kulia hufafanuliwa kwa mali text-align.

meza background

Background ya meza inaweza kuwa alama yoyote au mfano. Rangi seti mali background-rangi. majina ya mali kikamilifu sambamba na matumizi katika hotuba. Ni kuwezesha hifadhi mara nyingi.

rangi inaweza maalum kama jina, na Usimbaji tofauti. Aidha, unaweza kubainisha yafuatayo:

• Uwazi - uwazi.
• Kurithi - rangi ni sawa na ile ya kipengele mzazi.
• Awali - chaguo-msingi.

Chaguo uwazi inaweza kutumika katika kesi hizo ambapo meza wote katika maandishi katika faili CSS ni alifanya katika rangi moja, lakini katika kesi hii hakuna haja.

Aidha, background inaweza kuwa picha. Ili kufanya hivyo, kwa mtindo kuagizwa background-image mali. njia ni kama hii:

url ( 'URL')

njia ya faili huweza kuwa ndugu au kabisa.

kujaza Zaidi ngumu inaweza kufanyika kwa gradient:

• linear-gradient ();
• radial-gradient ();
• kurudia-linear-gradient () na kurudia-radial-gradient () - gradient kurudiwa.

background kiini

Mbali na background kwa ujumla, unaweza kubainisha background milia katika safu wima au mistari. Kwa ajili ya usajili wa mali ni kutumika mara nyingi sana, kwa sababu kujitenga Visual ya mistari rahisi kusoma habari.

Mbali na kupishana, na unaweza kutaja idadi ya safu maalum au mfululizo. Kwa mfano kama hii:

• tr: nth mtoto (hata) {...} - bayana iliyoingiana;
• tr: nth mtoto (1) {...} - ishara ya tabia za mfululizo hasa;
• td: nth mtoto (hata) {...} - ishara ya kubadilisha nguzo;
• td: nth mtoto (1) {...} - ishara ya tabia za safu fulani.

Mbali na hilo mlolongo na idadi inaweza maalum - kwanza (td: kwanza kwa mtoto) au mwisho (td: mwisho mtoto).

pengo kati ya seli

Katika CSS, meza kubuni utapata kuondoa nafasi kati ya seli. Kwa chaguo-msingi walipo. Kwa mfano, kama wewe kuanzisha sura katika meza bila kuweka umbali kati ya mipaka, itakuwa hapa matokeo haya.

Kubali, inaonekana si nzuri sana na si rahisi kusoma. Watumiaji watakuwa na alika katika macho kwa sababu ya hii. Ondoa mapungufu haya inaweza kuwa kwa kuandika tu line kama kwa mtindo jedwali:

mpaka-kuanguka: kuanguka

Lakini pia hutokea kwamba umbali, kinyume chake, lazima kuongezeka. Aidha, ukubwa wa pengo inaweza maalum kama kati ya nguzo na kati mistari. Kuonyesha kwamba thamani (badala kuanguka):

mpaka-kuanguka: tofauti

Lakini hatua hiyo zinaonyesha kuwa ni muhimu kutenganisha seli. Kama ilivyokuwa sehemu yao, imeelezwa mali ya ziada:

mpaka-nafasi: 20px.

Kama unataka kutaja umbali tofauti kati ya safu na nguzo, inaonyesha mambo mawili:

mpaka-nafasi: 10px20px.

tofauti katika browsers

Kumbuka kwamba katika CSS design meza inaweza kuonekana tofauti, kulingana na browser. Hasa mbaya ilivyo na matoleo ya zamani, ambayo uvumbuzi katika CSS haitumiki.

hapo juu ni mfano wa sura thicknesses kwa maadili digital.

Kwa mfano huu, unene wa muafaka kwa constants.

mitindo mpaka pia hutofautiana kwa kiasi kikubwa.

Kwa hiyo, maendeleo daima kuona matokeo katika browsers tofauti.

Katika CSS design meza ilipendekeza kwa kuangalia aina ya browser. Hasa tatizo kubwa hutumiwa kuwa kwa watumiaji na matoleo ya zamani ya Internet Explorer.

watengenezaji juu sana inaweza, kulingana na browser kuungana files tofauti kabisa CSS. Na Mtu akitoa kuangalia katika kila au baadhi style fulani (darasa).

matatizo makubwa zaidi hutokana na vivuli.

CSS: Table Format Mifano

Usajili inaweza kabisa mbalimbali. Yote inategemea tovuti nzima na muundo wake. Wote wanapaswa kuwa pamoja na rangi variegated. Pia inafanya kubwa jukumu na ladha developer. Hisia ya uzuri ni tofauti.

Sisi kutoa baadhi ya mifano ya meza mbalimbali. takwimu hapo juu unaonyesha matumizi ya Tilt na kucheza na rangi ya asili na mpaka.

Wengi watakuwa na kuvutia mfano wa kubuni nzuri nadhifu ambayo kukata watumiaji jicho. mfano halisi hii ni sahihi katika karibu yoyote hali hiyo.

kingo zinaweza kufanywa mviringo. Inaonekana pretty nice.

hitimisho

Kama unavyoona, kwa muonekano wa meza katika CSS kuna zana nyingi. Kila parameter pia kiasi kubwa ya chaguzi thamani. Kama matumizi yake kwa wakati mmoja, unaweza kuunda masterpieces. Hasa kama wewe kufanya adaptive kubuni kwa vivinjari wote.

Jambo kuu katika kubuni - si overdo yake na madhara. Kila kitu lazima kufanyika kwa kiasi. Mara ya kwanza, mpangilio kama majaribio na kutumia ujuzi wao wote mara moja. Kutokana na meza ni mali oversaturated. Jaribu kuepuka hitilafu hizi.

Zaidi ya hayo, baadhi ya vigezo inaweza kuingilia kati na kila mmoja. Kwa mfano, hakuna haja kutaja rangi ya asili ya meza, wakati ikiwa bado ni kuweka background picha, ambayo itakuwa kuingiliana maalum rangi.