Kev tsim cov qauv zoo yog qhov tseem ceeb ntawm lub website zoo. CSS muab kev tswj xyuas zoo rau koj cov ntaub ntawv hauv cov nplooj ntawv web pages uas koj tsim muaj. Qhov no suav nrog kev muaj peev xwm hloov xim ntawm cov ntawv uas koj siv.
Font xim yuav raug hloov siv ib daim ntawv qhia sab nraud style , ib daim ntawv teev sab hauv , lossis nws yuav raug hloov siv inline styling hauv HTML daim ntawv. Cov kev cai zoo tshaj plaws hais tias koj yuav tsum tau siv ib daim ntawv ntaus sab nraud rau koj tus CSS hom. Ib daim ntawv teev npe nrog tus kheej, uas yog cov yeeb yam sau ncaj nraim hauv "taub hau" ntawm koj daim ntawv, feem ntau tsuas yog siv rau qhov me, ib phab. Cov cim hauv kev xav yuav tsum zam rau txij thaum lawv tau ua cov ntawv cim npe "laus" uas peb tau ua nrog ntau xyoo dhau los. Cov kev cim inline ua rau nws nyuaj heev los tswj tus qauv font txij li thaum koj xav tau hloov ntawm txhua qhov kev lom ntawm cov qauv hauv inline.
Nyob hauv tsab xov xwm no, koj yuav kawm tau qhov kev hloov xim xim ntawv uas siv ib daim ntawv ntaus sab nraud thiab ib cov lus uas siv rau hauv pawg lus lossis. Koj tuaj yeem siv qhov cuabyaj qub qub los hloov xim xim ntawm cov ntawv uas nyob ib ncig ntawm cov ntawv nyeem, nrog rau lub
tag.Ntxiv Styles hloov xim xim
Rau qhov ua piv txwv no, koj yuav tsum muaj daim HTML ntawv rau koj cov nplooj ntawv cim npe thiab ib qho CSS cais uas tau muab xa nrog daim ntawv ntawd. Cov ntaub ntawv HTML yuav yuav ua rau ntau cov ntsiab lus hauv nws. Qhov peb muaj kev txhawj xeeb nrog rau lub hom phiaj ntawm tsab xov xwm no yog cov pawg lus.
Ntawm no yog li cas hloov xim font ntawm cov ntawv hauv cov ntawv cim npe siv koj cov ntawv sab nraud.
Xim cov xim muaj peev xwm hais tau tias cov xim keywords, RGB xim tooj, los yog hexadecimal xim tooj.
- Ntxiv cov yeeb yam style rau pawg lus lossis:
- p {}
- Muab cov khoom muaj xim tso rau hauv qhov style. Muab ib txoj hnyuv tom qab uas yog:
- p {xim:}
- Tom qab ntawd ntxiv koj cov xim tus nqi tom qab lub tsev. Nco ntsoov xaus qhov nqi ntawd nrog ib txoj hnyav:
- p {xim: dub;}
Cov pawg lus nyob hauv koj daim ntawv yuav tam sim no yuav dub.
Cov piv txwv no siv cov lus cim xim - "black". Qhov ntawd yog ib txoj kev uas yuav ntxiv xim hauv CSS, tab sis nws yog limiting heev. Siv cov keywords rau "dub" thiab "dawb" yog ncaj vim tias cov xim ob yog qhov tseeb, tab sis ua li cas yog tias koj siv cov lus tseem ceeb xws li "liab", "blue", lossis "green"? Raws nraim li cas ntxoov ntxoo liab, xiav, los sis ntsuab koj yuav tau txais? Koj tuaj yeem qhia tsis tau hais tias qhov ntxhib ntxoo koj xav nrog keywords. Qhov no yog vim li cas hexadecimal qhov tseem ceeb feem ntau siv nyob rau hauv qhov chaw ntawm cov xim keywords.
p {xim: # 000000; }
Qhov CSS style no yuav tau teem cov xim ntawm koj cov lus rau dub, vim hais tias txoj cai ntawm # 000000 txhais mus rau dub. Koj yuav txawm siv shorthand nrog tus nqi hex thiab sau nws li xwb # 000 thiab koj xav tau tib yam.
Raws li peb tau hais lawm, hex qhov tseem ceeb ua haujlwm zoo thaum koj xav tau ib qho xim uas tsis yog dub lossis dawb xwb. Ntawm no yog ib qho piv txwv:
p {xim: # 2f5687; }
No tus nqi hex yuav teem caij rau cov xuab zeb mus rau xim xiav, tab sis tsis zoo li lo lus tseem ceeb "xiav", qhov kev cai lij choj nws muab koj lub peev xwm los tsim ib cov ntxiab heev ntawm xiav - yuav yog qhov uas tus tsim lub npe xaiv thaum lawv tsim lub interface rau qhov website no. Hauv qhov no, cov xim yuav yog qhov nruab nrab, zoo ib yam li xiav.
Thaum kawg, koj tuaj yeem siv RGBA qhov tseem ceeb rau xim xim zoo li. RGCA yog tam sim no txaus siab nyob rau hauv tag nrho cov niaj hnub browsers, yog li koj siv tau cov kev ntseeg no nrog me ntsis kev txhawj xeeb tias nws yuav tsis tau txaus siab nyob rau hauv ib lub web browser, tab sis koj muaj peev xwm kuj teem ib lub caij nyoog yooj yim.
p {xim: rgba (47,86,135,1); }
Qhov no RGBA tus nqi yog tib yam li cov xim xiav xim xiav dhau los. Thawj 3 qhov tseem ceeb tau teeb liab liab, ntsuab, thiab xiav thiab qhov kawg naj npawb yog qhov chaw alpha. Nws yog teem rau "1", uas txhais tau hais tias "100%", yog li no xim yuav tsis muaj transparency. Yog tias koj teev ntawd rau ib tug zauv, zoo li .85, nws yuav txhais 85% opacity thiab xim yuav tau me ntsis pob tshab.
Yog tias koj xav kom tsis muaj teeb meem dabtsi, koj yuav ua qhov no:
p {
xim: # 2f5687;
xim: rgba (47,86,135,1);
}
Cov syntax no teev cov cim qub ua ntej. Nws mam li sau tus nqi ntawd nrog tus lej RGBA. Qhov no txhais tau hais tias txhua tus laus browser uas tsis txhawb RGBA yuav tau txais thawj tus nqi thiab tsis quav ntsej qhov thib ob. Niaj hnub cov browsers yuav siv tus thib ob rau CSS cascade.