Tus Txheej Txheem Feem Cuam Cascading Cov Ntawv Xam Phaj nrog Qauv Tus Qauv Ntawv
Thaum koj tsim ib lub vev xaib los ntawm kos, nws txawj ntse pib nrog cov qauv sau tseg. Nws zoo li pib nrog ib daim ntaub huv huv thiab tshiab txhuam. Ib qho ntawm thawj cov teeb meem uas lub web designers ntsej muag yog tias qhov web browsers yog txhua yam sib txawv. Tsam lub font loj yog txawv ntawm lub platform rau platform, lub neej ntawd font tsev neeg sib txawv, qee cov browsers txhais margins thiab padding ntawm lub cev lossis thaum lwm tus tsis ua, thiab li ntawd. Mus ncig ntawm cov lus tsis txaus siab no los ntawm qhov qhia txog hom kev ua neej ua neej rau koj cov nplooj ntawv web.
CSS thiab Chaav teeb
Thawj yam ua ntej, teev cov cim txheej ntawm koj cov ntaub ntawv CSS rau utf-8 . Txawm hais tias feem ntau cov nplooj ntawv koj tsim tau sau ua lus Askiv, qee tus neeg yuav raug coj los siv rau cov lus sib txawv ntawm cov lus thiab kev coj noj coj ua. Thaum lawv yog, utf-8 simplifies txoj kev. Qhov kev teeb tsa ua cim nyob rau sab nraud style ntawv yuav tsis siv ua ntej HTTP header , tab sis nyob rau txhua lub sijhawm, nws yuav.
Nws yooj yim mus teeb lub cim teeb. Rau thawj kab ntawm CSS tsab ntawv sau:
@charset \ "utf-8 \";Li no, yog tias koj siv cov cim hauv ntiaj teb nyob rau hauv cov khoom los yog cov npe hauv chav kawm ntawv thiab cov npe, daim qauv ntawv yuav tseem ua hauj lwm zoo.
Styling lub Page Lub cev
Qhov ntxiv tom ntej no yuavtsum tau siv tus qauv ntawv sau ua tus qauv qiv rau cov voj tawm, khoov, thiab ciam teb. Qhov no ua rau kom tag nrho cov browsers muab cov ntsiab lus nyob rau tib qhov chaw, thiab tsis muaj qhov chaw zais ntawm qhov browser thiab cov ntsiab lus. Rau feem ntau ntawm cov nplooj ntawv web, qhov no yog ze rau ntawm ntug rau cov ntawv nyeem, tab sis nws tseem ceeb heev uas yuav tsum pib muaj kom pom cov duab tom qab thiab cov kev teeb tsa hauv kev loj dua qub kom raug.
html, lub cev {margin: 0px; padding: 0px; ciam teb: 0px; }Teem lub voj voog foreground lossis xim xim rau xim dub thiab lub neej ntawd tom qab xim. Thaum lub sij hawm no feem ntau yuav hloov rau feem ntau ntawm cov qauv tsim webpage, muaj cov qauv xim teem ntawm lub cev thiab cov cim HTML thaum xub thawj ua rau nplooj ntawv yooj yim nyeem thiab ua haujlwm nrog.
html, lub cev {xim: # 000; tom qab: #fff; }Default Font Styles
Font loj thiab font tsev yog ib yam dab tsi uas yuav tsis hloov pauv thaum tsim qhov kev siv tab sis pib nrog lub neej ntawd font loj ntawm 1 em thiab lub neej ntawd font font ntawm Arial, Geneva, lossis lwm tus sans-serif font. Kev siv cov ems khaws cov nplooj ntawv kom sai li sai tau, thiab ib daim ntawv sans-serif zoo dua li ntawm qhov screen.
html, lub cev, p, th, td, lis, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Tej zaum yuav muaj lwm qhov chaw uas koj tuaj yeem nrhiav ntawv, tiam sis p , th , td , lis , dd , thiab dt yog qhov pib zoo rau qhov kev txhais cov ntawv tseem ceeb. Xws li HTML thiab lub cev nyob rau hauv cov ntaub ntawv, tab sis ntau tus browsers override font xaiv yog tias koj tsuas yog txhais koj cov fonts rau cov HTML los yog lub cev.
Headlines
Cov npe ntawm HTML yog ib qho tseem ceeb uas yuav tau siv los pab koj qhov kev qhia hauv qhov chaw thiab cia kev tshawb fawb kom tob rau hauv koj qhov chaw. Tsis muaj tus cwj pwm, lawv yog txhua yam ncaj ncees dab tuag, vim li ntawd lawv cov qauv siv rau txhua qhov ntawm lawv thiab txhais tau cov tsev neeg font thiab qhov ntau thiab tsawg font.
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; }Tsis txhob & Tsis nco cov Links
Styling qhov link xim yog yuav luag ib feem tseem ceeb ntawm tus tsim, tab sis yog tias koj tsis txhais lawv rau hauv lub neej ntawd, koj yuav tsis nco qab tsawg kawg yog ib qho ntawm cov pseudo-kawm. Txhais lawv nrog qee qhov txawv me me ntawm xiav thiab hloov lawv thaum koj muaj xim palette rau qhov chaw hais tseg.
Txhawm rau txheeb cov kev txuas hauv ntxoov xiav, teeb:
- txuas mus xiav
- xyuas cov kev txuas li xiav xiav
- hover txuas raws li lub teeb xiav
- active links li xaim xiav xiav
raws li qhia hauv tus qauv no:
a: link {color: # 00f; } a: visited {colour: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; } Los ntawm styling cov kev txuas nrog ib txoj cai xim dawb tsis muaj tswvyim nws saib kuas tias kuv yuav tsis hnov qab tej yam kev kawm, thiab tseem ua rau lawv qee lub suab nrov dua li qhov xiav, liab, thiab ntshav.Full Style Sheet
Ntawm no yog daim ntawv qhia tag nrho:
@charset \ "utf-8 \"; html, lub cev {margin: 0px; padding: 0px; ciam teb: 0px; xim: # 000; tom qab: #fff; } html, lub cev, p, th, td, lis, 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; } a: link {color: # 00f; } a: visited {colour: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; }