Fumana amaqiniso ngala macebiso
Zonke iiphequluli zewebhu ziquka oko kwaziwa ngokuba "izitayela zokuziphatha." Ezi ziimpawu ezithi zikhangele ukubukeka nokuvakalelwa kwezinto ze-HTML ngokungabikho kolunye ulwazi lwefayile. Ngokomzekelo, phantse yonke i-browser yonke imbonakalo engapheliyo ye-hyperlink ngumbala obomvu oqaqambileyo ngezantsi. Yile ndlela abadibana ngayo ngaphandle kokuba ubaxelele ukuba babonise ngendlela eyahlukileyo.
Izitayela ezikhethiweyo ezikhethiweyo zingaba luncedo, kodwa kwiimeko ezininzi abaqulunqi bewebhu bafuna ukususa ezi zintlobo ukuze baqale ngokutsha kunye neendlela zokulawula. Oku kwenziwa ngokusebenzisa oko kwaziwa ngokuba "i-style style".
I-style style yeetayifethi kufuneka ibe yindlela yokuqala yeefayile ozibiza kuyo onke amaxwebhu akho. Usebenzisa i-stylesheet yobugcisa ukucima izicwangciso zesiphequluli esingagqibekanga ezingabangela iingxaki kwi-Web browser browser-design. Xa usususile izitayela ngefayile ye-master style, uyilo lwakhiwo luqala kwindawo enye kuyo yonke iiphequluli-njengendlela yokucoceka.
Ukungaphumeleli kwihlabathi
I-master style yeetekethi kufuneka iqale ngokusuka kwiimida, i-paddings kunye nemida ekupheleni kwiphepha. Ezinye iiphequluli zeWebhu zitshintsha umzimba wolu xwebhu kwi-pixels e-1 okanye e-2 ekhutshwe kwiibophezelo zecreen browser. Oku kuqinisekisa ukuba bonke babonisa okufanayo:
html, umzimba {umgama: 0px; ukupakisha: 0px; Umda: 0px; }Ufuna kwakhona ukwenza ifonti ifane. Qinisekisa ukuseta ubungakanani befonti ukuya kwi-100 ekhulwini okanye i-1em, ukwenzela ukuba iphepha lakho lifikeleleke, kodwa ubungakanani buyaqhubeka. Yaye qiniseka ukuba uquka ukuphakama komgca.
umzimba {ifowuni: 1em / 1.25 Arial, Helvetica, sans-serif; }Ukufometha kweNtloko
I-Headline okanye i-header tags (H1, H2, H3, njl. Ngokucima ubunzima, imida kunye ne-padding, uqinisekisa ukuba la manqaku ahlala ekhudlwana (okanye amancinci) kunokuba itekisi ejikeleze ngaphandle kokuba nezitayela ezingaphezulu:
h1, h2, h3, h4, h5, h6 {umgama: 0; ukupakisha: 0; ubunzima befonti: eqhelekileyo; yentsapho-yamagama: Arial, Helvetica, sans-serif; }Unokufuna ukuqwalasela ukubeka ubungakanani obukhulu, i-letter-spacing kunye ne-paddings kwiimpawu zentloko yakho, kodwa oko kuxhomekeke kwindlela yesayithi oyilwayo kwaye kufuneka ishiywe ngaphandle kwiphepha lesitayela. Ungongeza ezinye izitayela zezi zihloko njengoko zifunekayo kwi-design yakho ethile.
Uluhlu lwefomathi lokufometha
Ngaphandle kweentloko, kukho ezinye iithegi zetekisi omele uqiniseke ukuba uzicima. Enye isetyenziswe ukuba abantu bayakulibala iithegi zetekisi zetekisi (TH kunye neTD) kunye neefaki zefom (SELECT, TEXTAREA ne-INPUT). Ukuba awuyibeki ezobukhulu obufana nomzimba wakho kunye nesigcawu somhlathi, usenokungamangalisa ngendlela abaphendule ngayo.
p, th, t, li, dd, dt, ul, ol, blockquote, q, igama, abr, i-input, khetha, textarea {umgama: 0; ukupakisha: 0; umgca: eqhelekileyo yesiqhelo 1em / 1.25 Arial, Helvetica, sans-serif; }Kwakhona kukuhle ukunika izicaphuno zakho (BLOCKQUOTE kunye neQ), ii-acronyms, kunye nezifinyezo zesitayela esincinane, ukwenzela ukuba baphumelele ngakumbi:
i-blockquote {umgama: 1.25m; Ukupakisha: 1.25em} q {isitayela sefonti: italic; } isichazamazwi, isikhombisi {isikhombisi: uncedo; Umda wezantsi: i-1px idibene; }Uqhagamshelwano kunye neMifanekiso
Izixhumanisi zilula ukulawula nokutshintsha ukusuka kulo mbhalo ocacileyo ukhankanywe ngasentla. Ndikhetha ukuhlala ndihlala phantsi, kodwa ukuba ukhetha indlela eyahlukileyo ungasethetha ezi khetho ngokwahlukileyo. Andizibandakanyi imibala kwiphepha lesitayela somsebenzi, kuba kuxhomekeke kuyilo.
,: ikhonkco,: uhanjelwe,: usebenze: a: hover {umbhalo-umyalezo: unqamle; }Ngeemifanekiso, kubalulekile ukucima imida. Nangona ezininzi iibrowser zingabonakali umda ojikeleze umfanekiso ocacileyo, xa umfanekiso udibene, iiphequluli zivula umda. Ukulungisa oku:
img {umngcele: akukho; }Iifayile
Ngoxa iithebhile zingasetyenziselwa iinjongo zokubeka, usayithi unokusasebenzisa ngqo idatha ye-tabluar. Oku kusetyenziso olufanelekileyo lweetafile ze-HTML. Sivele siqinisekisile ukuba ubungakanani besicatshulwa esilungileyo bufana neeseli zakho zeetafile, kodwa kukho ezinye iifayile ozimele uzibeke ukuze iithebula zakho zihlale zifanayo:
itafile {umgama: 0; ukupakisha: 0; umda; akukho; }IiFom
Njengamanye amacandelo, kufuneka ucoce imida kunye neepaddings ezungeze iifom zakho. Enye into endiyithanda ukuyenza yubhala kwakhona ifom yefayile njenge " inline " ukuze ingafaki isikhala esongezelelweyo apho ubeka itekisi kwikhowudi. Njengamanye amacatshulwa, ndichaza ulwazi lwefonti lokukhetha, i-textarea kunye negalelo phezulu, ukwenzela ukuba kufane neyobhaliweyo yam.
ifom {umgama: 0; ukupakisha: 0; ukubonisa: umgca; }Kwakhona ingcinga efanelekileyo yokutshintsha isikhombisi kwiibhile zakho. Oku kunceda abantu ukuba babone ukuba ilebula iya kwenza into xa bayicoca.
ilebula {isikhombisi: isikhombisi; }IiKlasi eziqhelekileyo
Kule nxalenye ye-style style, kufuneka uchaze iiklasi ezinengqiqo kuwe. Ezi ezinye zeeklasi ndizisebenzisa rhoqo. Qaphela ukuba ayilungiselelwe nayiphi na into ethile, ngoko unako ukubanika ukuba nantoni na oyifunayo:
.clear {cima: zombini; } .floatLeft {float: kwesobunxele; } .floatRight {float: kwesokudla; } .textLeft {umbhalo-ulungelelwano: ekhohlo; } .textRight {umbhalo-ukulungelelanisa: kunene; } .textCenter {ukulungelelanisa umbhalo: isikhungo; } .textJustify {umbhalo-ulungelelaniso: vumela; } .blockCenter {bonisa: ibhloko; umda osekhohlo; umda ongakwesokudla: uqobo; } / * khumbula ukubeka ububanzi * / .bold {ifowuni-isisindo: isibindi; } .italic {isitayela sefonti: italic; } ngezantsi} {umbhalo-umhlobiso: gxininisa; } .ngenanto {ekhohlo ngakwesobunxele: 0; i-padding-left: 0; } .nomargin {umgama: 0; } .nopadding {padding: 0; } .nobullet {isitayela-uludwe: akukho; uluhlu-isimboli-mfanekiso: akukho; }Khumbula ukuba ezi zifundo zibhalwa phambi kweyiphi na izitayela kwaye zizodwa zifundo, zilula ukugqithisa ezinye izakhiwo zeetayitile eziza kwenzeka emva kwexesha. Ukuba ufumanisa ukuba ubeka iklasi eqhelekileyo kwinto kwaye ayifuni ukusebenza, kufuneka uhlolisise ukuqinisekisa ukuba akukho esinye isitayela kwenye yeefayile ezilandelayo ezichaphazela loo nto.
I-Master Master Stylesheet
/ * Iingqungquthela ze-Global * / html, umzimba {umgama: 0px; ukupakisha: 0px; Umda: 0px; } umzimba {ifowuni: 1em / 1.25 Arial, Helvetica, sans-serif; } / * IiNtloko * / h1, h2, h3, h4, h5, h6 {umgama: 0; ukupakisha: 0; ubunzima befonti: eqhelekileyo; yentsapho-yamagama: Arial, Helvetica, sans-serif; } / * Izitayela zeetekisi * / p, th, t, li, dd, dt, ul, ol, blockquote, q, igama, abr, i-input, khetha, textarea {umgama: 0; ukupakisha: 0; umgca: eqhelekileyo yesiqhelo 1em / 1.25 Arial, Helvetica, sans-serif; } i-blockquote {umgama: 1.25m; Ukupakisha: 1.25em} q {isitayela sefonti: italic; } isichazamazwi, isikhombisi {isikhombisi: uncedo; Umda wezantsi: i-1px idibene; } encinci {ubukhulu befonti: .85em; } enkulu {ubukhulu befonti: 1.2em; } / * Iziqhagamshelo kunye neMifanekiso * / a,: ikhonkco,: ihanjelwe, i: esebenzayo, i: hover {text-decoration: gxininisa; } img {umngcele: akukho; } / * Iifayile * / itafile {margin: 0; ukupakisha: 0; umda; akukho; } / * Iifom * / ifomu {umgama: 0; ukupakisha: 0; ukubonisa: umgca; } ilebula {isikhombisi: isikhombisi; } / * IiKlasi eziqhelekileyo * / .clear {cima: zombini; } .floatLeft {float: kwesobunxele; } .floatRight {float: kwesokudla; } .textLeft {umbhalo-ulungelelwano: ekhohlo; } .textRight {umbhalo-ukulungelelanisa: kunene; } .textCenter {ukulungelelanisa umbhalo: isikhungo; } .textJustify {umbhalo-ulungelelaniso: vumela; } .blockCenter {bonisa: ibhloko; umda osekhohlo; umda ongakwesokudla: uqobo; } / * khumbula ukubeka ububanzi * / .bold {ifowuni-isisindo: isibindi; } .italic {isitayela sefonti: italic; } ngezantsi} {umbhalo-umhlobiso: gxininisa; } .ngenanto {ekhohlo ngakwesobunxele: 0; i-padding-left: 0; } .nomargin {umgama: 0; } .nopadding {padding: 0; } .nobullet {isitayela-uludwe: akukho; uluhlu-isimboli-mfanekiso: akukho; }Inqaku loqobo loJennifer Krynin. Ehlelwe nguJeremy Girard ngomhla we-10 / 6/17