CSS-selector, thiab nws lub luag hauj lwm nyob rau hauv formatting html-daim ntawv

Tsim ib lub website thiab sau nws nrog tej yam hais txog qhov web page, txhua leej txhua tus yuav ntsib ib lub sij hawm xws li cov CSS-selector. Nws ua hauj lwm pab rau ntau meej txiav txim tag nrho cov ntsiab ntawm html-cov ntaub ntawv ntawm lawv tsim thiab qhov chaw nyob rau sab. Ua li no, ua ib tug CSS-ib daim ntawv uas hnoos li no tawm tej yam selectors thiab lawv formatting xaiv: xim, loj, me, qhov chaw nyob thiab lwm yam. Txhua web designer yuav tsum paub thiab muaj peev xwm kom nkag mus rau cov yam selections. Lawv muab faib los ntawm hom, lub ntsiab uas peb sib tham txog hauv qab no.

Hom ntawm selectors nyob rau hauv CSS

Nyob ntawm seb uas lub caij yog thov html-formatted, CSS-selector zaum yuav qhia txog rau ib qho ntawm cov nram qab no pawg:

• lossis selector;
• chav kawm ntawv selector;
• id-selector;
• tus cwj pwm selector.

Tag selector

Nws tseem hu ua "hom selector" los yog "lub caij", nws yog lub feem ntau yooj yim thiab nquag. Raws li nws CSS-daim ntawv no yog cov npe ntawm cov ntsiab ntawm cov html-cov ntaub ntawv, uas peb piav qhia txog. Piv txwv li, yog hais tias peb yuav tsum tau teem lub pawg lus style, peb qhia kom meej rau cov khoom thiab lawv qhov tseem ceeb rau lub caij p {tom qab: x; xim: y; loj: z}. Nyob rau hauv cov ntaub ntawv no, tag nrho cov nqe lus ntawm lub web page yuav muaj tib lub hom (cov xim tom qab, ntawv loj, thiab thiaj li nyob. D.).

chav kawm ntawv selector

Thiab yog dab tsi yog tias koj yuav tau nug koj txhua txhua pawg lus yog txawv los ntawm lwm tus yeej? Ua li no, muaj ib tug hauv chav kawm ntawv selector.

CSS-daim ntawv nyob rau hauv cov ntaub ntawv no yuav muaj kev nkag teb chaws li nram qab no daim ntawv: p.first {xim: x; font-size: y}. Yog li, peb txhais tau cov yam ntxwv ntawm "xim" thiab "loj" tsuas yog rau cov thawj cov hoob kawm pawg lus.

Nyob rau hauv ib tug html-daim ntawv nyob rau hauv cov ntaub ntawv no nkag mus rau ib tug hauv chav kawm ntawv attribute rau lub npe ntawm cov style ua ntej. Cov chav kawm yuav ua tau raws li ntau li ntau rau hauv cov style uas koj xav kom thov rau ib lub web page hais.

selector id

Feem ntau yog ib tug yuav tsum tau txhais ib tug style ntxiv meej, piv txwv li mus muaj ib tug keeb ntawm cov nplooj ntawv, los yog mus rau qauv rau lawv. Nyob rau hauv no qhov teeb meem no, cov kev pab los id-selector. Cov html ntaub ntawv muab ib yam khoom lub npe uas qhia nws cov rau lwm tus. Piv txwv li, lub ntsiab uas peb xav kom koj muab sib txawv los ntawm lwm yam style yuav tsab xov xwm title.

Ces nyob rau hauv ib tug html-daim ntawv muab lub header H1 identifier, xws articlename. Thiab nyob rau hauv lub CSS-cov ntaub ntawv, qhia kom meej rau hauv cov style, ntxiv mus rau lub ID npe grille: #articlename {xim: xiav; ntawv nyeem-dlhos: center}. Tam sim no peb tawm xov xwm yuav muaj cov xim xiav thiab rau nruab nrab.

Txhua yam ntawm cov saum no hom yuav piav raws li "ib tug yooj yim CSS-selector". Lawv txhais tau lub formatting rau ib qho parameter ntawm tus html-daim ntawv: ua ke zoo xws li cov ntsiab (xws li, tag nrho cov nqe lus ntawm tsab xov xwm), ib tug hauv chav kawm ntawv (piv txwv li, tsuas yog thawj pawg lus) los yog ib tug tej yam khoom (piv txwv li, hauv tsab xov xwm title).

tus cwj pwm selectors

Nyob rau hauv tas li ntawd mus rau saum toj, muaj ib tug CSS-selectors muab - ntau nyuab txoj kev ntawm daim ntawv thov yeej. Nws tso cai rau html hom ntsiab rau lub xaiv attribute los yog tus nqi. Muaj ntau ntau ntau ntau yam ntawm no selector:

• los ntawm lub xub ntiag ntawm lub attribute;
• nyob rau hauv nws pes tsawg tus nqi;
• los ntawm ib nrab attribute nqi;
• rau nws tej nqi.

Cia peb xav txog cov hom:

1. Cov thawj cov ntaub ntawv. Formatting yog thov, yog tias tam sim no nyob rau hauv ib lub attribute html-code (tej zaum nws yuav ua tau ib tug p, div, header, etc.). Yog hais tias nws tsis yog, nws yuav siv ib tug generic rau tag nrho cov ntsiab ntawm style. Piv txwv li, rau lub ntsiab muaj lub npe (lub cuab tam taub).
2. Qhov thib ob cov ntaub ntawv. Cov style tsuas yog siv rau cov html-hais uas muaj ib tug caij nyoog match ntawm lub attribute qhov tseem ceeb. Piv txwv li, rau cov tswv yim rau lub ntsiab, qhov twg tus nqi ntawm cov hom attribute sib npaug xa.
3. Qhov thib peb cov ntaub ntawv. Nyob rau hauv cov hom ntawv yuav tsuas muaj cov khoom nyob rau hauv daim ntawv teev cov tseem ceeb uas muaj ib tug tej yam lus. Piv txwv li, sidebar attribute "chav kawm ntawv" rau cov ntsiab div.
4. Qhov thib plaub cov ntaub ntawv. Style yog txhais tsuas yog rau cov neeg hais ntawm html-daim ntawv, uas nws kev attribute muaj ib tug tej yam muaj nuj nqis, thiab pib nrog nws. Piv txwv li, cov kev siv ntawm cov kev cai tswjhwm xim rau tag nrho cov ntsiab uas lus Askiv attribute (uas tej zaum yuav en, en-Yaila, en-au thiab t. D.).

Yog li, los ntawm kev siv ib los yog lwm yam, CSS selector, yuav zoo tshaj plaws muab teev raws li ib tug tag nrho web page, thiab piav qhia txog ib co ntawm nws cov ntsiab.