CSS-selector, ati awọn oniwe-ipa ni akoonu html-iwe

Ṣiṣẹda a aaye ayelujara ati àgbáye o pẹlu awọn eroja ti awọn oju-iwe ayelujara, gbogbo eniyan yoo koju a igba bi awọn CSS-selector. O Sin lati diẹ sii parí mọ gbogbo awọn eroja ti html-faili ti won oniru ati ipo rẹ lori awọn iwe. Lati ṣe eyi, ṣẹda a CSS-a iwe ti ìráníyè jade awọn selectors ati awọn won akoonu awọn aṣayan: awọ, iwọn, ipo ati awọn miiran. Gbogbo ayelujara onise yẹ ki o mọ ki o si ni anfani lati daradara tẹ awọn ti o fẹ yiyan. Wọn ti wa ni pin nipa iru, awọn ifilelẹ ti awọn ti eyi ti a ọrọ ni isalẹ.

Iru selectors ni CSS

Ti o da lori si eyi ti awọn ano ti wa ni loo html-akoonu, CSS-selector le relate si ọkan ninu awọn wọnyi awọn ẹgbẹ:

• tag selector;
• kilasi selector;
• id-selector;
• ikalara selector.

tag selector

O ti tun npe ni "type selector" tabi "ano", o jẹ julọ rọrun ki o si wọpọ. Bi re CSS-iwe ni o wa ni orukọ awọn eroja ti html-faili, eyi ti a se apejuwe. Fun apẹẹrẹ, ti o ba ti a nilo lati ṣeto awọn ìpínrọ ara, a pato awọn ini ati wọn papo fun awọn ano p {lẹhin: x; awọ: y; iwọn: z}. Ni idi eyi, gbogbo ìpínrọ ti awọn oju-iwe ayelujara ti yoo ni kanna kika (lẹhin awọ, ọrọ iwọn, ki o si bẹ lori. D.).

kilasi selector

Ati ohun ti o ba ti o ba nilo lati beere rẹ gbogbo ìpínrọ ti o yatọ si lati miiran aza? Lati ṣe eyi, nibẹ ni a kilasi selector.

CSS-iwe ninu apere yi yoo ni awọn ohun titẹsi ninu awọn wọnyi fọọmu: p.first {awọ: x; font-iwọn: y}. Bayi, a setumo awọn-ini ti "awọ" ati "iwọn" nikan fun igba akọkọ kilasi ìpínrọ.

Ni a html-iwe ninu apere yi ti tẹ a kilasi ro pe si awọn orukọ ti awọn ara akọkọ. Kilasi le jẹ bi Elo bi awọn ara ti o fẹ lati waye fun a oju-iwe ayelujara eroja.

Selector id

Igba kan wa ti nilo lati setumo a ara diẹ sii parí, fun apẹẹrẹ si eyikeyi ọkan ano ti awọn iwe, tabi lati awọn ayẹwo wọn. Ni ipo yìí, awọn iranlowo ba id-selector. Awọn html faili fi a fẹ ohun kan orukọ ti o man o lãrin awọn miran. Fun apẹẹrẹ, awọn eroja ti a fẹ lati ṣeto yatọ si lati miiran ara yoo jẹ awọn article akọle.

Ki o si ni a html-iwe ni ojuse awọn akọsori H1 idamo, iru articlename. Ati ninu awọn CSS-faili, pato awọn ara, fifi si ID orukọ grille: #articlename {awọ: bulu; ọrọ-mö: aarin}. Bayi wa akọle yoo ni awọn awọ bulu ati ti dojukọ.

Kọọkan ninu awọn loke orisi le ti wa ni apejuwe bi "a simple CSS-selector". Wọn ti setumo awọn akoonu fun kan pato paramita ti awọn html-iwe: jọ iru eroja (eg, gbogbo awọn ìpínrọ ti awọn article), ọkan kilasi (fun apẹẹrẹ, nikan ni igba akọkọ ìpínrọ) tabi kan pato ohun kan (fun apẹẹrẹ, awọn article akọle).

ikalara selectors

Ni afikun si awọn loke, nibẹ ni a CSS-selectors eroja - diẹ idiju ọna ti ohun elo aza. Ti o faye gba html kika eroja lori awọn ti o yan ro pe tabi iye. Nibẹ ni o wa ni ọpọlọpọ awọn orisirisi ti yi selector:

• nipa niwaju awọn ro pe;
• ni awọn oniwe-gangan iye;
• nipa apa ro iye;
• lori awọn oniwe-kan pato iye.

Jẹ ki a ro kọọkan ninu awọn wọnyi eya:

1. Ni igba akọkọ ti nla. Akoonu ti wa ni gbẹyin, ti o ba bayi ni kan pato ro pe html-koodu (o le jẹ a p, ipin, akọsori, bbl). Ti o ba jẹ ko, ti o nlo a jeneriki fun gbogbo awọn eroja ti ara. Fun apẹẹrẹ, fun awọn eroja nini awọn akọle (ọpa sample).
2. Awọn keji nla. Awọn ara kan nikan lati awọn html-eroja ti o ni ohun gangan baramu ti awọn ro pe iye. Fun apẹẹrẹ, lati input awọn awọn eroja, ibi ti awọn iye ti awọn iru ro je egbe fi.
3. Awọn kẹta nla. Labẹ awọn kika yoo nikan ni awọn ohun kan ninu awọn akojọ ti awọn iye ti o ni o kan awọn ọrọ. Fun apẹẹrẹ, legbe ro pe "kilasi" fun eroja ipin.
4. Awọn kẹrin nla. Style wa ni telẹ nikan fun awon eroja ti html-iwe, ti pato ro pe o ni kan awọn iye, ati ki o bẹrẹ pẹlu rẹ. Fun apẹẹrẹ, awọn lilo ti awọn pàtó kan awọ si gbogbo eroja eyi ti awọn English ede ro (eyi ti o le wa en, en-rus, en-au ati t. D.).

Bayi, nipa lilo ọkan tabi awọn miiran, awọn CSS selector, le ti o dara ju wa ni pàtó kan bi ohun gbogbo oju-iwe ayelujara, ki o si se apejuwe diẹ ninu awọn ti awọn oniwe-eroja.