Unsaon Pagwagtang sa Default Styling Browser uban ang usa ka Master Stylesheet

Pagkuha sa mga kamatuoran uban niini nga mga tip

Ang tanan nga web browsers naglakip sa unsay nahibaloan nga "mga estilo nga dili maayo." Kini ang mga estilo nga nagdikta sa hitsura ug pagbati sa mga elemento sa HTML sa pagkawala sa bisan unsang lain nga estilo sa impormasyon. Pananglitan, sa halos matag browser ang default nga pagtan-aw sa hyperlinks usa ka mahayag nga asul nga kolor nga adunay usa ka underline. Mao kini ang pagtan-aw sa maong mga sumpay gawas kung isulti nimo kini aron ipakita sa laing paagi.

Ang mga estilo sa browser sa default mahimong makatabang, apan sa daghang mga higayon ang mga tigdisenyo sa web gusto nga mawagtang kini nga mga estilo aron nga sila makasugod sa presko nga mga estilo nga sila 100% nga kontrolado. Gihimo kini gamit ang gitawag nga "master stylesheet."

Ang usa ka master stylesheet kinahanglan mao ang una nga stylesheet nga imong gitawag sa tanan mong mga dokumento. Gigamit nimo ang usa ka master stylesheet aron sa pagwagtang sa default settings sa browser nga mahimong hinungdan sa mga problema sa cross-browser Web design. Sa higayon nga imong mahawanan ang mga estilo nga adunay usa ka master stylesheet, ang imong desinyo magsugod gikan sa samang dapit sa tanan nga mga browser - sama sa limpyo nga canvas alang sa painting.

Global Defaults

Ang imong master stylesheet kinahanglan magsugod pinaagi sa pag- zeroing sa mga margin, mga paddings ug mga utlanan sa panid. Ang pipila ka mga Web browser wala mag-una sa lawas sa dokumento ngadto sa 1 o 2 ka pixel nga gisi gikan sa browser pane edges. Kini nakasiguro nga silang tanan nagpakita sa sama:

html, lawas {margin: 0px; padding: 0px; utlanan: 0px; }

Gusto usab nimo nga himoong ang font. Siguroha usab nga ibutang ang gidak-on sa font sa 100 porsyento o 1em, aron ang imong panid ma-abut, apan ang gidak-on padayon. Ug siguroha nga ilakip ang linya nga gitas-on.

body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }

Pagporma sa Ulohan

Ang headline o mga tag sa header (H1, H2, H3, ug uban pa) kasagaran dili paigo sa bold nga text nga adunay dagkong mga margin o padding sa palibot niini. Pinaagi sa pagwagtang sa gibug-aton, gilapdon ug padding, imong gipaneguro nga kini nga mga tag nagpabilin nga mas dako (o mas gamay) kaysa sa teksto sa palibot niini nga walay mga estilo:

h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }

Mahimo nimong hunahunaon ang paghimo sa piho nga mga gidak-on, letra-spacing ug paddings sa imong mga tag sa headline, apan kana nagdepende gayud sa estilo sa site nga imong gilaraw ug kinahanglan nga ibilin sa master style sheet. Mahimo nimong idugang ang mga estilo sa mga ulohan nga gikinahanglan alang sa imong piho nga disenyo.

Pag-format sa Plain Text

Gawas sa mga headline, dunay laing mga tag sa teksto nga kinahanglan nimong masiguro nga ma-clear. Ang usa nga gibutang sa mga tawo nga kasagaran makalimot mao ang mga tag sa tag sa lamesa (TH ug TD) ug mga porma nga tag (PILI, TEXTAREA ug INPUT). Kung dili nimo ibutang ang mga sama nga gidak-on sa imong lawas ug parapo nga teksto, mahimo nga dili ka makalipay sa pagkakita nga ang mga browsers naghatag niini.

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, usa, input, select, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }

Maayo usab ang paghatag sa imong mga kinutlo (BLOCKQUOTE ug Q), acronym, ug mga abbreviation usa ka gamay nga sobrang estilo, aron nga kini mas gamay:

blockquote {margin: 1.25em; padding: 1.25em} q {style-style: italic; } acronym, abbr {cursor: help; border-bottom: 1px dashed; }

Links ug Imahe

Ang mga link sayon ​​nga pagdumala ug pagbag-o gikan sa gihisgutan nga hayag nga asul nga gihan-ay nga teksto. Gipalabi ko nga kanunay nga ang akong mga link magpabilin nga gihan-ay, apan kung gusto nimo kini usa ka lain nga paagi mahimo nimo nga ibutang kini nga mga kapilian sa gilain. Wala usab nako ilakip ang mga kolor sa master style sheet, tungod kay nagdepende kini sa disenyo.

a, a: link, a: gibisita, usa: aktibo, usa: hover {text-decoration: underline; }

Uban sa mga hulagway, importante ang pagputol sa mga utlanan. Samtang ang kadaghanan sa mga browser wala magpakita sa usa ka utlanan palibot sa usa ka yano nga larawan, sa diha nga ang hulagway nga nalambigit, ang mga browsers mobalik sa utlanan. Sa pag-ayo niini:

img {border: none; }

Mga Tabel

Samtang ang mga lamesa wala na gigamit alang sa mga katuyoan sa paghan-ay, mahimo nimo kining gamiton alang sa tinuod nga tabluar data. Maayo kini nga paggamit sa mga lamesa sa HTML. Gitino na namo nga ang default nga sukod sa teksto parehas sa imong mga cell sa lamesa, apan adunay pipila ka lain nga mga estilo nga imong kinahanglan nga ibutang aron ang imong mga lamesa magpabilin nga pareho:

lamesa (margin: 0; padding: 0; utlanan: wala; }

Mga porma

Sama sa uban nga mga elemento, kinahanglan nga imong limpyohan ang mga gilay-on ug mga patag sa palibot sa imong mga porma. Ang laing butang nga gusto nakong buhaton mao ang pagsulat pag-usab sa porma nga tag ingon nga " inline " aron dili kini makadugang sa dugang nga luna diin imong ibutang ang tag sa code. Sama sa uban nga mga elemento sa teksto, akong gipasabot ang impormasyon sa font alang sa pinili, textarea ug input sa ibabaw, aron kini susama sa uban sa akong teksto.

porma {margin: 0; padding: 0; pagpasundayag: inline; }

Maayo usab nga usbon ang cursor sa imong mga label. Makatabang kini sa mga tawo sa pagkakita nga ang label adunay butang nga buhaton sa diha nga sila mag-klik niini.

label {cursor: pointer; }

Komon nga mga Klase

Alang niining bahina sa master stylesheet, kinahanglan nimo ipasabut ang mga klase nga adunay kahulugan kanimo. Kini ang pipila sa mga klase nga kanunay nakong gigamit. Hinumdomi nga wala sila sa bisan unsang partikular nga elemento, aron mahatag nimo kini sa bisan unsa nga imong gikinahanglan:

tin-aw: tin-aw: duha; } .floatLeft {float: left; } .floatRight {float: right; }. textLeft {text-align: left; } .textRight {text-align: tuo; } .textCenter {text-align: center; } .textLustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; kilid-tuo: auto; } / * hinumdumi nga ibutang ang gilapdon * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .nindot {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: wala; list-style-image: wala; }

Hinumdumi nga tungod kay kini nga mga klase gisulat sa wala pa ang uban nga mga estilo ug kini mga klase lamang, kini sayon ​​nga masayop sa mas espesipikong mga kabtangan sa estilo nga mahitabo sa ulahi diha sa cascade . Kon imong makita nga imong gipahimutang ang usa ka komon nga klase sa usa ka elemento ug kini wala'y epekto, kinahanglan nga imong susihon aron sa pagsiguro nga wala'y laing estilo sa usa sa imong ulahing mga estilo nga nakaapekto sa sama nga elemento.

Ang Tibuuk nga Estilo sa Magtutudlo

/ * Global Defaults * / html, body {margin: 0px; padding: 0px; utlanan: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; Ang mga Estilo sa Teksto * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, usa, input, select, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {style-style: italic; } acronym, abbr {cursor: help; border-bottom: 1px dashed; } gamay {font-size: .85em; } big {font-size: 1.2em; } / * Links ug Imahe * / a, a: link, a: mibisita, usa: aktibo, usa: hover {text-decoration: underline; } img {border: none; } / * Tables * / table {margin: 0; padding: 0; utlanan: wala; } / * Mga porma * / porma (margin: 0; padding: 0; pagpasundayag: inline; } label {cursor: pointer; } / * Common Classes * /. Clear {malinaw: duha; } .floatLeft {float: left; } .floatRight {float: right; }. textLeft {text-align: left; } .textRight {text-align: tuo; } .textCenter {text-align: center; } .textLustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; kilid-tuo: auto; } / * hinumdumi nga ibutang ang gilapdon * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .nindot {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: wala; list-style-image: wala; }

Ang orihinal nga artikulo ni Jennifer Krynin. Gi-edit ni Jeremy Girard sa 10/6/17