Samo bayanan tare da waɗannan matakai
Duk masu bincike na yanar gizo sun hada da abin da aka sani da "defauly styles." Waɗannan su ne salon da ke nuna kama da abubuwan da ke cikin HTML ba tare da wani bayanan lada ba. Alal misali, a kusan dukkanin burauzar look na hyperlinks shine mai haske mai launin launi tare da layi. Wannan shi ne yadda wadanda ke hulɗar duba idan kun gaya musu su nuna ta wata hanya dabam.
Hanyoyin mai amfani na asali zasu iya taimakawa, amma a lokuta da yawa masu zanen yanar gizo suna so su cire waɗannan styles don su fara farawa da sassan da suke da 100% a cikin iko. Anyi wannan ta yin amfani da abin da aka sani da "babban tsarin tsarin".
Dole ne mahimmin tsari ya kamata ya kasance farkon tsarin da kake kira a duk takardunku. Kuna amfani da tsarin jagora don share fitar da saitunan bincike na tsoho wadanda zasu iya haifar da matsala a cikin giciye-browser Web design. Da zarar ka kayyade hanyoyi tare da tsari mai kyau, zanenka yana farawa daga wurin guda a duk masu bincike - kamar zane mai tsabta don zane.
Fayil na Duniya
Dole ne ka fara tsarin tsarin jagoranka ta hanyar zeroing fitar da margins, paddings da iyakoki kan shafin. Wasu masu bincike na yanar gizo tsohuwar jiki na takardun zuwa 1 ko 2 pixels sun haɓaka daga gefuna na masu binciken browser. Wannan yana tabbatar da cewa duk suna nuna irin wannan:
html, jiki {gefe: 0px; Samun: 0px; iyaka: 0px; }Kuna son yin daidaitattun font. Tabbatar cewa za a saita nau'in font zuwa kashi 100 ko 1m, don haka shafinka ya sami damar, amma girman shine har yanzu. Kuma tabbatar da hada da layi-tsawo.
jiki {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Magana kan layi
Lissafin labarai ko masu rubutun kai tsaye (H1, H2, H3, da dai sauransu) yawanci tsoho zuwa rubutu mai ƙarfin rubutu tare da manyan margins ko ƙuƙule kewaye da su. Ta hanyar share nauyin nauyi, martaba da ƙuƙwalwa, ka tabbatar da cewa waɗannan tags har yanzu suna da girma (ko karami) fiye da rubutun a kusa da su ba tare da samuwa ba:
h1, h2, h3, h4, h5, h6 {gefe: 0; Samun: 0; font-nauyi: al'ada; font-iyali: Arial, Helvetica, sans-serif; }Kuna iya yin la'akari da kafa manyan ƙididdiga, haruffan wasiƙa da damuwa zuwa alamominku na asali, amma wannan ya dogara ne da irin salon shafin da kake zayyana kuma ya kamata a bar shi daga takardar sifa. Za ka iya ƙara wasu styles don waɗannan rubutun kamar yadda ake buƙata don ƙirarka na musamman.
Tsarin Rubutun Magana
Bayan ƙididdigar, akwai wasu alamun rubutu da ya kamata ka tabbata don sharewa. Ɗaya daga cikin abubuwan da mutane sukan manta shine ginshiƙan wayar salula (TH da TD) da kuma samar da tags (SELECT, TEXTAREA and INPUT). Idan ba ka sanya wadanda suke da girman girmanka ba kamar yadda jikinka da sakin layi na, zaku iya mamaki sosai game da yadda masu bincike ke ba su.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, shigarwa, zaɓi, textarea {iyakar: 0; Samun: 0; font: al'ada al'ada al'ada 1em / 1.25 Arial, Helvetica, sans-serif; }Har ila yau, yana da kyau a ba da kalmominku (BLOCKQUOTE da Q), acronyms, da kuma raguwa dan kadan, don haka su fito kaɗan:
blockquote {gefe: 1.25em; Farawa: 1.25em} q {font-style: italic; } acronym, danna {madogara: taimako; Yankin iyaka: 1px dashed; }Abunai da Hotuna
Lissafi suna da sauƙi don sarrafawa kuma su canza daga wannan rubutun da aka ƙaddamar da haske. Na fi so in koyaushe ina da alaƙata na kasancewa ƙira, amma idan kun fi son shi wata hanya dabam za ku iya saita wadannan zaɓuɓɓuka dabam. Har ila yau ban haɗa da launuka a cikin takardar tsarin kayan aiki ba, saboda wannan ya dogara ne akan zane.
a, a: mahada, a: ziyarci, a: aiki, a: hover {kayan rubutu-kayan ado: layi; }Tare da hotuna, yana da muhimmanci a kashe iyakoki. Duk da yake mafi yawan masu bincike ba su nuna iyaka a kusa da siffar da aka bayyana ba, lokacin da aka haɗu da hoton, masu bincike suna kan iyaka. Don gyara wannan:
img border: babu; }Tables
Duk da yake ba a amfani da Tables don amfani da manufofin ba, zaku iya amfani da su don ainihin bayanan kuɗin. Wannan amfani ne mai kyau na Tables na HTML. Mun riga mun tabbatar da cewa matakan rubutu tsoho daidai yake don ganyayyakin tebur ɗinku, amma akwai wasu sassa da ya kamata ku saita domin kwamfutarku su kasance iri ɗaya:
launi na gefe: 0; Samun: 0; iyaka: babu; }Forms
Kamar sauran abubuwa, ya kamata ka share alamar ta da alamomin kewaye da siffofinka. Wani abu na so in yi shi ne sake rubuta rubutun tag a matsayin " inline " don haka bazai ƙara ƙarin sarari ba inda ka sanya tag a cikin lambar. Kamar yadda yake tare da wasu nau'in rubutun, na ƙayyade bayanan sirri don zaɓa, textarea da shigarwa sama, don haka yana da daidai da sauran rubutun.
Nau'in {iyaka: 0; Samun: 0; Nuna: madogara; }Har ila yau yana da kyakkyawan ra'ayin canza siginar don alamarku. Wannan yana taimaka wa mutane su ga cewa lakabin zai yi wani abu idan sun danna shi.
lakabi {mai siginan kwamfuta: ma'ana; }Kayan Kayan Kasuwanci
Domin wannan bangare na tsarin jagorancin, ya kamata ka bayyana kundin da ke da mahimmanci a gare ku. Waɗannan su ne wasu daga cikin nau'o'in da nake amfani dasu mafi sau da yawa. Ka lura cewa ba'a sanya su zuwa wani nau'i na musamman ba, saboda haka zaka iya sanya su ga duk abin da kake bukata:
.clear {bayyana: duka biyu; } .floatLeft {float: hagu; } .floatRight {float: dama; } .Kamar rubutun {rubutu-align: hagu; } .texttextRight {rubutu-align: dama; }textCenter {rubutu-align: cibiyar; } .textJustify {rubutu-align: tabbatar; } .blockCenter {nuni: toshe; gefe-hagu: auto; hagu-dama: auto; } / * tuna don saita nisa * / .bold {font-weight: m; } .italic {font-style: italic; } .ya karkata {kayan-rubutu: layi; } .nitattun {hagu-hagu: 0; Dama-hagu: 0; } .nargin {alamar} 0: 0; } .nopadding {padding: 0; } .nobullet {jerin-jerin: babu; samfurin-style-style: babu; }Ka tuna cewa saboda waɗannan rubutun suna rubuce a gaban wani nau'i kuma suna azuzuzu ne kawai, suna da sauƙin karyewa tare da kyawawan kayan kayan da suka faru a baya a cikin kwandon . Idan ka ga cewa ka saita kaya a kan wani nau'i kuma ba a yi tasiri ba, ya kamata ka duba don tabbatar da cewa babu wani salon da kake yi a cikin ɗayan fayilolinka na baya waɗanda ke shafar wannan nau'ikan.
Duk Kwayar Jagora Cire
/ * Furofayil na Duniya * / html, jiki {gefen: 0px; Samun: 0px; iyaka: 0px; } jiki {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Adadin labarai * / h1, h2, h3, h4, h5, h6 {gefe: 0; Samun: 0; font-nauyi: al'ada; font-iyali: Arial, Helvetica, sans-serif; } / * Rubutun kalmomi * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, shigarwa, zaɓi, textarea {faɗin: 0; Samun: 0; font: al'ada al'ada al'ada 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {gefe: 1.25; Farawa: 1.25em} q {font-style: italic; } acronym, danna {madogara: taimako; Yankin iyaka: 1px dashed; } kananan {font-size: .85em; } babban {font-size: 1.2em; } / * Hotuna da Hotuna * / a, a: hanyar haɗi, a: ziyarci, a: aiki, a: hover {kayan rubutu: layi; } img border: babu; } / * Tables * / tebur {gefe: 0; Samun: 0; iyaka: babu; } / * Forms * / form {gefe: 0; Samun: 0; Nuna: madogara; } lakabin {mabudin: zane; } / * Ƙungiyoyi na Ƙasar * / .clear [bayyana: duka; } .floatLeft {float: hagu; } .floatRight {float: dama; } .Kamar rubutun {rubutu-align: hagu; } .texttextRight {rubutu-align: dama; }textCenter {rubutu-align: cibiyar; } .textJustify {rubutu-align: tabbatar; } .blockCenter {nuni: toshe; gefe-hagu: auto; hagu-dama: auto; } / * tuna don saita nisa * / .bold {font-weight: m; } .italic {font-style: italic; } .ya karkata {kayan-rubutu: layi; } .nitattun {hagu-hagu: 0; Dama-hagu: 0; } .nargin {alamar} 0: 0; } .nopadding {padding: 0; } .nobullet {jerin-jerin: babu; samfurin-style-style: babu; }Labari na farko daga Jennifer Krynin. Edited by Jeremy Girard on 10/6/17