Tau txais cov lus qhia nrog cov tswv yim no
Tag nrho cov web browsers muaj dab tsi yog paub raws li "cov duab tseeb." Cov no yog cov yeej uas hais txog kev xav thiab kev xav ntawm HTML ntsiab thaum tsis muaj lwm yam ntaub ntawv qhia tawm. Piv txwv, nyob hauv txhua lub vas sab qhov pom kev pom ntawm hyperlinks yog xim xiav xim nrog tus kos kab hauv qab. Qhov no yog li cas cov kev txuas saib yog koj tsis qhia rau lawv ua lwm yam.
Tus cwj pwm pheej pauv yeej pab tau, tab sis feem ntau ntawm cov neeg ntes web tsim xav tshem cov yeeb yaj kiab kom lawv tuaj yeem pib tshiab nrog cov yeeb yam tias lawv yog 100% ntawm kev tswj hwm. Qhov no yog ua tiav raws li hu ua "Master stylesheet."
Tus stylesheet master yuav tsum yog tus thawj stylesheet koj hu rau tag nrho koj cov ntaub ntawv. Koj siv tus qauv sau ntawv kom paub tseeb tias qhov browser tsis muaj qhov teeb meem uas yuav ua rau muaj teeb meem hauv qhov Web browser. Thaum twg koj tau tshem tawm tus cwj pwm nrog ib tus qauv stylesheet, koj tsim pib ntawm qhov chaw hauv txhua qhov browsers - zoo li ib daim ntaub huv si rau kev nrag.
Ntiaj teb Defaults
Koj tus paub tawm tswv yim yuav tsum pib los ntawm zeroing cov margins, paddings thiab ciam teb rau ntawm nplooj ntawv. Qee cov web browsers vim lub cev ntawm daim ntawv mus rau 1 lossis 2 pixels indented ntawm qhov browser pane npoo. Qhov no ua kom paub meej tias lawv sawv daws pom tib yam:
html, lub cev {margin: 0px; padding: 0px; ciam teb: 0px; }Koj kuj xav ua kom lub font zoo ib yam. Nco ntsoov tias tseem yuav xa cov ntawv loj rau 100 feem pua lossis 1 teev, kom koj nplooj ntawv mus yoojyim, tab sis qhov loj yog tseem zoo ib yam. Thiab nco ntsoov xam nrog rau kab-qhov siab.
{font: 1em / 1.25 Arial, Helvetica, sans-serif; }Kev Tawm Tswv Yim Ntawv
Headline lossis header tags (H1, H2, H3, thiab lwm yam.) Feem ntau yog siv los ua cov ntawv nyeem nrog cov loj margins lossis padding ncig lawv. Thaum tshem qhov nyhav, margins thiab padding, koj xyuas kom meej tias cov cim npe tseem nyob loj dua (lossis me dua) cov ntawv nyob ib ncig ntawm lawv tsis muaj cov yeeb yam ntxiv:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: qub; font-family: Arial, Helvetica, sans-serif; }Tej zaum koj yuav xav xav txog qhov kev txwv ntawm qhov ntau thiab tsawg, daim ntawv sib tw thiab paddings rau koj cov ntawv cim npe, tab sis qhov ntawd yeej yog nyob ntawm tus qauv ntawm qhov chaw koj tsim thiab yuav tsum tau sab laug tawm ntawm tus qauv daim ntawv. Koj tuaj yeem ntxiv ntau hom rau cov hau lus no raws li xav tau rau koj tus qauv tsim.
Plain Text Formatting
Tshaj tawm cov xov xwm, muaj lwm cov ntawv cim npe uas koj yuav tsum nco ntsoov tshem tawm. Ib txheej uas tib neeg tsis nco qab yog cov lus cim npe (TH thiab TD) thiab daim ntawv cim npe (SELECT, TEXTAREA thiab INPUT). Yog tias koj tsis tsim cov no rau tib qho me me li koj lub cev thiab cov ntawv nyeem, koj tuaj yeem xav tsis thoob thaum twg cov browsers muab rau lawv.
p, th, td, lis, dd, dt, lub, o, blockquote, q, acronym, abbr, ib, input, xaiv, textarea {margin: 0; padding: 0; font: normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Nws tseem zoo yuav muab koj cov quotations (BLOCKQUOTE thiab Q), acronyms, thiab abbreviations ib me ntsis ntxiv style, yog li ntawd lawv sawv tawm me ntsis ntxiv:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; ciam teb hauv qab: 1px dashed; }Txuas thiab Duab
Cov kev sib txuas yog ib qho yooj yim uas tswj thiab hloov ntawm qhov lus hais uas yog lo lus pleev xim ntsuab. Kuv xav kom ib txwm muaj kuv cov kev txuas nyob hauv qab, tab sis yog tias koj xav tau nws txawv txoj kev koj tuaj yeem npaj cov kev xaiv no cais. Kuv tseem tsis tau muaj xim nyob hauv daim ntawv npaj tswv yim, vim hais tias nyob ntawm qhov tsim.
a, a: link, a: visited, ib: nquag, a: hover {text-decoration: underline; }Nrog cov dluab, nws yog ib qho tseem ceeb los tua cov ciam teb. Thaum cov browsers feem ntau tsis pom tus ciam teb ncig lub duab dawb, thaum twg cov duab txuas, cov browsers tig rau ntawm ciam teb. Txhim kho qhov no:
img {ciam teb: tsis muaj; }Ntxhuav
Thaum cov ntxhuav tsis raug siv rau kev tsim cov hom phiaj, koj lub tsev kawm ntawv tseem siv tau rau cov ntaub ntawv qhia paub tab. Qhov no yog siv nplua HTML. Peb twb tau ua kom paub tseeb tias cov ntaub ntawv loj yog tib yam rau koj cov lus hlwb, tab sis muaj ob peb lwm yam koj yuav tsum tau teem kom koj cov ntxhuav nyob li qub:
rooj {margin: 0; padding: 0; ciam teb: tsis muaj; }Cov ntaub ntawv
Zoo li nrog lwm cov ntsiab lus, koj yuav tsum tshem tawm cov paj taub thiab paddings nyob ntawm koj cov ntawv. Ib qho ntxiv uas kuv nyiam ua yog rov sau dua daim ntawv lossis " inline " xwv kom nws tsis ntxiv qhov chaw uas koj tso cov ntawv hauv txoj cai. Raws li nrog lwm cov ntsiab lus, kuv txhais cov ntaub ntawv font rau xaiv, textarea thiab tawm tswv yim saum toj no, yog li ntawd nws yog tib yam li tas kuv cov ntawv nyeem.
daim ntawv {margin: 0; padding: 0; zaub: inline; }Nws kuj yog ib lub tswv yim zoo los hloov tus cursor rau koj cov ntawv. Qhov no yuav pab tib neeg pom tias daim ntawv qhia yuav ua ib yam dab tsi thaum lawv nyem.
daim ntawv lo {cursor: pointer; }Cov Hom Kawm Uas Kawm
Rau ntu ntawm tus qauv stylesheet, koj yuav tsum txheeb cov kev kawm uas ua rau kev nkag siab rau koj. Cov no yog qee qhov kev kawm uas kuv siv feem ntau. Nco ntsoov tias lawv tsis tau teem caij rau ib qho twg, ces koj tuaj yeem muab lawv rau txhua yam koj xav tau:
.tej {meej: ob leeg; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {zaub: thaiv; paj laug-sab laug: pib; npoo-txoj cai: pib; } / * nco ntsoov teem caij dav * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .nindend {margin-left: 0; padding-sab laug: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; daim ntawv teev npe-style-duab: tsis muaj; }Nco ntsoov tias vim cov hoob no tau sau ua ntej lwm hom thiab lawv tsuas yog cov chav kawm xwb, lawv yooj yim mus dhau ntawm ntau yam khoom tshwj xeeb uas tshwm sim rau tom qab cascade . Yog tias koj pom tias koj teem ib chav kawm ntawm ib lub caij thiab nws tsis muaj txiaj ntsig, koj yuav tsum xyuas kom paub tseeb tias tsis muaj lwm yam style hauv ib qho ntawm koj cov stylesheets tom qab cuam tshuam ntawd tib lub caij.
Tag Nrho Master Stylesheet
/ * Ntiaj teb Defaults * / html, lub cev {margin: 0px; padding: 0px; ciam teb: 0px; } lub cev {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: qub; font-family: Arial, Helvetica, sans-serif; } / * Text Styles * / p, th, td, lis, dd, dt, ul, o, blockquote, q, acronym, abbr, ib, input, xaiv, textarea {margin: 0; padding: 0; font: normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; ciam teb hauv qab: 1px dashed; } me me {font-size: .85em; } loj {font-size: 1.2em; } / * Txuas thiab dluab * / ib, ib qho: qhov txuas, a: tau mus xyuas, ib tug: nquag, a: yuj {text-decoration: underline; } img {ciam teb: tsis muaj; } / * Ntxhais * / rooj {margin: 0; padding: 0; ciam teb: tsis muaj; } / * Cov ntaub ntawv * / daim {margin: 0; padding: 0; zaub: inline; } daim ntawv lo {cursor: pointer; } / * Cov Chav Kawm * *. Paub tseeb: ob qho tag nrho; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {zaub: thaiv; paj laug-sab laug: pib; npoo-txoj cai: pib; } / * nco ntsoov teem caij dav * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .nindend {margin-left: 0; padding-sab laug: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; daim ntawv teev npe-style-duab: tsis muaj; }Thawj tsab xov xwm los ntawm Jennifer Krynin. Edited by Jeremy Girard rau 10/6/17