Jwenn enfòmasyon yo ak konsèy sa yo
Tout navigatè entènèt yo enkli sa ki konnen kòm "estil defauly." Sa yo se estil ki dikte gade nan ak santi nan eleman HTML nan absans la nan nenpòt lòt enfòmasyon style. Pou egzanp, nan prèske chak navigatè gade nan default nan Hyperlinks se yon koulè klere ble ak yon souliye. Sa a se ki jan sa yo lyen gade sof si ou di yo montre nan yon fason diferan.
Styles navigatè Default ka itil, men nan anpil ka konsèpteur entènèt vle retire estil sa yo pou yo ka kòmanse fre ak Styles ke yo se 100% nan kontwòl sou. Sa a se fè lè l sèvi avèk sa yo rele kòm yon "Stylesheet mèt."
Yon estiletye mèt yo ta dwe stil la an premye ou rele nan tout dokiman ou yo. Ou itilize yon Stylesheet mèt klè soti anviwònman yo navigatè default ki ka lakòz pwoblèm nan konsepsyon entènèt kwa-navigatè. Yon fwa ou te klarifye soti estil yo ak yon Stylesheet mèt, konsepsyon ou kòmanse soti nan plas la menm nan tout navigatè yo - tankou yon twal pwòp pou penti.
Global défaut
Estilye mèt ou a ta dwe kòmanse nan zewoing soti marges yo, pli ak fwontyè sou paj la. Gen kèk navigatè entènèt default kò a nan dokiman an nan 1 oswa 2 piksèl repiyans soti nan bor yo fenèt navigatè. Sa fè asire ke yo tout montre menm bagay la tou:
html, kò {maj: 0px; padding: 0px; fwontyè: 0px; }}Ou vle tou fè font la ki konsistan. Asire ou ke ou mete gwosè a font tou 100 pousan oswa 1em, pou paj ou a aksesib, men gwosè a toujou konsistan. Ak asire w ke ou gen ladan liy-wotè a.
kò {font: 1em / 1.25 Arial, Helvetica, sans-serif; }}Heading Fòma
Headline oswa Tags Tags (H1, H2, H3, elatriye) tipikman default nan tèks fonse ak marges gwo oswa padding bò kote yo. Pa netwaye pwa, marges ak padding, ou asire ke sa yo Tags toujou rete pi gwo (oswa pi piti) pase tèks la bò kote yo san yo pa gen estil siplemantè:
h1, h2, h3, h4, h5, h6 {marge: 0; padding: 0; font-pwa: nòmal; font-family: Arial, Helvetica, sans-serif; }}Ou ta ka vle konsidere anviwònman gwosè espesifik, lèt-espas ak materyèl nan Tags gran tit ou, men sa vrèman depann sou style la nan sit la w ap desine e yo ta dwe kite soti nan fèy la style mèt. Ou ka ajoute plis estil pou tit sa yo jan sa nesesè pou konsepsyon espesifik ou.
Fòma Plain Tèks
Beyond tit, gen lòt Tags tèks ke ou ta dwe asire w ke ou klè. Yon seri moun ki bliye souvan yo se baryè yo selil tab (TH ak TD) ak fòm baj (SELECT, TEXTAREA ak INPUT). Si ou pa mete moun ki nan menm gwosè a kòm kò ou ak tèks paragraf, ou ka dezagreableman etone nan ki jan navigatè yo rann yo.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akwonim, abbr, yon, opinyon, chwazi, textarea {Marge: 0; padding: 0; font: nòmal nòmal nòmal 1em / 1.25 Arial, Helvetica, sans-serif; }}Li la tou bon bay sityasyon ou (BLOCKQUOTE ak Q), akwonim, ak abrevyasyon yon ti kras anplis style, sa yo ke yo kanpe soti yon ti kras pi plis:
blokquote {maj: 1.25em; padding: 1.25em} q {font-style: italik; } acronym, abbr {kurseur: èd; fontyè-anba: 1px tirè; }}Lyen ak Imaj
Lyen yo fasil pou jere epi pou chanje nan ki byen klere ble klere souliye tèks la. Mwen pito toujou gen lyen mwen rete souliye, men si ou prefere li yon fason diferan ou ka mete opsyon sa yo separeman. Mwen menm mwen pa gen ladan koulè nan fèy la style mèt, paske sa depann sou konsepsyon an.
a, yon: lyen, yon: vizite, yon: aktif, yon: hover {tèks-decoration: soulinye; }}Avèk imaj, li enpòtan yo fèmen fontyè yo. Pandan ke pifò navigatè pa montre yon fwontyè alantou yon imaj plenn, lè se imaj la lye, navigatè yo vire sou fwontyè a. Pou ranje sa a:
img {fontyè: okenn; }}Tablo
Pandan ke tab yo pa gen okenn ankò itilize pou objektif layout, sit ou ka toujou itilize yo pou done aktyèl tablo. Sa a se yon itilizasyon amann nan tab HTML. Nou te deja fè sèten ke gwosè a tèks default se menm bagay la pou selil tab ou, men gen yon kèk lòt estil ou ta dwe mete pou ke tab ou rete menm bagay la tou:
tab {maj: 0; padding: 0; fwontyè: pa; }}Fòm
Tankou ak lòt eleman, ou ta dwe klè soti marges yo ak plèzantri alantou fòm ou yo. Yon lòt bagay mwen renmen fè se reekri tag nan fòm kòm " aliye " konsa ke li pa ajoute anplis espas kote ou mete tag nan nan kòd la. Menm jan ak eleman tèks lòt, mwen defini enfòmasyon ki font pou chwazi, tèks ak opinyon moute pi wo a, se konsa ke li nan menm bagay la tou kòm rès la nan tèks mwen an.
fòm {maj: 0; padding: 0; ekspozisyon: aliye; }}Li la tou yon bon lide chanje kurseur la pou etikèt ou yo. Sa a ede moun yo wè ke etikèt la pral fè yon bagay lè yo klike sou li.
etikèt {kurseur: konsèy; }}Klas komen
Pou pati sa a nan style la mèt, ou ta dwe defini klas ki fè sans nan ou. Sa yo se kèk nan klas yo mwen itilize pi souvan. Remake byen ke yo pa mete nan nenpòt eleman patikilye, kidonk, ou ka bay yo tou sa ou bezwen:
.klè {klè: tou de; } .floatLeft {flote: kite; } .FloatRight {flote: dwa; }. TextLeft {tèks align: left; }. TextRight {tèks-aliman: dwa; } .textCenter {tèks aliman: sant; }. TextJustify {tèks-aliman: jistifye; } .blockCenter {ekspozisyon: blòk; Marge-bò gòch: oto; Marge-dwa: oto; } / * sonje yo mete lajè * / .bold {font-pwa: fonse; } .italik {font-style: italik; } .underline {text-decoration: underline; } .nan {margin-left: 0; padding-bò gòch: 0; } .nomargin {maj: 0; } .nopadding {padding: 0; } .nobullet {lis-style: Pa gen; lis-style-imaj: okenn; }}Sonje ke paske klas sa yo ekri anvan nenpòt ki lòt estil ak yo se jis klas yo, yo se fasil yo pase sou desizyon ak pwopriyete plis espesifik ki rive pita nan kaskad la . Si ou jwenn ke ou mete yon klas komen sou yon eleman epi li pa pran efè, ou ta dwe tcheke asire w ke pa gen kèk lòt style nan youn nan stil ou pita ki afekte ke menm eleman.
Tout Stylesheet Mèt la
/ * Defaults Global * / html, kò {maj: 0px; padding: 0px; fwontyè: 0px; } kò {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Tit * / h1, h2, h3, h4, h5, h6 {Marge: 0; padding: 0; font-pwa: nòmal; font-family: Arial, Helvetica, sans-serif; } / * Tèks estil * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akwonim, abbr, yon, opinyon, chwazi, textarea {Marge: 0; padding: 0; font: nòmal nòmal nòmal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {maj: 1.25em; padding: 1.25em} q {font-style: italik; } acronym, abbr {kurseur: èd; fontyè-anba: 1px tirè; } ti {font-size: .85em; } gwo {font-size: 1.2em; } / * Lyen ak imaj * / a, yon: lyen, yon: te vizite, yon: aktif, yon: hover {tèks-decoration: underline; } img {fontyè: okenn; } / * Tablo * / tab {maj: 0; padding: 0; fwontyè: pa; } / * Fòm * / fòm {maj: 0; padding: 0; ekspozisyon: aliye; } mete etikèt sou {kurseur: konsèy; } / * Kou komen * / .clear {klè: tou de; } .floatLeft {flote: kite; } .FloatRight {flote: dwa; }. TextLeft {tèks align: left; }. TextRight {tèks-aliman: dwa; } .textCenter {tèks aliman: sant; }. TextJustify {tèks-aliman: jistifye; } .blockCenter {ekspozisyon: blòk; Marge-bò gòch: oto; Marge-dwa: oto; } / * sonje yo mete lajè * / .bold {font-pwa: fonse; } .italik {font-style: italik; } .underline {text-decoration: underline; } .nan {margin-left: 0; padding-bò gòch: 0; } .nomargin {maj: 0; } .nopadding {padding: 0; } .nobullet {lis-style: Pa gen; lis-style-imaj: okenn; }}Original atik pa Jennifer Krynin. Edited by Jeremy Girard sou 10/6/17