Koyi yadda za a kirkiro iyakar CSS a cikin minti biyar kawai
Kuna iya jin cewa CSS da HTML ba su haɗu ba. Wannan ba gaskiya bane. Haka ne, yin amfani da launi na HTML don layout ba ya zama mafi kyawun zane-zane a yanar gizo ba, bayan an maye gurbin CSS layout styles, amma har yanzu lambobin sun kasance daidai lokacin da za a yi amfani da su don ƙara bayanai akan shafin yanar gizon.
Abin baƙin cikin shine, saboda yawancin kwararru na yanar gizo sun yi watsi da launi suna tunanin cewa sun zama guba, yawancin wadanda ke da kwarewa suna aiki tare da wannan nau'in HTML da kuma gwagwarmaya lokacin da zasu rike su a shafin yanar gizo. Alal misali, idan kuna da tebur a kan shafi kuma kuna so ku ƙara lambobin gida zuwa gabobin tebur.
CSS Table Borders
Lokacin da kake amfani da CSS don ƙara iyakoki zuwa tebur, kawai yana ƙara iyaka kewaye da teburin. Idan kana so ka ƙara layi na ciki zuwa sel guda na wannan tebur, kana buƙatar ƙara iyakoki zuwa abubuwan CSS ciki. Hakanan zaka iya amfani da lambar HR don ƙara layin a cikin sel guda.
Domin yin amfani da tsarin da aka rufe a wannan labarin, ya kamata ka sami tabbacin a kan shafin yanar gizonku. Ya kamata ku kirkiro takardar launi a matsayin takarda na cikin gida a kan rubutunku (za ku iya yin haka idan "shafin yanar gizonku" ɗaya ne) ko a haɗe zuwa takardun a matsayin takarda na waje (wannan shine abin da kuke za su yi idan shafin ku ne shafuka masu yawa - ba ku damar yin duk wasu shafukan daga takarda na waje). Za ku sa sassan don ƙara jerin layi a cikin takarda ɗin.
Kafin Ka Fara
Da farko kana buƙatar yanke shawarar inda kake so Lines za su bayyana a cikin teburinka. Kana da dama da zaɓuɓɓuka, ciki har da:
- Guduwa da dukkanin sel don samar da grid;
- Matsayi layin tsakanin kawai ginshiƙai;
- Kawai tsakanin layuka; ko
- Tsakanin ginshiƙai ko layuka.
Hakanan zaka iya sanya layin da ke kewaye da kwayoyin halitta ko cikin jikin mutum.
Yadda za a Ƙara Lines Around All Cells a cikin wani Table
Don ƙara layin da ke kewaye da dukkan kwayoyin da ke cikin teburinka, ƙirƙirar wannan nau'in grid-kamar, ƙara da wadannan zuwa takardar launi naka:
td, th {
iyaka: m 1px baki;
}
Yadda za a Ƙara Lines tsakanin Tsakanin Ginshiƙai a Launin
Don ƙara layinin tsakanin ginshiƙan (wannan yana haifar da layi na tsaye wanda ke gudana daga sama zuwa ƙasa a kan ginshiƙai na launi), ƙara da wadannan zuwa takardar launi naka:
td, th {
iyaka-hagu: m 1px baki;
}
Bayan haka, idan baku so su bayyana a shafi na farko, kuna buƙatar ƙara aji a wašannan t da td . A cikin wannan misali, zamu ɗauka cewa muna da nau'i na iyaka a kan waɗannan kwayoyin kuma mun cire iyakar tare da wannan ƙayyadaddun tsarin CSS. Saboda haka a nan ne matakan HTML za mu yi amfani da su:
class = "babu iyaka">
Kuma a sa'an nan zamu iya ƙara salon zuwa style ɗin mu:
Yankin iyaka {
iyaka-hagu: babu;
}
Yadda za a Ƙara Lines tsakanin Tsakanin Rukunai a cikin Dama
Kamar yadda aka haɗa da layi a tsakanin ginshiƙai, za ka iya yin wannan tare da sauƙi mai sauƙi wanda aka ƙara zuwa takarda ɗinka. CSS na ƙasa zai kara sautin tsaye tsakanin kowace jeri na tebur ɗinmu:
t {
Ƙasa-ƙasa: m 1px baki;
}
Kuma don cire iyakar daga ƙasa daga teburin, za ku sake ƙara aji a tag ɗin ɗin nan:
class = "babu iyaka">
Ƙara hanyar da aka biyo zuwa takarda ɗinku:
Yankin iyaka {
Ƙasa-ƙasa: babu;
}
Yadda za a Ƙara Lines tsakanin Tsakanin Ƙididdiga ko Rukunai a cikin Tebur
Idan kana son layi tsakanin raƙuman layuka ko ginshiƙai, kana buƙatar yin amfani da aji a wašannan sassan ko layuka. Ƙara layin tsakanin ginshiƙai ya fi wuya fiye da tsakanin layuka saboda dole ka ƙara aji a kowace tantanin cikin wannan shafi. Idan kwamfutarka ta samo shi ta atomatik daga CMS daga wasu nau'i , wannan bazai yiwu ba, amma idan kana hannun shafin yanar gizo, za ka iya ƙara ɗakunan da suka cancanci don cimma wannan sakamako.
class = "iyakar gefen">
Ƙara layi tsakanin layuka ya fi sauƙi, kamar yadda zaka iya ƙara aji a jere da kake son layin.
class = "iyaka-kasa">
Sa'an nan kuma ƙara CSS zuwa rubutun ka:
.border-gefen {
iyaka-hagu: m 1px baki;
}
.border-kasa {
Ƙasa-ƙasa: m 1px baki;
}
Yadda za a Ƙara Lines Game da Tsaro Kowane Ɗauki a cikin Allon
Don ƙara layin da ke kewaye da kwayoyin halitta, za ka ƙara aji a cikin sel da kake son iyakar a kusa da:
class = "iyakar">
Sa'an nan kuma ƙara CSS ɗin da ke zuwa zuwa takarda naka:
.border {
iyaka: m 1px baki;
}
Yadda za a Ƙara Lines a cikin Fasarar Ɗaya a cikin Dama
Idan kana so ka ƙara layi a cikin abinda ke ciki na tantanin halitta, hanyar da ta fi dacewa ta yi shi ne tare da alamar mulkin kwance (
).
Amfani mai amfani
Idan ka lura da raguwa a kan iyakokinka, ya kamata ka tabbata cewa an saita shingen kan iyakokin a kan tebur. Ƙara wannan zuwa rubutun ku:
tebur {
Rushewar iyakoki: rushewa;
}
Zaka iya kauce wa dukkanin CSS da ke sama da kuma amfani da sifofin iyaka a cikin launi dinku. Ka sani, duk da haka, halayensa, yayin da ba a raguwa ba, yana da muhimmanci sosai fiye da CSS, kamar yadda zaka iya ƙayyade iyakar iyakokin kuma zai iya samun shi a kusa da kowane ɓangaren teburin ko a'a.