Përshëndetje, sot do të flasim për një atribut kaq të rëndësishëm në CSS si krijimi i një kufiri. Një kufi përdoret shumë shpesh për të kornizuar tekstin, për të ndarë një element dizajni nga një tjetër, dhe është e dobishme për çdo webmaster të dijë se si të përcaktojë një kufi në CSS.
Vendosni stilin e kufirit në CSS.
Gjëja e parë që duhet të kërkoni kur krijoni një kufi në faqen tuaj është stili i kufirit CSS. Falë kësaj, ju do t'i tregoni shfletuesit se cila linjë duhet të shfaqë kornizën. Për shembull, le të vendosim një vijë të fortë për një titull, si në kornizat e rregullta. Për ta bërë këtë, natyrisht, na duhet një skedar stili që mund ta krijoni vetë, dhe unë kam përshkruar tashmë se si ta bëjmë këtë në artikuj të tjerë në blogun tim.
Unë nuk do të krijoj skedar i ri por do të përdor të vjetrën, përveç kësaj këtu ruhen titujt nivele të ndryshme për të cilat do të krijojmë korniza. Le te pyesim tipe te ndryshme kornizë për titullin e nivelit të parë dhe e cila vendoset nga etiketa h1. Për ta bërë këtë, ne shkruajmë tekstin e mëposhtëm në skedarin e stilit: h1 (stili i kufirit: solid;) dhe shqyrtojmë shkurtimisht atë që kemi shkruar. h1 është ajo që kemi përcaktuar se për cilin element do të vendosim komandën border, border-style që do të thotë se për elementi i dhënë ju duhet të vendosni një kornizë të një stili të caktuar, dhe solid tregon stilin e shfaqjes së kornizës, në këtë rastështë një veçori solide.
Mund të ndryshojmë stilin e shfaqjes së kornizës dhe për këtë na duhet vetëm të vendosim parametra të rinj dhe tani do të tregoj se cilat komanda janë të disponueshme dhe si shfaqen ato në faqe.
Opsionet e kornizës:
të ngurta ose vijë e fortë.
Vijë me pika.
vijë e ndërprerë.
vijë e dyfishtë - dyfish e ngurtë.
Këto janë stilet bazë që mundeni vendos stilin e kufirit në css, mund të mësoni më shumë për të gjitha komandat nga specifikimi CSS.
Deri më tani, ne kemi stiluar të gjithë kornizën, por gjithashtu mund të vendosim një parametër në mënyrë specifike për secilën nga anët, dhe fleta e stilit na e jep këtë aftësi. Katër komanda do të na ndihmojnë për këtë: stili i kufirit majtas (vija e majtë) stili i kufirit-lart (vija e sipërme) stili i kufirit-djathtas (vija djathtas) dhe stili i kufirit-poshtë (vija e poshtme).
Tani le t'i japim kokës tonë një stil të ndryshëm për secilën anë. Le të shkruajmë një komandë për të katër anët:
h1 (
border-left-style:groove;
border-top-style: solid;
kufiri-djathtas-style: dyfishtë;
stili i kufirit të poshtëm: me pika;)
Dhe në praktikë do të shohim rezultatin e mëposhtëm.
Për të vendosur kufirin, duhet të përdorim atributin e stilit të gjerësisë së kufirit për të cilin mund të vendosim disa parametra: i pari është të caktojmë madhësinë e kufirit në piksel ose të vendosim trashësinë me vijën e hollë (vijë e hollë), mesatare (në mes). vijë) ose komandat e trashë (vijë e trashë). Mund të vendosim gjithashtu trashësinë e vijës për çdo anë të kornizës, pavarësisht se çfarë stili është vendosur për pjesën tjetër.
Së pari, le të mësojmë se si të vendosim gjerësinë e vijës së kufirit drejtpërdrejt për të gjitha anët. Për ta bërë këtë, ne vetëm duhet të marrim dhe vendosim komandën e gjerësisë së kufirit dhe të përcaktojmë madhësinë e linjës për të. Për të vendosur trashësinë, teksti do të duket si ky:
h1 (
kufiri-style: solid;
gjerësia e kufirit: e hollë;
}
Komanda e hollë mund të zëvendësohet me mesatare ose të trashë, ose mund të specifikoni trashësinë në piksel, duke u siguruar që të specifikoni një njësi matëse, për shembull, një madhësi prej katër pikselësh-4 px.
Tani do të vendosim parametrat e trashësisë për secilën anë të kornizës sonë. Ashtu si me vendosjen e stilit, parametrat kufi-majtë-gjerësi (trashësia e vijës së majtë), kufiri-lartë-gjerësia (trashësia e vijës së sipërme), kufiri-djathtas-gjerësia (trashësia e vijës së djathtë) dhe kufiri-fundi-gjerësia (trashësia e vijës fundore) do të na ndihmojë. linjat). Për ta bërë këtë, ne do të shtojmë katër rreshta të përmbajtjes së mëposhtme në skedarin e stilit:
h1 (
kufiri-style: solid;
kufiri-left-width:mesatar;
kufiri-lart-gjerësia:i hollë;
kufiri-djathtas-gjerësia: i trashë;
kufiri-fundi-gjerësia:7px;
}
Dhe tani të katër anët e kornizës sonë do të kenë trashësinë e tyre.
Si të vendosni ngjyrën e kufirit në CSS.
Le të vendosim tani ngjyrën e kufirit në CSS dhe komandat border-left-color , border-top-color, border-right-color dhe border-bottom-color do të na ndihmojnë me këtë për të vendosur ngjyrën për majtas, lart, djathtas. dhe vijat kufitare të poshtme, përkatësisht. Për ta bërë këtë, ne përshkruajmë komanda dhe shtojmë një parametër ngjyrash në secilën komandë.
h1 (
kufiri-style: solid;
border-left-color:#00CCCC;
border-top-color:#6633CC;
border-right-color:#CCCCCC;
border-bottom-color:#66CC99;
}
Dhe tani le të shohim rezultatin e aplikimit parametri i dhënë.
Specifikimi i një ndryshoreje globale për të shkurtuar hyrjen.
Tani le të shohim se si mund të shpëtojmë nga struktura dhe hyrje të tilla të mëdha. Për ta bërë këtë, do të na duhet të vendosim kufirin global të atributit në të cilin do të vendosim parametra të tillë si trashësia e kornizës, stili i kornizës dhe ngjyra, dhe e gjithë kjo do të përshtatet jo në të paktën tre rreshta, por vetëm në një rresht.
Për ta bërë këtë, ne shkruajmë rreshtin:
h1 (
kufiri: 5px solid #3399FF;
}
në rresht, së pari tregojmë trashësinë e vijës së kornizës, pastaj një hapësirë dhe tregojmë stilin e kornizës, dhe përsëri, pas një hapësire, tregojmë ngjyrën e kornizës. Kjo është e gjitha që kemi reduktuar rekordin në një rresht.
Shpresoj që falë këtij artikulli do të jeni në gjendje të vendosni kufij për të gjithë elementët në CSS. Unë u përpoqa të ndaloja vëmendjen tuaj në komandat më të nevojshme dhe t'ju tregoja në detaje se si të vendosni një kufi në CSS, të vendosni një stil kufiri në CSS dhe të vendosni një ngjyrë kufiri në CSS.
Për të ndarë qartë përmbajtjen e një qelize nga një tjetër, kufijtë u shtohen qelizave. Përgjegjës për krijimin e tyre parametri i kufirit etiketë
| Cheburashka | Krokodili Gena | Shapoklyak |
Kornizat e krijuara në këtë mënyrë ndryshojnë pak në pamjen e tyre në shfletues të ndryshëm.
Oriz. 1. Korniza e marrë duke përdorur parametrin e kufirit
Për të marrë një kornizë të një lloji, rekomandohet të përdorni kufirin e etiketës së stilit , duke e aplikuar atë në qelizat e tabelës (etiketa
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Dallimi midis kufijve të tabelës me dhe pa parametrin e kolapsit të kufirit është paraqitur në Fig. 2.
a
b
Oriz. 2. Pamja e tabelës kur përdoret atributi border-collapase
Në fig. 2a tregon kornizën e paracaktuar të tabelës. Vini re se brenda tabelës, të gjitha linjat janë me gjerësi të dyfishtë. Shtimi i parametrit border-collapse e heq këtë veçori dhe trashësia e të gjitha linjave bëhet e njëjtë (Fig. 2b).
Për të zhvilluar linja të të njëjtit lloj brenda tabelës, mund të shkoni në anën tjetër. Duhet të shtohet për përzgjedhës
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Kjo metodë mund të ketë ndryshime, për shembull, për përzgjedhësin
ose
Në këtë shembull, ngjyra e sfondit të faqes së internetit futet përmes veçorisë së sfondit të shtuar në përzgjedhësin BODY. Edhe pse Ngjyra e bardhëështë vendosur si parazgjedhje, ndonjëherë është e dëshirueshme ta vendosni atë në mënyrë që përdoruesi të mos specifikojë ngjyrën e tij të sfondit përmes cilësimeve të shfletuesit. Vijat e tabelës duhet të kenë të njëjtën ngjyrë, me ç'rast ato nuk shfaqen qartë dhe vetëm i ndajnë qelizat ndërmjet tyre. Rezultati i shembullit 4 është paraqitur më poshtë.
Oriz. 3. Lloj kufijsh që përputhen me ngjyrën e sfondit Kornizë tavoline element i rëndësishëm. Është i gjithanshëm dhe përdoret shpesh. Ky tutorial do të mbulojë se si të kornizoni një tabelë, qelizë dhe rresht duke përdorur një atribut, por pjesa kryesore e tutorialit do të fokusohet në vetitë css, sepse kufiri bëhet i përgjithshëm kur përdoren stilet CSS. Krijimi i një kornize duke përdorur një atributAspak një atribut i zgjerueshëm, do të thoja i pakuptimtë. Atributi border vendos gjerësinë e kufirit dhe kaq. Më tej është një shembull:
Një mënyrë e thjeshtë për të krijuar një kufi rreth një elementiUnë them menjëherë shënime të detajuara Nuk do të jap, pasi do të ketë një mësim të madh për pronën kufitare në të ardhmen dhe ndoshta më shumë se një. Pronë Gjenerike kufiri është në gjendje të vendosë trashësinë, stilin dhe ngjyrën e kufijve (kornizave) menjëherë. Trashësia mund të jetë çdo, ngjyra e kufijve vendoset në format heksadecimal, format rgb Dhe fjalë kyçe(e kuqe, e zezë, etj.). Cilat janë stilet, fotografia më poshtë (foto është marrë nga faqja e internetit htmlbook.ru) dhe më pas një shembull: td ( Kornizë majtas, djathtas, poshtë dhe lartKur përdorni kufirin, krijohet një kufi nga të gjitha anët. Por ne mund të kontrollojmë nga cila anë të nxjerrim kornizën. Kufiri majtas kufiri majtas: 2px e zezë e fortë; kufiri-djathtas kufiri-djathtas: 1px me pika #FF0000 ; kufiri i poshtëm kufiri-fundi: 10 px solid #000000 ; kufiri i sipërm: 1px jeshile e fortë. Siç mund ta shihni, ata nuk duhet të kenë vlera të njëjta, dhe gjithashtu mund t'i kombinoni ato, domethënë të shkruani disa, për shembull, kufijtë e majtë dhe të djathtë (korniza), etj. Gjithçka. Nuk do të ngjitem më tej, kjo është tema e një mësimi tjetër. Shembull: tabela ( Qoshe të rrumbullakosuraTani le të prekim pak temën e "gjërave të bukura" dhe përdorshmërisë. Për t'i bërë skajet e kufirit të rrumbullakosura, ekziston vetia e rrezes kufitare. Është gjithashtu mësim i veçantë, nuk do të hyjmë në shumë detaje. Ai pranon sasi të ndryshme argumentet. Do të shkruajmë (vetëm në këtë mësim) një argument, dhe nëse shkruajmë një vlerë, atëherë do të ketë të njëjtin rrumbullakim në të gjitha anët (këndet). Vlera mund të jetë në "masa" të ndryshme, si p.sh. pikselë dhe përqindje. Më tej është një shembull: td ( Margjinat ose mbushjaNë mënyrë që teksti të mos jetë pranë kornizës, duhet të futeni nga ai. Prona e mbushjes do të na ndihmojë me këtë. Është gjithashtu shumëfunksional, por ne do ta konsiderojmë atë pjesërisht, të gjitha për të njëjtën arsye. Ne do të përdorim vetëm një vlerë. Vlera mund të jetë në "masa" të ndryshme, si p.sh. pikselë dhe përqindje. Më tej është një shembull: td ( Vlad Merzheviç NGA duke përdorur CSS Ju mund të shtoni një kufi në një element në disa mënyra. Në thelb, natyrisht, prona kufitare përdoret, si më e gjithanshme, si dhe skicimi dhe, çuditërisht, kuti-hije , detyra kryesore e së cilës është krijimi i një hije. Le të hedhim një vështrim në këto metoda dhe dallimet e tyre. përshkruajë pronënVetia më e thjeshtë për krijimin e kornizave. Ka të njëjtat parametra si kufiri, por ndryshon ndjeshëm prej tij në disa detaje:
Shtrohet pyetja - në cilat raste nevojitet skica, kur rolin e saj, pavarësisht dallimeve të listuara, e merr tërësisht kufiri? Nuk ka shumë situata, por ato ndodhin:
Korniza me shumë ngjyraDuhet të kuptohet se skica në asnjë mënyrë nuk zëvendëson kufirin dhe mund të ekzistojë me të, siç tregohet në shembullin 1. Shembulli 1: Krijo një kornizë
Në këtë shembull, rreth elementit shtohet një kufi i zi, i cili ndahet nga sfondi me një kufi të bardhë (Fig. 1). Oriz. 1. Kufiri rreth elementit Korniza kur përdoret: rri pezullShtimi i një kufiri përtej kufirit rrit gjerësinë e elementit, gjë që është mjaft e dukshme kur kombinohet kufiri dhe pseudo-klasa :hover. Ka dy mënyra për të "fituar". Më e thjeshta është zëvendësimi i kufirit me një skicë, e cila e dimë se nuk ka asnjë efekt në madhësinë e elementit (shembulli 2). Shembulli 2: Korniza në rri pezull
skica nuk është gjithmonë e përshtatshme, vetëm sepse nuk ndikohet nga qoshet e rrumbullakosura. Metoda e dytë është e përshtatshme këtu - shtoni një kufi të padukshëm ose një kufi që përputhet me ngjyrën e sfondit dhe më pas ndryshoni parametrat e tij kur rri pezull (shembulli 3). Atëherë nuk do të ndodhë asnjë zhvendosje e elementit, pasi korniza është tashmë aty fillimisht. Por gjithmonë mbani mend se gjerësia e elementit është shuma e vlerave të gjerësisë, kufirit në të majtë dhe kufirit në të djathtë. E njëjta gjë është e vërtetë me lartësinë. Shembulli 3: Korniza në rri pezull
Kufiri rreth fushave të formësDisa shfletues (Chrome, Safari, më të fundit Versionet e Operas) një kuti e vogël teksti shfaqet rreth fushave të formularit kur ato marrin fokus. kornizë me ngjyra(Fig. 2). Për ta hequr atë, mjafton të shtoni vlerën none në vetinë e skicës në stile, siç tregohet në shembullin 4. Oriz. 2. Kornizë rreth fushave Shembulli 4. Hiqni kornizën
Korniza përmes hijes së kutisëMegjithëse vetia box-shadow synon të shtojë një hije rreth një elementi, ajo mund të përdoret gjithashtu për të krijuar kufij, dhe ato që nuk mund të bëhen me kufi ose skicë. Kjo për faktin se numri i hijeve mund të jetë i pakufizuar, parametrat e të cilave renditen të ndara me presje. Për të marrë një kornizë, tre parametrat e parë duhet të vendosen në zero, ata janë përgjegjës për pozicionin e hijes dhe turbullimin e saj. Parametri i katërt në këtë rast është përgjegjës për trashësinë e kufirit, dhe i pesti përcakton ngjyrën e kornizës. Për kornizën e dytë, parametri i katërt është i barabartë me shumën e trashësisë së dy kornizave. Shembulli 4 tregon se si të shtoni dy kuti dhe një kufi në të djathtë duke përdorur një veti të vetme hije kuti. Shembulli 4: Përdorimi i hijes së kutisë
Rezultati ky shembull treguar në fig. 3.
Oriz. 3. Kornizat e krijuara nga vetia box-shadow Specifikimi CSS jep mundësi të pakufizuara për hartimin e tabelave. Si parazgjedhje, një tabelë dhe qelizat e tabelës nuk kanë kufij ose sfond të dukshëm, dhe qelizat brenda një tabele nuk qëndrojnë afër njëra-tjetrës. Gjerësia e qelizave të tabelës përcaktohet nga gjerësia e përmbajtjes së tyre, kështu që gjerësia e kolonave të tabelës mund të jetë e ndryshme. Lartësia e të gjitha qelizave në një rresht është e njëjtë dhe përcaktohet nga lartësia e qelizës më të lartë. Formatimi i tabelës1. Kufijtë e tabelësTabela dhe qelizat brenda saj shfaqen si parazgjedhje në shfletues pa kufij të dukshëm. Kufijtë e tavolinës përcaktohen nga vetia kufitare: Tabela (kufi-collapse: kolaps; /*heq hapësira boshe ndërmjet qelizave*/ kufiri: 1px gri e fortë; /*vendos kufirin e jashtëm për tabelën ngjyrë gri trashë 1 px*/ ) Kufijtë e qelizës së kokësçdo kolonë është caktuar për elementin e th: Th (kufiri: 1px gri e fortë;) Kufijtë e qelizave trupat e tabelës janë specifikuar për elementin td: Td (kufiri: 1px gri e fortë;) Trashësia e kufijve të qelizave ngjitur nuk dyfishohet, kështu që ju mund të vendosni kufijtë për të gjithë tabelën në mënyrën e mëposhtme: Th, td (kufiri: 1px gri e fortë;) Kufiri i jashtëm i një tabele mund të theksohet duke i dhënë asaj një gjerësi të rritur: Tabela (kufiri: 3px gri e fortë;) Kufijtë mund të vendosen pjesërisht: /* cakto një kufi të jashtëm gri 3 pikselë për tabelën */ tabelë (kufiri-lart: 3 px gri e ngurtë; ) /* cakto një kufi gri 1 px për qelizën e trupit të tabelës */ td (kufiri-fund: 1px gri i ngurtë;) Mund të lexoni më shumë rreth pronës kufitare. 2. Si të vendosni gjerësinë dhe lartësinë e tabelësE paracaktuar gjerësia dhe lartësia e tavolinës përcaktohet nga përmbajtja e qelizave të saj. Nëse gjerësia nuk është vendosur, atëherë ajo do të jetë e barabartë me gjerësinë e rreshtit (vijës) më të gjerë. Gjerësia e tabelës dhe kolonës vendoseni duke përdorur veçorinë gjerësi. Nëse tabela vendoset në tabelë (gjerësia: 100%;), atëherë gjerësia e tabelës do të jetë e barabartë me gjerësinë e bllokut të kontejnerit në të cilin ndodhet. Gjerësia e tabelës dhe kolonave zakonisht vendoset në px ose % , për shembull: Tabela (gjerësia: 600 px;) th (gjerësia: 20%;) td:fëmija i parë (gjerësia: 30%;) Lartësia e tryezës e pavendosur. lartësia e rreshtit tabelat mund të manipulohen duke shtuar mbushje të sipërme dhe të poshtme tek elementët Dhe | . Nuk rekomandohet fiksimi i lartësisë me vetinë e lartësisë. | Th, td (mbushje: 10px 15px;) 3. Si të vendosni sfondin e tabelësE paracaktuar sfond tavoline dhe qelizat transparente. Nëse faqja ose blloku që përmban tabelën ka një sfond, ai do të shfaqet përmes tabelës. Nëse sfondi është vendosur si për tabelën ashtu edhe për qelizat, atëherë në vendet ku sfondi i tabelës dhe qelizat mbivendosen, do të jetë i dukshëm vetëm sfondi i qelizave. Sfondi për tabelën në tërësi dhe qelizat e saj mund të jetë: 4. Kolonat e tabelësModeli CSS i tabelës është i fokusuar kryesisht në rreshtat (rreshtat) të formuara duke përdorur etiketën duke përdorur etiketën Ju mund të vendosni sfondin për çdo numër kolonash; duke përdorur tabelën përzgjedhëse td:first-child , tabela td:last-child , mund të vendosni stile për kolonën e parë ose të fundit të tabelës (përveç qelizës së parë të kokës së tabelës); duke përdorur përzgjedhësin e tabelës td:nth-child (rregulli i zgjedhjes së kolonës) mund të vendosni stile për çdo kolonë të tabelës. Mund të lexoni më shumë rreth përzgjedhësve CSS. 5. Si të shtoni një titull në një tabelëJu mund të shtoni një kokë në një tabelë duke përdorur etiketën
 Oriz. 2. Një shembull i paraqitjes së titullit nën tabelë 6. Si të hiqni hendekun midis kornizave të qelizaveKufijtë e qelizave të tabelës ndahen nga një hendek i vogël si parazgjedhje. Nëse vendosni kufirin-kolaps: kolaps për tabelën, atëherë boshllëku do të hiqet. Prona është e trashëguar. Sintaksë Tabela (kufi-collapse: kolaps;) 7. Si të rritet hapësira ndërmjet kufijve të qelizaveNëpërmjet vetitë kufitare-Spacing mund të ndryshojë hapësirën midis kufijve të qelizave. Kjo pronë vlen për tabelën në tërësi. I trasheguar. Sintaksë Tabela (palosja e kufirit: e ndarë; hapësira e kufirit: 10 pikselë 20 pikselë;) Tabela (palosja e kufirit: e ndarë; hapësira e kufirit: 10 px;) 8. Si të fshehni qelizat boshe të tabelësVetia me qeliza boshe fsheh ose shfaq qelizat boshe. Prek vetëm qelizat që nuk përmbajnë asnjë përmbajtje. Nëse qeliza vendoset në sfond dhe tabela vendoset në tabelë (border-collapse: collapse;) , atëherë qeliza nuk do të fshihet. I trasheguar.
 Oriz. 5. Një shembull i fshehjes qelizë boshe tabelat 9. Paraqitja e tabelës me vetinë e paraqitjes së tabelësParaqitja e paraqitjes së një tabele përcaktohet nga një nga dy qasjet: faqosje fikse ose paraqitje automatike. Layout në këtë rast i referohet mënyrës se si gjerësia e tabelës shpërndahet midis gjerësisë së qelizave. Prona nuk është e trashëguar. Sintaksë Tabela (paraqitja e tabelës: fikse;) 10. Paraqitjet më të mira të tabelave1. Minimalizëm horizontalTabelat horizontale janë tabela teksti i të cilave lexohet horizontalisht. Çdo entitet është një linjë e veçantë. Ju mund t'i stiloni këto tabela në një stil minimalist duke vendosur një kufi me dy piksel nën titullin e th.
Në në numër të madh rreshtat ky dizajn i tabelës i bën ato të vështira për t'u lexuar. Për të zgjidhur këtë problem, mund të shtoni një kufi me një piksel poshtë të gjithë elementëve td. Td (kufitar-fund: 1px solid #cccc; ngjyra: #669; mbushje: 9px 8px; tranzicioni: .3s linear; )/*kodi tjetër si më sipër*/ Shtimi i një efekti :hover në elementin tr do ta bëjë më të lehtë leximin e tabelave minimaliste. Kur rri pezull mbi një qelizë me miun, pjesa tjetër e qelizave në të njëjtin rresht zgjidhen në të njëjtën kohë, duke e bërë më të lehtë mbajtjen e informacionit nëse tabelat kanë kolona të shumta. Th ( pesha e shkronjave: normale; ngjyra: #039; mbushja: 10 px 15 px; ) td (ngjyra: #669; kufiri në krye: 1 px solid #e8edff; mbushje: 10 px 15 px; ) tr:hover td (sfondi: #e8edff ;) 2. Minimalizëm vertikalMegjithëse tabela të tilla përdoren rrallë, tabelat e orientuara vertikalisht janë megjithatë të dobishme për kategorizimin ose krahasimin e përshkrimeve të objekteve të përfaqësuara nga një kolonë. Ju mund t'i stiloni ato në një stil minimalist duke shtuar një hapësirë për të ndarë kolonat. Th ( pesha e shkronjave: normale; kufiri i poshtëm: 2 px solid #6678b1; kufiri djathtas: 30 px solid #fff; kufiri majtas: 30 px solid #fff; ngjyra: #039; mbushja: 8 px 2px; ) td (kufi- djathtas: 30 px solid #fff; kufiri-majtas: 30 px solid #fff; ngjyra: #669; mbushje: 12 px 2px; ) 3. Stili “Boxed”.Stili më i besueshëm për hartimin e tavolinave të të gjitha llojeve është i ashtuquajturi stil "boxed". Mjafton të zgjedhësh një të mirë skema e ngjyrave, dhe më pas vendosni ngjyrën e sfondit për të gjitha qelizat. Mos harroni të theksoni ndryshimin midis vijave duke vendosur kufijtë si ndarës. Th ( madhësia e shkronjave: 13 px; pesha e shkronjave: normale; sfondi: #b9c9fe; kufiri i sipërm: 4 px solid #aabcfe; fundi i kufirit: 1 px solid #fff; ngjyra: #039; mbushja: 8 px; ) td ( sfond : #e8edff; kufiri-fund: 1px solid #fff; ngjyra: #669; kufiri-lart: 1px transparent; mbushje: 8px; ) tr:hover td (sfondi: #ccddff;) Gjëja më e vështirë është të gjeni skemën e duhur të ngjyrave që do të përzihet në mënyrë harmonike me faqen tuaj. Nëse faqja është e ngarkuar me grafikë dhe dizajn, atëherë do të jetë mjaft e vështirë për ju të përdorni këtë stil. Tabela ( font-familja: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; madhësia e shkronjave: 14 px; gjerësia maksimale: 70%; gjerësia: 70%; rreshtimi i tekstit: në qendër; kolapsi i kufirit: kolapsi ; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th (madhësia e shkronjave: 13px; pesha e shkronjave: normale; sfondi: #e8edff; kufiri djathtas: 1px solid #9baff1; kufiri- majtas: 1px solid #9baff1; ngjyra: #039; mbushje: 8px; ) td ( sfond: #e8edff; kufiri-djathtas: 1px solid #aabcfe; kufiri-majtas: 1px solid #aabcfe; ngjyra: #669; mbushje: 8px ;) 4. Zebra horizontaleTabela Zebra duket mjaft tërheqëse dhe e rehatshme. Ngjyra opsionale e sfondit mund të shërbejë si një sinjal vizual që njerëzit të lexojnë tabelën. Th ( pesha e shkronjave: normale; ngjyra: #039; mbushja: 10 px 15 px; ) td (ngjyra: #669; kufiri në krye: 1 px solid #e8edff; mbushje: 10 px 15 px; ) tr:nth-child(2n) ( sfond: #e8edff;) 5. Stili i gazetësPër të arritur të ashtuquajturin efekt gazete, mund të aplikoni kufij në elementët e tabelës dhe të luani me qelizat brenda. Një stil i lehtë, minimalist i gazetës mund të duket kështu: luani me ngjyrat, shtoni kufij, mbushje, prejardhje të ndryshme, dhe efektin :hover kur rri pezull mbi rresht. Tabela (kufiri: 1px solid #69c;) th (pesha e shkronjave: normale; ngjyra: #039; kufiri-poshtë: 1px me pika #69c; mbushja: 12px 17px; ) td (ngjyra: #669; mbushja: 7px 17px; ) tr:hover td (sfondi: #ccddff;)
Tabela (kufiri: 1px solid #69c;) th (pesha e shkronjave: normale; ngjyra: #039; mbushja: 10 px; ) td (ngjyra: #669; kufiri i sipërm: 1 px me pika #fff; mbushja: 10 px; sfondi: #ccddff; ) tr:hover td (sfondi: #99bcff;)
Tabela (kufiri: 1 px solid #6cf;) th (pesha e shkronjave: normale; madhësia e shkronjave: 13 px; ngjyra: #039; transformimi i tekstit: shkronja të mëdha; kufiri djathtas: 1px solid #0865c2; kufiri-lart: 1px solid #0865c2; kufiri-majtas: 1px solid #0865c2; kufiri-poshtë: 1px solid #fff; mbushje: 20px; ) td (ngjyra: #669; kufiri-djathtas: 1px me pika #6cf; mbushja: 10px 20px; ) 6. Sfondi i tabelësNëse jeni duke kërkuar për një agjërim dhe mënyrë unike faqosja e tabelës, zgjidhni imazh tërheqës ose foto që lidhet me temën e tabelës dhe vendoseni si sfond të tabelës. Jpg") pa përsëritje; pozicioni i sfondit: 100% 55 px; ) th (pesha e shkronjave: normale; ngjyra: #339; mbushje: 10 px 12 px; ) td ( sfond: url ("https://website/images/ prapa..png"); sfondi: transparent;) Artikujt kryesorë të lidhur |
Oriz. 3. Një shembull i tabelave me bashkim dhe ndarje të kufijve të qelizave
Oriz. 4. Një shembull i tabelave me zbrazëtira të rritura ndërmjet kornizave të qelizave
