Kunin ang mga katotohanan sa mga tip na ito
Kabilang sa lahat ng mga web browser kung ano ang alam bilang "mga estilo ng pagkasira." Ang mga ito ay mga istilo na magdikta sa hitsura at pakiramdam ng mga elemento ng HTML sa kawalan ng anumang iba pang impormasyon ng estilo. Halimbawa, sa halos bawat browser ang default na hitsura ng mga hyperlink ay isang maliwanag na asul na kulay na may isang salungguhit. Ito ang hitsura ng mga link na iyon maliban kung sasabihin mo sa kanila na ipakita sa ibang paraan.
Maaaring kapaki-pakinabang ang mga estilo ng default na browser, ngunit sa maraming pagkakataon nais ng mga taga-disenyo ng web na alisin ang mga estilo na ito upang makapagsimula sila nang sariwa sa mga estilo na 100% ang kontrol nila. Ginagawa ito gamit ang tinatawag na "master stylesheet."
Ang master stylesheet ay dapat na ang unang stylesheet na tawag mo sa lahat ng iyong mga dokumento. Gumagamit ka ng master stylesheet upang i-clear ang mga default na setting ng browser na maaaring magdulot ng mga problema sa disenyo ng cross-browser Web. Sa sandaling na-clear mo ang mga estilo na may master stylesheet, ang iyong disenyo ay nagsisimula mula sa parehong lugar sa lahat ng mga browser - tulad ng isang malinis na canvas para sa pagpipinta.
Global Defaults
Ang iyong master stylesheet ay dapat magsimula sa pamamagitan ng zeroing ang mga margin, paddings at mga hangganan sa pahina. Binago ng ilang Web browser ang katawan ng dokumento sa 1 o 2 na pixel na naka-indent mula sa mga pane ng pane ng browser. Tinitiyak nito na lahat sila ay nagpapakita ng parehong:
html, katawan {margin: 0px; padding: 0px; hangganan: 0px; }Gusto mo ring gawin ang font na pare-pareho. Siguraduhing itakda din ang laki ng font sa 100 porsiyento o 1em, upang ang iyong pahina ay mapupuntahan, ngunit ang laki ay pare-pareho pa rin. At siguraduhin na isama ang line-height.
katawan {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Pag-format ng Headline
Ang mga pamagat ng headline o header (H1, H2, H3, atbp.) Ay karaniwang default sa naka-bold na teksto na may malalaking mga gilid o padding sa paligid nila. Sa pamamagitan ng pag-clear sa timbang, gilid at padding, tinitiyak mo na ang mga tag na ito ay mananatiling mas malaki (o mas maliit) kaysa sa teksto sa kanilang paligid nang walang mga dagdag na estilo:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }Baka gusto mong isaalang-alang ang pagtatakda ng mga tiyak na laki, sulat-spacing at paddings sa iyong mga tag ng headline, ngunit ito ay talagang nakasalalay sa estilo ng site na iyong dinisenyo at dapat na iwanang sa master style sheet. Maaari kang magdagdag ng higit pang mga estilo para sa mga heading na ito kung kinakailangan para sa iyong partikular na disenyo.
Formatting Text na Plain
Higit pa sa mga headline, may iba pang mga tag ng teksto na dapat mong siguraduhing i-clear. Ang isang hanay na kadalasang nakalimutan ng mga tao ay ang mga tag ng cell ng talahanayan (TH at TD) at mga tag ng form (PUMILI, TEXTAREA at INPUT). Kung hindi mo itatakda ang mga pareho sa laki ng iyong katawan at teksto ng talata, maaaring hindi ka magulat sa kung paano ibinibigay ang mga browser sa kanila.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, isang, input, piliin, textarea {margin: 0; padding: 0; font: normal normal na normal 1em / 1.25 Arial, Helvetica, sans-serif; }Masarap din na bigyan ang iyong mga panipi (BLOCKQUOTE at Q), mga acronym, at mga pagdadaglat ng kaunting dagdag na istilo, upang tumayo sila nang kaunti pa:
blockquote {margin: 1.25em; padding: 1.25em} q {style-style: italic; } acronym, abbr {cursor: help; border-bottom: 1px dashed; }Mga Link at Mga Larawan
Ang mga link ay madali upang pamahalaan at baguhin mula sa na nabanggit na maliwanag na asul nakasalungguhit na teksto. Mas gusto kong laging naka-underlined ang aking mga link, ngunit kung gusto mo ito ng ibang paraan maaari mong itakda ang mga pagpipiliang ito nang hiwalay. Hindi ko rin isasama ang mga kulay sa master style sheet, dahil nakasalalay sa disenyo.
isang, isang: link, isang: binisita, isang: aktibo, isang: hover {text-decoration: underline; }Gamit ang mga imahe, mahalaga na i-off ang mga hanggahan. Habang ang karamihan sa mga browser ay hindi nagpapakita ng isang hangganan sa paligid ng isang simpleng imahe, kapag naka-link ang imahe, ang mga browser ay bumabalik sa hangganan. Upang ayusin ito:
img {border: none; }Mga Tabla
Habang hindi na ginagamit ang mga talahanayan para sa mga layuning pang-layout, maaari ka pa ring gamitin ng site na ito para sa aktwal na data ng tabluar. Ito ay isang mahusay na paggamit ng mga talahanayan ng HTML. Sinigurado na namin na ang default na laki ng teksto ay pareho para sa iyong mga cell table, ngunit may ilang iba pang mga estilo na dapat mong itakda upang ang iyong mga talahanayan ay manatiling pareho:
table {margin: 0; padding: 0; border: none; }Mga Form
Tulad ng ibang mga elemento, dapat mong i-clear ang mga margin at paddings sa paligid ng iyong mga form. Ang isa pang bagay na gusto kong gawin ay isulat muli ang tag ng form bilang " inline " upang hindi ito magdagdag ng dagdag na espasyo kung saan inilalagay mo ang tag sa code. Tulad ng ibang mga elemento ng teksto, tinutukoy ko ang impormasyon ng font para sa piling, textarea at input up sa itaas, upang ito ay katulad ng natitirang bahagi ng aking teksto.
form {margin: 0; padding: 0; display: inline; }Isa ring magandang ideya na baguhin ang cursor para sa iyong mga label. Tinutulungan nito ang mga tao na makita na ang label ay gagawa ng isang bagay kapag na-click nila ito.
label {cursor: pointer; }Mga Karaniwang Klase
Para sa bahaging ito ng master stylesheet, dapat mong tukuyin ang mga klase na may katuturan sa iyo. Ang mga ito ay ilan sa mga klase na madalas kong ginagamit. Tandaan na hindi sila nakatakda sa anumang partikular na elemento, kaya maaari mong italaga ang mga ito sa anumang kailangan mo:
. clear {clear: both; } .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; margin-left: auto; margin-right: auto; } / * tandaan na itakda ang lapad * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; }. nonindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; }. nobullet {list-style: none; list-style-image: none; }Tandaan na dahil ang mga klase na ito ay isinulat bago ang iba pang mga estilo at ang mga ito ay mga klase lamang, madali nilang i-override ang mas tiyak na mga katangian ng estilo na magaganap mamaya sa kaskad . Kung nalaman mo na nagtatakda ka ng isang pangkaraniwang klase sa isang sangkap at hindi ito magkakabisa, dapat mong suriin upang tiyakin na walang iba pang estilo sa isa sa iyong mga pansariling estilo ng ulo na nakakaapekto sa parehong sangkap.
Ang Buong Estilo ng Master
/ * Global Defaults * / html, body {margin: 0px; padding: 0px; hangganan: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Mga pamagat * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } / * Estilo ng Teksto * / p, ika, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, piliin, textarea {margin: 0; padding: 0; font: normal normal na 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; } maliit {font-size: .85em; } malaki {font-size: 1.2em; } / * Links and Images * / a, a: link, a: binisita, a: aktibo, a: hover {text-decoration: underline; } img {border: none; } / * Tables * / table {margin: 0; padding: 0; border: none; } / * Forms * / form {margin: 0; padding: 0; display: inline; } label {cursor: pointer; } / * Mga Karaniwang Klase * /. Clear {clear: pareho; } .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; margin-left: auto; margin-right: auto; } / * tandaan na itakda ang lapad * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; }. nonindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; }. nobullet {list-style: none; list-style-image: none; }Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 10/6/17