Thola amaqiniso ngalezi zeluleko
Zonke iziphequluli zewebhu zihlanganisa lokho okuyaziwa ngokuthi "izitayela ezingalungile." Lezi zitayela ezitshela ukubukeka nokuzizwa kwezakhi ze-HTML ngokungabikho kolunye ulwazi lwesitayela. Isibonelo, cishe yonke isiphequluli ukubukeka okuzenzakalelayo kwama-hyperlink umbala ogqamile ohlaza okwesibhakabhaka nge-underline. Yilokho lezo zixhumanisi zibukeka ngaphandle kokuthi ubatshele ukuthi zibonise ngendlela ehlukile.
Izitayela zesiphequluli ezizenzakalelayo zingaba usizo, kodwa ezimweni eziningi abaqambi bewebhu bafuna ukususa lezi zitayela ukuze baqale bahlanzeke ngezitayela zabo eziyi-100% ekulawuleni. Lokhu kwenziwa ngokusebenzisa lokho okuyaziwa ngokuthi "i-master style style".
I-style style izitayela kufanele kube yizikhombisi-ndlela zokuqala ozibiza kuwo wonke amadokhumenti akho. Usebenzisa isitayela sezitayela ukuze ususe izilungiselelo zesiphequluli esizenzakalelayo ezingabangela izinkinga ku-design web browser yesiphequluli. Uma usuqedile izitayela ngeheti yezitayela ezinhle, umklamo wakho uqala kusuka endaweni efanayo kuzo zonke iziphequluli - njengendwangu ehlanzekile yokudweba.
Ukuhluleka kwe-Global
Ithebhulethi yakho yezintambo kufanele iqale ngokukhipha ama-margins, ama-paddings nemingcele ekhasini. Ezinye iziphequluli zeWeb zihlehlisa umzimba wodokhumenti kumaphikseli angu-1 noma amabili avela emaphethelweni wezithombe zesiphequluli. Lokhu kuqinisekisa ukuthi bonke babonisa okufanayo:
i-html, umzimba {margin: 0px; i-padding: 0px; umngcele: 0px; }}Ufuna futhi ukwenza ifonti ifane. Qinisekisa ukuthi futhi usetha usayizi wefonti kuya kumaphesenti angu-100 noma i-1, ukuze ikhasi lakho lifinyeleleke, kodwa usayizi usaqhubeka. Futhi qiniseka ukufaka ukuphakama komugqa.
umzimba {ifonti: 1em / 1.25 Arial, Helvetica, sans-serif; }}Ukufometha kwesihloko
Amathegi enhloko noma ekhanda (H1, H2, H3, njll) ngokuvamile ayifinyelela emibhalweni enesibindi ngamajuba amakhulu noma i-padding ezungezile. Ngokususa isisindo, amakhemikhali kanye ne-padding, uqinisekisa ukuthi lamathegi ahlala ekhudlwana (noma amancane) kunombhalo ozungezile ngaphandle kokuba nezitayela ezengeziwe:
h1, h2, h3, h4, h5, h6 {margin: 0; i-padding: 0; ifonti-isisindo: evamile; umsebenzisi wefonti: Arial, Helvetica, sans-serif; }}Ungase uthande ukucabangela ukuhlela ubukhulu obuncane, ukubhala incwadi kanye nokunamathisela kumathegi akho ekhanda, kodwa lokho kuncike ngesitayela sesayithi oyilungayo futhi kufanele ushiywe ngaphandle kwesitayela sesitayela esihle. Ungangeza izitayela eziningi zalezi zihloko njengoba kudingekile kudizayini yakho ethize.
Ukufometha kombhalo obala
Ngaphandle kwezindaba, kukhona amanye amathegi wombhalo okufanele uqiniseke ukuthi uzokhipha. Enye isethi abantu abavame ukuyikhohlwa yizithegi zamaseli etafula (TH and TD) namathegi wefomu (SELECT, TEXTAREA ne-INPUT). Uma ungawaseli ukuthi ubukhulu obufana nomzimba wakho nombhalo wesigcawu, ungase ungamangali ngendlela ama-browser awenza ngayo.
p, th, t, li, dd, dt, ul, ol, blockquote, q, isichazamazwi, abbr, a, input, ukhethe, textarea {umkhawulo: 0; i-padding: 0; ifonti: evamile evamile evamile 1em / 1.25 Arial, Helvetica, sans-serif; }}Kuhle futhi ukunikeza izingcaphuno zakho (BLOCKQUOTE no-Q), ama-acronyms, nezifinyezo ngesitayela esincane, ukuze baphume kancane:
i-blockquote {margin: 1.25m; I-padding: 1.25em} q {isitayela sefonti: italic; } isichazamazwi, i-abbr {isikhombisi: usizo; umngcele-ngezansi: 1px idliwe; }}Izixhumanisi nezithombe
Izixhumanisi kulula ukuphatha nokushintsha kusuka kulokho okushiwo ngenhla eluhlaza okwesibhakabhaka. Ngithanda ukuhlala nginezixhumanisi zami njalo, kodwa uma ukhetha ngendlela ehlukile ungabeka lezi zindlela ngokuhlukile. Nami angifaki imibala ephathini lesitayela esihle, ngoba lokho kuxhomeke ekuklanyeni.
a, a: isixhumanisi, a: avakashele, a: asebenzayo, a: hover {umbhalo-umhlobiso: gcizelela; }}Ngemifanekiso, kubalulekile ukuvala imingcele. Ngenkathi iziphequluli eziningi zingabonisi umngcele oseduze nesithombe esicacile, lapho isithombe sixhunyiwe, iziphequluli zivula umngcele. Ukulungisa lokhu:
Img {umngcele: akukho; }}Amathebula
Ngesikhathi amatafula engasetshenziselwa izinhloso zokuhlela, isayithi lingase lisisebenzise idatha yangempela ye-tabluar. Lokhu ukusetshenziswa okuhle kwamatafula we-HTML. Sivele siqinisekisile ukuthi usayizi wombhalo ozenzakalelayo ufana namaseli akho etafula, kodwa kunezinye izitayela ezimbalwa okufanele uzibekele ukuze amatafula akho ahlale efana:
ithebula {umkhawulo: 0; i-padding: 0; umngcele: akekho; }}Amafomu
Njengamanye ama-element, kufanele usule ama-margins nama-paddings azungeze amafomu akho. Enye into engiyithandayo ukuyenza iphinde ibhale phansi ithegi yefomu njenge " inline " ukuze ingafaki isikhala esengeziwe lapho ufaka ithegi kukhodi. Njengamanye ama-text elements, ngichaza imininingwane yefonti yokukhetha, i-textarea kanye ne-input up ngenhla, ngakho-ke kufana nayo yonke imibhalo yami.
ifomu {umkhawulo: 0; i-padding: 0; ukubonisa: inline; }}Kungumqondo omuhle wokushintsha isikhombisi samalebula akho. Lokhu kusiza abantu ukuthi babone ukuthi ilebula izokwenza okuthile uma bayichofoza.
ilebula {isikhombisi: i-pointer; }}Amakilasi ajwayelekile
Ngalesi sigaba se-style style, kufanele uchaze amakilasi anengqondo kuwe. Lezi ezinye zezigaba engizisebenzisa kakhulu. Qaphela ukuthi ayilungiselelwe kunoma iyiphi into ethile, ngakho ungawabela kunoma yini oyidingayo:
.clear {cima: kokubili; } .floatLeft {float: kwesokunxele; } .floatRight {float: kwesokudla; } .textLeft {ukuhlanganisa umbhalo: kwesokunxele; } .textRight {umbhalo-uhambisane: kwesokudla; } .textImfihlo {umbhalo-ukuvumelanisa: isikhungo; } .textJustify {umbhalo-ukuqondanisa: vumela; } .blockCenter {ukubonisa: ukuvimba; umkhawulo-kwesokunxele: auto; i-right-right: auto; } / * khumbula ukusetha ububanzi * / .bold {yefonti-isisindo: ngesibindi; } .italic {isitayela sefonti: italic; } .ngezansi {umbhalo-umhlobiso: ugcizelela; } .ngenalutho {ngakwesokunxele ngakwesokunxele: 0; i-padding-kwesobunxele: 0; } .nomargin {umkhawulo: 0; } .ngenayo {padding: 0; } .nobullet {isitayela samagama: akukho; uhlu-isitayela-isithombe: akekho; }}Khumbula ukuthi ngoba lezi zigaba zibhaliwe ngaphambi kwanoma yiziphi ezinye izitayela futhi ziyizigaba nje, kulula ukuzongena ngezakhiwo ezithile zesitayela ezenzeka kamuva esikhathini sokukhunjulwa . Uma uthola ukuthi usetha igumbi elivamile kwisici futhi akusebenzi, kufanele uhlole ukuze uqiniseke ukuthi ayikho enye isitayela kwelinye lamathebhuthithi akho kamuva afinta leso sici.
I-Stylesheet Enye Yonke
/ * Ukuzenzakalela Global * / html, umzimba {umkhawulo: 0px; i-padding: 0px; umngcele: 0px; } umzimba {ifonti: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Izihloko * / h1, h2, h3, h4, h5, h6 {margin: 0; i-padding: 0; ifonti-isisindo: evamile; umsebenzisi wefonti: Arial, Helvetica, sans-serif; } / * Izitayela Zombhalo * / p, th, td, li, dd, dt, ul, ol, blockquote, q, igama, abr, a, input, ukhethe, textarea {margin: 0; i-padding: 0; ifonti: evamile evamile evamile 1em / 1.25 Arial, Helvetica, sans-serif; } i-blockquote {umkhawulo: 1.25m; I-padding: 1.25em} q {isitayela sefonti: italic; } isichazamazwi, i-abbr {isikhombisi: usizo; umngcele-ngezansi: 1px idliwe; } encane {usayizi wefonti: .85em; } big {usayizi wefonti: 1.2em; } / * Izixhumanisi namaZithombe * / a, a: isixhumanisi, a: avakashele, a: asebenzayo, a: hover {umbhalo-umhlobiso: ugcizelela; } img {umngcele: akukho; } / * Amathebula * / ithebula {margin: 0; i-padding: 0; umngcele: akekho; } / * Amafomu * / ifomu {umkhawulo: 0; i-padding: 0; ukubonisa: inline; } ilebula {isikhombisi: i-pointer; } / * Amakilasi avamile * / .clear {cima: kokubili; } .floatLeft {float: kwesokunxele; } .floatRight {float: kwesokudla; } .textLeft {ukuhlanganisa umbhalo: kwesokunxele; } .textRight {umbhalo-uhambisane: kwesokudla; } .textImfihlo {umbhalo-ukuvumelanisa: isikhungo; } .textJustify {umbhalo-ukuqondanisa: vumela; } .blockCenter {ukubonisa: ukuvimba; umkhawulo-kwesokunxele: auto; i-right-right: auto; } / * khumbula ukusetha ububanzi * / .bold {yefonti-isisindo: ngesibindi; } .italic {isitayela sefonti: italic; } .ngezansi {umbhalo-umhlobiso: ugcizelela; } .ngenalutho {ngakwesokunxele ngakwesokunxele: 0; i-padding-kwesobunxele: 0; } .nomargin {umkhawulo: 0; } .ngenayo {padding: 0; } .nobullet {isitayela samagama: akukho; uhlu-isitayela-isithombe: akekho; }}Isihloko sokuqala sikaJennifer Krynin. Ihlelwe nguJeremy Girard ngomhla ka-10 / 6/17