Vim li cas ib qho yooj yim comma simplifies coding
CSS, los yog Cascading Style Sheets, yog qhov web tsim txoj kev lag luam txoj kev txais kev ntxiv rau kev pom duab rau ib qhov chaw. Nrog CSS, koj tuaj yeem tswj cov nplooj ntawv sau, xim, hom ntawv duab , tom qab duab, thiab ntau yam ntxiv. Yeej, yog tias nws yog qhov muag pom, ces CSS yog txoj kev coj cov yeeb yam rau koj lub vev xaib.
Thaum koj ntxiv CSS hom ntawv rau ib daim ntawv, koj yuav pom tias daim ntawv pib tau ntev thiab ntev dua. Txawm hais tias ib qho chaw me me xwb los ntawm ib sab tes los ntawm nplooj ntawv tuaj yeem tau xaus nrog cov ntaub ntawv CSS loj - thiab ib qhov chaw loj heev nrog ntau thiab ntau cov nplooj ntawv ntawm cov ntsiab lus nws muaj peev xwm CSS cov ntaub ntawv loj heev. Qhov no yog tsim los ntawm cov chaw ua haujlwm uas muaj ntau cov lus nug uas muaj nyob rau hauv cov ntawv txheeb style hloov li cas qhov visuals zoo thiab cov nplooj nta tawm rau cov ntxaij vab tshaus txawv.
Muaj, CSS cov ntaub ntawv tuaj yeem ua kom zoo. Qhov no tsis yog ib qho teeb meem loj thaum nws tuaj txog kev kawm ntawv thiab download speed, vim tias txawm tias CSS ntawv ntev yuav zoo nkauj me me (vim nws tsuas yog cov ntawv nyeem xwb). Tseem, txhua txhua me ntsis suav thaum nws tuaj cuag phab ceev, yog li yog tias koj tuaj yeem ua rau koj daim ntawv sau lean, uas yog lub tswv yim zoo. Qhov no yog qhov twg qhov "comma" tuaj yeem pab tau zoo rau hauv koj daim ntawv sau!
Commas thiab CSS
Koj yuav tau xav txog seb lub luag hauj lwm yog ua li cas hauv CSS selector syntax. Raws li hauv cov kab lus, cov voos vam meej yog clarity-tsis muaj chaws-rau lub separators. Lub vev ncaus hauv lub CSS selector cais ntau tus xaiv nyob rau hauv tib lub yeeb yam.
Piv txwv, cia saib ntawm qee qhov CSS hauv qab no.
th {xim: liab; }
td {xim: liab; }
p.red {xim: liab; }
div # firstred {xim: liab; }
Nrog rau qhov kev ua no, koj hais tias koj xav tau cov cim npe, cov ntawv cim npe, cov ntawv cim npe nrog rau cov chav kawm ntawv liab, thiab div tag nrog tus ID firstred tag nrho kom muaj cov xim xim liab.
Qhov no yog CSS zoo kawg nkaus, tiam sis muaj ob qhov teeb meem loj los sau nws li no:
- Nyob rau hauv lub neej yav tom ntej, yog tias koj txiav txim siab hloov xim xim ntawm cov khoom no mus xiav, koj yuav tsum ua qhov hloov plaub zaug hauv koj daim ntawv style.
- Nws ntxiv ntau lub cim ntxiv rau koj daim ntawv style uas koj tsis xav tau. Cov 4 hom no yuav tsis zoo li kev ua haujlwm, tab sis yog tias koj tseem ua qhov no hla koj daim ntawv qhia tag nrho, cov kab yuav ntxiv thiab daim ntawv ntawd yuav ntau dua, ntau dua li qhov nws xav tau.
Yuav kom tsis txhob muaj cov teeb meem no, thiab hloov koj cov ntaub ntawv CSS, peb yuav sim siv cov hnub caiv.
Siv Kev Cia Siab rau Cov Neeg Xaiv
Es tsis txhob sau ntawv 4 cais CSS xaiv thiab 4 txoj cai, koj tuaj yeem ua ke tas nrho cov yeeb yam no rau hauv ib txoj cai cov cuab yeej los ntawm kev cais cov tib neeg xaiv nrog lub voos. Ntawm no yog li cas uas yuav ua tau:
th, td, p.red, div # firstred {color: red; }
Tus ua cim comma yeej ua raws li lo lus "thiab" sab hauv lub selector. Li ntawd, qhov no siv rau cov cim npe thiab cov ntawv cim npe thiab cov ntawv cim npe nrog rau chav kawm ntawv liab THIAB div tag nrog tus ID ntaus. Qhov no yog qhov peb tau ua ua ntej, tab sis tsis tas siv 4 CSS cov cai, peb muaj ib txoj cai nrog ntau tus xaiv. Qhov no yog li cas lub comma nyob hauv lub selector, nws cia peb muaj ntau hom xaiv hauv ib txoj cai.
Tsis tsuas yog li no ua rau leaner, huv CSS ntaub ntawv, nws kuj ua rau yav tom ntej tshiab yooj yim dua. Tam sim no yog tias koj xav hloov xim ntawm liab mus rau xiav, koj tsuas yog yuav tsum hloov qhov chaw nyob ib qho chaw tsis txhob hla kev cai 4 style uas peb tau muaj! Xav txog cov sij hawm cov nyiaj khaws tseg no nyob rau tag nrho CSS cov ntaub ntawv thiab koj tuaj yeem pom tias qhov no yuav cawm tau koj ob lub sijhawm thiab qhov chaw nyob ntev ntev!
Syntax Variation
Qee cov neeg xaiv ua CSS ntau dua los ntawm kev cais txhua tus neeg xaiv ntawm nws tus kheej kab, tsis yog sau nws tag nrho rau ib kab li saum toj no. Qhov no yog li cas uas yuav ua tau:
th,
td,
p.red,
div # firstred
{
xim: liab;
}
Daim ntawv ceeb toom hais tias koj muab ib qho vuag tom qab txhua tus neeg xaiv tsa ces siv "nkag mus" los rhuav tshem qhov selector tom ntej mus rau nws tus kheej kab. Koj TSIS ntxiv qhov vias tom qab kawg nkaus selector.
Thaum koj siv cov hnub ntawm koj xaiv, koj tsim ib daim ntawv qhia ntau ntxiv uas yog yooj yim los hloov tshiab yav tom ntej thiab qhov no yooj yim rau kev nyeem ntawv hnub no!
Thawj tsab xov xwm los ntawm Jennifer Krynin. Edited by Jeremy Girard rau 5/8/17