Niżżel il-fatti ma 'dawn tips
Il-web browsers kollha jinkludu dak li hu magħruf bħala "stili ta 'difiża". Dawn huma stili li jiddettaw id-dehra u l-idea ta 'elementi HTML fin-nuqqas ta' kwalunkwe informazzjoni ta 'stil oħra. Pereżempju, fi kważi kull browser, il-ħarsa default ta 'hyperlinks hija kulur blu qawwi b'outline. Hekk kif dawk ir-rabtiet iħarsu sakemm ma tgħidilhomx biex juru b'mod differenti.
L-istili tal-brawżer awtomatiċi jistgħu jkunu ta 'għajnuna, iżda f'ħafna każijiet id-disinjaturi tal-web iridu jneħħu dawn l-istili sabiex ikunu jistgħu jibdew friski bi stili li huma ta' 100% fil-kontroll. Dan isir bl-użu ta 'dak li hu magħruf bħala "master stylesheet".
L-istil tal-ktajjen tal-kaptan għandu jkun l-ewwel folja tal-istil li titlob fid-dokumenti kollha tiegħek. Uża ktajjen tal-kaptan biex tneħħi s-settings tal-brawżer default li jistgħu jikkawżaw problemi fid-disinn tal-Web cross-browser. Ladarba inti tkun approvat l-istili bi stil tal-kaptan, id-disinn tiegħek jibda mill-istess post fil-browsers kollha - bħal kanvas nadif għal pittura.
Defaults Globali
L-istil tal-kaptan tal-kaptan tiegħek għandu jibda billi jnaqqas il-marġni, il-kuxxinetti u l-fruntieri fuq il-paġna. Uħud mill-browsers tal-Web jagħtu kont tal-korp tad-dokument għal 1 jew 2 pixels indentati mit-truf tal-pannelli tal-browser. Dan jiżgura li dawn kollha juru l-istess:
html, korp {marġini: 0px; ikkuttunar: 0px; fruntiera: 0px; }Trid ukoll li tagħmel il-font konsistenti. Kun żgur li tistabbilixxi wkoll id-daqs tat-tipa għal 100 fil-mija jew 1em, sabiex il-paġna tiegħek tkun aċċessibbli, iżda d-daqs għadu konsistenti. U kun żgur li tinkludi l-għoli tal-linja.
korp {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Formattar Ewlieni
It-tikketti header jew header (H1, H2, H3, eċċ.) Normalment huma awtomatiċi għal test kuraġġuż b'marġnijiet kbar jew ikkuttunar madwarhom. Billi tikklerja l-piż, il-marġni u l-ikkuttunar, inti tiżgura li dawn it-tags jibqgħu akbar (jew iżgħar) mit-test ta 'madwarhom mingħajr stili żejda:
h1, h2, h3, h4, h5, h6 {marġini: 0; padding: 0; font-weight: normali; font-family: Arial, Helvetica, sans-serif; }Inti tista 'tixtieq li tikkunsidra li tistabbilixxi daqsijiet speċifiċi, spazjar tal-ittri u paletti għal tikketti tal-aħbarijiet tiegħek, imma li tiddependi verament fuq l-istil tas-sit li qed tfassal u għandha titħalla barra mill-karta tal-istil tal-kaptan. Tista 'żżid aktar stili għal dawn l-intestaturi kif meħtieġ għad-disinn speċifiku tiegħek.
Formattar ta 'test sempliċi
Lil hinn mill-aħbarijiet, hemm tikketti oħra li inti għandek tkun żgur li tiċċara. Sett wieħed li n-nies spiss jinsew huma t-tabelli taċ-ċelluli tal-mejda (TH u TD) u tikketti tal-formola (SELECT, TEXTAREA u INPUT). Jekk ma ssettjax dawk fl-istess daqs tal-ġisem tiegħek u t-test tal-paragrafu, tista 'tkun sorpriż b'mod sorprendenti dwar kif il-browsers jirrenduhom.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronimu, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normali normali normali 1em / 1.25 Arial, Helvetica, sans-serif; }Huwa wkoll sbieħ li tagħti l-kwotazzjonijiet tiegħek (BLOCKQUOTE u Q), akronimi, u taqsiriet ftit stil żejjed, sabiex dawn jispikkaw ftit aktar:
blockquote {marġini: 1.25em; ikkuttunar: 1.25em} q {font-style: italic; } akronimu, abbr {cursor: għajnuna; qiegħ tal-qiegħ: 1px mqaxxar; }Links u Images
Ir-rabtiet huma faċli biex jimmaniġġjaw u biex ibiddlu minn dak it-test enfasizzat bil-blu qawwi msemmi qabel. Jiena nippreferi li dejjem il-links tiegħi jibqgħu sottolinjati, imma jekk tippreferi mod differenti tista 'tissettja dawn l-għażliet separatament. Ma ninkludi wkoll kuluri fil-karta tal-istil tal-kaptan, għax dak jiddependi fuq id-disinn.
a, a: link, a: miżjura, a: attiva, a: hover {text-decoration: underline; }B'immaġini, huwa importanti li jitfu l-fruntieri. Filwaqt li l-biċċa l-kbira tal-browsers ma jurux fruntiera madwar immaġni sempliċi, meta l-immaġni tkun marbuta, il-browsers jinxtegħlu fuq il-fruntiera. Biex tiffissa dan:
img {border: ħadd; }Tabelli
Filwaqt li t-tabelli m'għadhomx jintużaw għal skopijiet ta 'tqassim, is-sit jista' għadu jużahom għal dejta attwali dwar it-tabluar. Dan huwa użu multa ta 'tabelli HTML. Imxejna diġà għamilna ċert li d-daqs tat-test awtomatiku huwa l-istess għal ċelluli tal-mejda tiegħek, iżda hemm ftit stili oħra li għandek tistabbilixxi sabiex it-tabelli tiegħek jibqgħu l-istess:
tabella {marġini: 0; padding: 0; fruntiera: ħadd; }Formoli
Bħal ma 'elementi oħra, għandek tneħħi l-marġni u l-kuxxinetti madwar il-forom tiegħek. Ħaġa oħra li nixtieq nagħmel hija tikteb il-formola bħala " inline " sabiex ma żżidx spazju żejjed fejn tqiegħed it-tikketta fil-kodiċi. Bħal ma jiġri b'elementi oħra ta 'test, niddefinixxi l-informazzjoni tat-tipa għal tagħżel, testarea u input hawn fuq, sabiex tkun l-istess bħall-bqija tat-test tiegħi.
forma {marġini: 0; padding: 0; wiri: inline; }Hija wkoll idea tajba li tbiddel il-cursor għat-tikketti tiegħek. Dan jgħin lin-nies biex jaraw li t-tikketta se tagħmel xi ħaġa meta tikklikkjaha.
tikketta {cursor: pointer; }Klassijiet Komuni
Għal din il-parti tal-ktajjen tal-kaptan, għandek tiddefinixxi klassijiet li jagħmlu sens għalik. Dawn huma wħud mill-klassijiet li nuża ħafna drabi. Innota li mhumiex issettjati għal xi element partikolari, sabiex tkun tista 'tassenjahom għal dak kollu li għandek bżonn:
.clear {ċar: it-tnejn; } .floatLeft {float: left; } .floatRight (float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; }. textJustify {text-align: justify; } .blockCenter {display: block; marġni-xellug: auto; dritt tal-marġni: auto; } / * ftakar li tistabbilixxi wisa '* / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; ikkuttunar-xellug: 0; } .nomargin {marġini: 0; }. nopadding {padding: 0; } .nobullet {list-style: xejn; list-style-image: xejn; }Ftakar li minħabba li dawn il-klassijiet huma miktuba qabel xi stili oħra u huma biss klassijiet, huma faċli li jissuperaw il-proprjetajiet ta 'stil aktar speċifiċi li jseħħu aktar tard fil- kaskata . Jekk issib li tissettja klassi komuni fuq element u ma tidħolx fis-seħħ, għandek tivverifika biex tiżgura li ma jkunx hemm xi stil ieħor f'wieħed mill-istili ta 'l-istil aktar tard li jaffettwaw dak l-istess element.
L-istilettur tal-Master sħiħ
/ * Defaults Globali * / html, korp {marġini: 0px; ikkuttunar: 0px; fruntiera: 0px; {korp {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Punti Ewlenin * / h1, h2, h3, h4, h5, h6 {marġini: 0; padding: 0; font-weight: normali; font-family: Arial, Helvetica, sans-serif; } / * Stili ta 'Test * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronimu, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normali normali normali 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {marġini: 1.25em; ikkuttunar: 1.25em} q {font-style: italic; } akronimu, abbr {cursor: għajnuna; qiegħ tal-qiegħ: 1px mqaxxar; } żgħira {font-size: .85em; } big {font-size: 1.2em; } / * Links u Images * / a, a: link, a: miżjura, a: attiva, a: hover {text-decoration: underline; } img {fruntiera: ħadd; } / * Tabelli * / tabella {marġini: 0; padding: 0; fruntiera: ħadd; } / * Formoli * / forma {marġini: 0; padding: 0; wiri: inline; } tikketta {cursor: pointer; } / * Klassijiet Komuni * / .clear {ċar: it-tnejn; } .floatLeft {float: left; } .floatRight (float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; }. textJustify {text-align: justify; } .blockCenter {display: block; marġni-xellug: auto; dritt tal-marġni: auto; } / * ftakar li tistabbilixxi wisa '* / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; ikkuttunar-xellug: 0; } .nomargin {marġini: 0; }. nopadding {padding: 0; } .nobullet {list-style: xejn; list-style-image: xejn; }Artikolu oriġinali minn Jennifer Krynin. Editjat minn Jeremy Girard fit-6/10/17