Koj tsis txwv rau ib hom CSS nkaus xwb.
Cascading Style Sheets (CSS) pub koj txhais kom pom lub caij uas koj pom los ntawm kev sib chwv hauv cov cwj pwm uas koj thov rau lub caij ntawd. Cov cwj pwm no yuav yog thiab ID los sis ib chav kawm thiab, zoo li txhua qhov cwj pwm, lawv ntxiv cov ntaub ntawv pab tau rau cov ntsiab lus uas lawv tau txuas nrog. Nyob ntawm seb tus cwj pwm twg ntxiv rau ib lub caij, koj tuaj yeem sau ib CSS selector los mus siv cov yeeb yam tsim nyog uas xav tau los ua kom pom thiab hnov zoo rau lub caij ntawd thiab lub website raws li tag nrho.
Txawm tias cov IDs los yog cov hoob kawm ua haujlwm rau kev ua haujlwm nrog CSS cov kev cai, cov qauv siv niaj hnub no nyiam cov hoob kawm ntawv dua cov ID, vim lawv tsis tshua meej thiab yooj yim rau kev ua haujlwm nrog tag nrho. Tau, koj tseem yuav pom ntau qhov chaw uas siv tus ID, tiam sis cov khoom siv no tab tom siv ntau dua yav dhau los thaum cov chav kawm tau ua cov nplooj ntawv niaj hnub no.
Ib los sis ntau cov chav kawm hauv CSS?
Feem ntau koj yuav tau tso ib qho kev xaiv hauv chav kawm rau ib lub caij, tab sis koj yeej tsis muaj cwj ciam rau ib hoob kawm lawv txoj kev koj nrog cov ID. Txawm tias lub caij tsuas muaj tus cim tus cwj pwm nkaus xwb, koj tuaj yeem muab ib chav kawm ntau yam thiab, qee zaum, ua li ntawd yuav ua rau koj nplooj ntawv yooj yim rau cov qauv thiab ntau dua kev ywj pheej!
Yog hais tias koj xav tau cob ntau chav kawm rau ib lub caij, koj tuaj yeem ntxiv cov chav kawm ntxiv thiab nias lawv nrog qhov chaw hauv koj tus cwj pwm.
Piv txwv, pawg lus no muaj peb chav kawm:
pullquote featured laug "> Qhov no yuav yog cov ntawv nyeem ntawm cov pawg lus
Qhov no teev rau peb cov chav kawm hauv qab no rau ntawm pawg lus xaus:
- Pullocote
- Featured
- Sab laug
Ceebtoom cov kev sib nrauj ntawm txhua qhov ntawm cov kev cai hauv chav kawm. Cov chaw no yog qhov uas lawv txawv raws li qhov sib txawv, cov chav kawm. Qhov no kuj yog vim li cas cov npe hauv chav kawm tsis tuaj yeem muaj chaw nyob hauv lawv, vim ua li ntawd yuav muab lawv cais ua lwm chav kawm.
Piv txwv li, yog tias koj siv "pullquote-featured-left" tsis muaj qhov chaw, nws yuav yog ib qhov kev kawm hauv chav kawm, tab sis qhov piv txwv saum toj no, nyob qhov twg peb lo lus no tau sib cais nrog qhov chaw, ua kom lawv yog qhov tseem ceeb ntawm tus kheej. Nws yog ib qho tseem ceeb rau kev nkag siab txog lub tswv yim no thaum koj txiav txim siab saib tus nqi hauv chav kawm twg thiaj siv tau rau hauv koj qhov webpages.
Thaum koj muaj koj qhov kev kawm hauv HTML, koj tuaj yeem muab cov no tso rau hauv koj cov CSS thiab siv cov qauv koj xav xav ntxiv. Piv txwv.
.pullquote {...}
.featured {...}
p.left {...}
Hauv cov qauv no, CSS cov lus tshaj tawm thiab cov khoom khom nqi yuav tsum yog hauv cov cwj pwm curly, uas yog li cas cov kev cai yuav siv rau tus neeg tsim nyog.
Lus Ceeb Toom - Yog tias koj muab ib chav kawm rau ib hom (piv txwv, p.left), koj tuaj yeem siv nws los ua ib feem ntawm cov npe; txawm li ntawd los, nco ntsoov tias nws tsuas yog cuam tshuam rau cov ntsiab lus uas tau muab teev tseg rau hauv CSS. Ua lwm yam lus, tus p.left style yuav tsuas siv rau pawg lus nrog rau cov chav kawm no txij li thaum koj tus neeg xaiv tsa hais tau hais tias yuav siv nws rau "paragraphs nrog ib chav kawm ntawv tus nqi ntawm 'tshuav'". Ntawm qhov sib piv, lwm ob qho xaiv nyob rau hauv qhov ua piv txwv tsis qhia meej txog tej lub caij, yog li ntawd lawv yuav siv rau txhua lub caij uas siv cov kev cai hauv chav kawm.
Cov txiaj ntsig ntawm ntau cov chav kawm
Ntau cov chav kawm tuaj yeem ua rau nws yooj yim ntxiv tshwj xeeb cov teebmeem rau cov ntsiab lus tsis tas yuav tsim kom muaj ib qho tshiab tshiab rau lub caij ntawd.
Piv txwv, koj xav kom muaj peev xwm ntab cov ntsiab lus rau sab laug lossis sai sai. Koj sau tau ob hoob sab laug thiab sab xis nrog ntab xwb: sab laug; thiab float: txoj cai; nyob rau hauv lawv. Tom qab ntawd, thaum twg koj muaj lub caij koj yuav tsum ntab sab laug, koj tsuas xav ntxiv cov hoob kawm "sab laug" rau nws daim ntawv teev npe.
Muaj ib txoj kab zoo taug kev ntawm no, txawm li cas los xij. Nco ntsoov tias cov kev cai web tsim qhov kev sib cais ntawm cov qauv thiab cov qauv. Tus qauv yog daws ntawm HTML thaum style yog hauv CSS.
Yog hais tias koj cov ntawv HTML kuj muaj cov npe uas muaj npe xws li "liab" lossis "sab laug", uas yog cov npe uas hais tias lub ntsiab lus yuav tsum zoo li cas tsis yog yam lawv muaj, koj hla txoj kab ntawm qhov qauv thiab tus qauv. Kuv sim txwv kuv cov npe tsis yog semantic npe ntau li ntau tau rau qhov laj thawj no.
Ntau hom kawm, Semantics, thiab JavaScript
Lwm qhov kom zoo dua yog siv cov chav kawm ntau dua yog tias nws muab ntau txoj hau kev rau koj ntau dua.
Koj tuaj yeem thov cov chav kawm tshiab rau cov ntsiab lus uas siv JavaScript uas tsis tas tshem cov ntawv pib. Koj tuaj yeem siv cov chav kawm los txheeb xyuas lub semantics ntawm lub caij . Qhov no txhais tau tias koj tuaj yeem tau ntxiv rau cov chav kawm ntxiv los txheeb xyuas lub ntsiab lus uas txhais tau hais tias yog semantically. Qhov no yog li cas Microformats ua haujlwm.
Disadvantages ntawm ntau cov hoob kawm
Qhov loj tshaj plaws yog siv ntau chav kawm ntawm koj cov ntsiab lus yog tias nws tuaj yeem ua rau lawv tsis tshua muaj neeg tsis tuaj yeem saib thiab tswj sijhawm. Tej zaum nws yuav tsis yooj yim los txiav txim seb yam dab tsi cuam tshuam rau ib lub caij thiab yog tias cov ntawv sau tau ua rau nws. Muaj ntau qhov kev coj ua niaj hnub no, xws li Bootstrap, ua kom hnyav siv cov ntsiab lus nrog ntau chav. Txoj cai no tuaj yeem tawm ntawm tes thiab siv zog ua haujlwm nrog sai sai yog tias koj tsis xyuam xim.
Thaum koj siv ntau cov chav kawm, koj tseem khiav qhov kev pheej hmoo ntawm kev tau cov style rau ib chav kawm dhau ntawm tus qauv ntawm lwm qhov txawm tias koj tsis tau npaj siab rau qhov no. Qhov no ces yuav ua rau nws nyuaj rau koj paub tias vim li cas koj tus cwj pwm tsis raug siv txawm tias thaum nws pom tias lawv yuav tsum ua.
Koj yuav tsum tau paub txog yam tseem ceeb, txawm nrog cov cuab yeej siv rau qhov ntawd!
Los ntawm kev siv lub cuab tam xws li Webmaster cov cuab yeej hauv Chrome, koj tuaj yeem yooj yim pom li cas koj cov kev kawm raug rau koj tus cwj pwm thiab tsis txhob muaj qhov teeb meem ntawm cov cwj pwm thiab cov cwj pwm.
Thawj tsab xov xwm los ntawm Jennifer Krynin. Edited by Jeremy Girard rau 8/7/17