Yon Apèsi sou lekòl la Cascading Style Dra ak echantiyon Style Fèy
Lè ou bati yon sit entènèt nan grafouyen, li la entelijan yo kòmanse ak estil debaz yo defini. Se tankou kòmanse ak yon twal pwòp ak bwòs fre. Youn nan pwoblèm yo an premye ke konsèpteur entènèt fè fas a se ke navigatè entènèt yo tout diferan. Gwosè a font default se diferan de platfòm platfòm, fanmi an font default se diferan, kèk navigatè defini marges ak padding sou tag nan kò pandan ke lòt moun pa fè sa, ak sou sa. Jwenn alantou enkonsistans sa yo pa defini estil yo default pou paj entènèt ou an.
CSS ak seri a karaktè
Premye bagay premye, mete seri a karaktè nan dokiman CSS ou a utf-8 . Pandan ke li posib ke pi fò nan paj sa yo ou desine ekri nan lang angle, gen kèk ka lokalize-adapte pou diferan kontèks lengwistik ak kiltirèl. Lè yo, Utf-8 senplifye pwosesis la. Anviwònman mete nan karaktè nan fèy la style ekstèn pa pral pran priyorite sou yon header HTTP , men nan tout lòt sitiyasyon, li pral.
Li fasil yo mete seri a karaktè. Pou liy nan premye nan dokiman an CSS ekri:
@charset "utf-8";Fason sa a, si ou itilize karaktè entènasyonal nan pwopriyete a kontni oswa kòm non klas ak ID, fèy la style ap toujou travay kòrèkteman.
Kreye paj kò a
Bagay nan pwochen yon bezwen fèy default default yo se Styles zewo soti marges, padding, ak sou fwontyè. Sa a asire w ke tout navigatè mete kontni an an plas an menm, epi pa gen okenn espas kache ant navigatè a ak kontni an. Pou pifò paj wèb, sa a twò pre kwen an pou tèks, men li enpòtan yo kòmanse gen pou imaj imaj ak divizyon layout yo aliyen kòrèkteman.
html, kò {maj: 0px; padding: 0px; fwontyè: 0px; }}Mete plan la default oswa koulè font nwa ak koulè nan background default blan. Pandan ke sa a pral gen plis chans chanje pou pifò desen Paj Web, ki gen sa yo koulè estanda mete sou kò a ak HTML tag nan premye fè paj la pi fasil yo li ak travay avèk yo.
html, kò {koulè: # 000; background: # ff; }}Default Styles Font
Gwosè font la ak font fanmi yo se yon bagay ki pral inevitableman chanje yon fwa konsepsyon an pran kenbe, men kòmanse ak yon gwosè font default nan 1 em ak yon font fanmi default nan Arial, Geneva, oswa kèk font sans-serif lòt. Itilize nan ems kenbe paj la aksesib ke posib, ak yon font sans-serif se pi plis lesib sou ekran an.
html, kò, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }}Gen pouvwa pou lòt kote ou ta ka jwenn tèks, men p , th , td , li , dd , ak dt se yon bon kòmanse pou defini font la baz. Mete HTML ak kò jis nan ka, men navigatè anpil pase sou chwa font yo si ou sèlman defini polis ou pou HTML la oswa kò.
Tit
Tèt HTML yo enpòtan pou itilize pou ede plan sit ou epi kite motè rechèch yo jwenn pi fon nan sit ou. San yo pa Styles, yo tout san patipri lèd, se konsa mete estil default sou tout nan yo epi defini fanmi an font ak gwosè yo font pou chak.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }}Don 't bliye lyen yo
Élégance koulè yo lyen se prèske toujou yon pati kritik nan konsepsyon an, men si ou pa defini yo nan estil yo default, chans yo ou pral bliye omwen youn nan pseudo-klas yo. Defini yo ak kèk varyasyon ti sou ble ak Lè sa a, chanje yo yon fwa ou gen palèt an koulè pou sit la defini.
Yo mete lyen yo nan tout koulè ble, mete:
- lyen tankou ble
- te vizite lyen tankou ble fè nwa
- Link hover kòm limyè ble
- lyen aktif menm jan palè ble
jan yo montre nan egzanp sa a:
yon: lyen {koulè: # 00f; } yon: vizite {koulè: # 009; } yon: hover {koulè: # 06f; } yon: aktif {koulè: # 0cf; } Pa manier lyen yo ak yon konplo jistis inofansif li asire ke mwen pa pral bliye nenpòt nan klas yo, epi tou li fè yo yon ti kras mwens byen fò pase ble a ble, wouj, ak koulè wouj violèt.Full Fèy Style
Isit la se fèy la style plen:
@charset "utf-8"; html, kò {maj: 0px; padding: 0px; fwontyè: 0px; koulè: # 000; background: # ff; } html, kò, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } yon: lyen {koulè: # 00f; } yon: vizite {koulè: # 009; } yon: hover {koulè: # 06f; } yon: aktif {koulè: # 0cf; }}