Òdinatè, Pwogram
CSS, pseudo, pseudo: hover, pitit, sib
By konbine HTML ak CSS, ou ka kontwole absoliman tout eleman ki nan paj web. Avèk estil ou ka fasilman chanje gade nan nan nenpòt ki blòk oswa liy. Anpil fwa CODER bezwen fè yon travay pi konplèks - chanje gade nan nan eleman nan tèt li se pa, kòm yon pati apa oswa yon eta an patikilye. Nan ka sa a, nan èd la nan pseudo CSS.
Pseudo-opere sou prensip la menm jan klas yo regilye nan markeup a, men fizikman yo pa prezante isit la. Yo ka chwazi sou baz la nan eleman pa enkli nan enfòmasyon ki dokiman, ki pa pral chwazi seleksyon a dabitid. Isit la se yon egzanp ki senp: ou gen yon bouton wouj, epi ou vle lè ou hover li te vin ble. Teyorikman, li kapab aplike nan JavaScript, men poukisa se li tèlman difisil? Anpil pi bon yo sèvi ak yon : hover CSS. Avèk èd li yo ou ka bay li okenn inite paramèt yo ke yo pral deklanche sèlman lè kurseur an sourit.
Lis CSS pseudo-klas yo mete ajou regilyèman. Petèt, pandan y ap w ap li materyèl sa a, plizyè parèt nouvo. Pou kòmanse, konsidere sa yo ki parèt nan spesifikasyon la CSS3.
: Nyèm-of-kalite
Sipoze ou gen yon lis nan kote ou vle yo sèvi ak altène koulè, sa vle di, liy lan premye se, pou egzanp, ekri nan lèt wouj, ak dezyèm lan - .. Blue, wouj soti vivan sou twa, katriyèm ankò nan ble. Précédemment, ou te gen yo kreye klas nouvo. Aranjman tèks yo nan tan lontan an ajoute nan chak eleman sou yon lis klas, ak Lè sa a chanje aparans yo nan stylesheet a. Li pa t 'twò konfòtab ak polisyon layout.
Koulye a, tout bagay se pi fasil. Sèvi ak CSS pseudo-klas: nyèm-of-kalite. Sa ap ba yon opòtinite jwenn vle efè a vizyèl, san li pa chanje anyen nan markeup a. Prensip la se senp: ou antre nan yon seleksyon, ak nan parantèz apre non an ekri yon fòmil oswa yon mo kle ki pral jwenn eleman ki nesesè yo. Pou egzanp ,: nyèm-of-kalite (menm) pral tout menm eleman, ak: nyèm-of-kalite (enpè) - enpè nan. Gen yo se yon gwo kantite fòmil itilize yo jisteman kontwole. parantèz yo endike nimewo a posib - nan ka sa a estil yo dwe aplike nan eleman la ki gen endèks ki egal a nimewo sa a.
: Nyèm-pitit
Sa a CSS pseudo-klas sou prensip la nan aksyon se menm jan ak yon sèl anvan an, men kontrèman ak l 'ap travay sèlman ak timoun yo nan atik la chwazi. Pou egzanp, si ou vle sèvi ak li nan Customize aparans nan se nan paran an
Pou kontwòl egzak nan fòmil la kapab itilize. Yo se byen difisil pou yon debutan, men sa li vo yon ti kras pi fon nan sentaks la nan ki jan tout bagay vin pi fasil. fòmil yo yo jan sa a: yon + b, kote yon - se yon faktè, epi b - konpanse. Pou egzanp, si nan parantèz endike n, pseudo a-chwazi tout eleman timoun (paske li se pa sa espesifye tèm adisyonèl nan fòm lan nan yon epi b). Si ou presize N a + 2, tout eleman ki eksepte premye a (paske se nan konpanse egal a de) pral chwazi. Pi bon nan tout, tan sa a yo etidye nan pratik. Eksperyans ak eleman yo timoun ak fòmil diferan.
: Dènye-pitit
Tout se senp. CSS pitit pseudo-klas yo te itilize yo chwazi yon atik patikilye. Sa a chwazi timoun nan sot pase yo nan eleman nan paran yo. Pou itilize byen souvan, pou egzanp, yo ka chwazi ranje ki sot pase a nan tablo a oswa retire mark soti nan blòk ki sot pase a pou fè pou evite transfere li nan liy kap vini an.
: Nyèm-dènye-pitit
Pa prensip la nan operasyon se menm jan ak mansyone deja nyèm-pitit la, men aji nan direksyon opoze a, sa vle di. E. Lè w ap itilize eleman ap deplase egal. Sa a se itil si ou bezwen jwenn dènye atik yo kèk.
Ou ta ka panse ke sa yo pseudo-klas ak pseudo-eleman CSS initil, depi ou ka jwenn bagay sa yo fè byen pa klas konvansyonèl yo. Sa a se pa sa. : Nyèm-pitit ,: nth- dènye-pitit ak analogue yo se trè pratik lè w ap travay sou pwojè gwo - pou egzanp, nan ka kote blòk la gen yon nimewo gwo nan timoun yo. Manyèlman fè aranjman pou klas long ak difisil.
kontwòl pseudo-conducteurs
E si ou bezwen chanje aparans nan yon eleman nan yon eta an patikilye? ka sa a bay CSS pseudo-klike, montre ak lòt zak. Annou egzamine yo an detay.
: lyen
Sa a referans pseudo CSS, se pa tout, men se sèlman moun ki pa gen ankò te vizite. Nan sa a, ou ka presize estil pou eleman , pou ki itilizatè a pa gen ankò pase.
: te vizite
Yon analogique nan reyalizasyon anvan-an, ki te sèlman kontwole deja te vizite lyen yo. Konbine sa yo de-klas pseudo, ou ka Customize aparans nan Tags egzakteman jan ou bezwen. Remake byen, sepandan, ke eta yo yo kalkile pou navigatè espesifik ak egzeyate apre istwa tretman.
pseudo-klas: sib CSS la
Youn nan ki pi enteresan pseudo-klas yo, ki si yo itilize nan yon sèten mezi ranplase itilize nan JavaScript. Li pèmèt kontwòl ki idantifyan a enkli nan adrès la ranje nan paj la. Wi, premye fwa a li se difisil a konprann. Eseye analizan egzanp lan.
Se pou nou di nou se sou paj 3 blòk div yo ak sèten id: id1, id2, ID3. Nou genyen tou twa lyen ki mennen nan valè yo korespondan href: # id1, # id2, # ID3. Lè ou klike sou lyen an premye nan adrès la ranje nan paj la apre lyen ki nan id ki koresponn lan pral paj la tèt li.
CSS la pou tout div blòk espesifye ekspozisyon pwopriyete: Pa gen yonn, se sa ki, yo pa yo montre pa default. Nou itilize sib: div epi remèt li yon ekspozisyon pwopriyete: blòk. Koulye a, lè ou klike sou lyen yo ak sèten href a, blòk ak id ki koresponn lan pral kapab asiyen li nan ekspozisyon: blòk, ak Se poutèt sa yo, yo pral kòmanse parèt sou paj la! Lè ou klike lyen ki nan href = http: // sit / atik / 319683 /% E2% 80% 9D # id1% E2% 80% 9D pral bloke ak id1, ak sou sa ..
Toujou pa konprann anyen? Eseye fè eksperyans. Kreye yon Layout paj ak Styles dekri anwo a. Yon kèk minit pita ou gen yon gwo tout bagay figi deyò.
Pseudo ki ka aplike nan nenpòt eleman
Pifò nan pseudo lyen yo-pi wo pase-dekri mande pou travay la. Sepandan, se pa tout eleman bezwen . Plizyè reyalizasyon ka aplike nan nenpòt ki pati nan paj la nèt.
- : Aktif se sèvi ak eleman style sou ki itilizatè a klik bouton an sourit gòch;
- : Hover - CSS pou eleman yo ki itilizatè a plan sou;
- : Konsantre - pou moun ki pati nan paj la yo, ki se kounye a nan konsantre. Sa a se pseudo-klas souvan itilize yo travay avèk fòm. Pou egzanp, si ou vle chwazi Non itilizatè èd memwa a, lè vizitè a kouche kurseur a sou li epi li kòmanse konpoze karaktè.
Sonje ke: aktif sèlman valid la nan moman ijan. Touswit apre yo fin se revokasyon an nan bouton an sourit gòch mete avèk èd nan Styles pral disparèt epi yo pral atik la ap parèt kòm li se parèt pa defo. Nan pifò ka, sa a se pseudo-klas itilize yo travay ak bouton ki sanble. Ou ka mete yo nan yon gwo kantite eta yo. Pou egzanp, bouton an default se ble, hover - vèt, peze - wouj, elatriye ...
Natirèlman, se sèlman pseudo-klas ou yo konplètman sipòte pa navigatè modèn. Pou egzanp, nan IE6 ak 7 pa pral kapab sèvi ak konsantre la, ak hover nan ak aktif sèlman pou travay referans nan IE6. Èspere ke, ou pa pral gen yo travay avèk navigatè sa yo, men si ou toujou bezwen leve, sèvi ak kòmantè kondisyonèl.
plis pseudo
Opsyon yo ki nan lis pi wo a lis pa sispann la. Se sèlman enkli eleman ka refè gras a CSS modèn (: pèmèt) oswa jis koupe soti (: andikape), se sèlman switch make toulède kaz ak radyo (: tcheke). Yon ti tan dekri yon kèk plis opsyon ki ou ka itilize pou yon kontwòl plis bon jan aparans nan kontni.
- : Sèlman-pitit - blushes posib pou aplike pou style la nan eleman nan ki se eleman nan pitit sèlman;
- : Lang - nan travay ak eleman yo ki te bay lang lè l sèvi avèk atribi nan lang;
- : Rasin - itilize yo chwazi eleman nan rasin. An konsekans, tankou yon tag HTML se ;
- : Pa - yon zouti gen anpil pouvwa. Li pèmèt ou mete restriksyon sou itilize nan estil sèten nan seleksyon. Isit la se yon egzanp: .Blue-koulè: pa (span ). Yon seleksyon pou aplike pou yon style nan tout eleman avèk klas ble-koulè a, si yo menm yo pa .
Tout lis pseudo-klas pa ka lonje sou yon sèl paj. Pifò Designers entènèt itilize nan pratik, se sèlman kèk nan yo, ki pwefere nan jere kondisyon an ak JavaScript. Wi, li nan pratik, men gen kèk moman kote rezilta pi efikas yo pral reyalize pi fasil, lè l sèvi avèk pseudo ki apwopriye a.
Similar articles
Trending Now