Poga ir noklikšķināms elements, ko izmanto, lai veiktu noteiktu darbību. Izmantojot CSS, varat iestatīt dažādus pogu stilus, viens no tiem ir mainīt pogas krāsu, noklikšķinot. Pogas krāsu var iestatīt, izmantojot CSS ' : aktīvs ” pseidoklase.
Šajā emuārā tiks parādīta procedūra, kas saistīta ar pogas krāsas maiņu, noklikšķinot. Šim nolūkam, pirmkārt, uzziniet par :active pseidoklasi.
Tātad, sāksim!
Kas ir “:active” CSS?
Mainīt pogas krāsu, noklikšķinot CSS, ir iespējams, izmantojot “ : aktīvs ” pseidoklase. HTML valodā tas norāda elementu, kas tiek aktivizēts, kad lietotājs uz tā noklikšķina. Turklāt, izmantojot peli, aktivizēšana sākas, kad tiek nospiests peles taustiņš.
Sintakse
a : aktīvs {
krāsa : zaļš ;
}
' a ” attiecas uz HTML elementu, kuram tiks piemērota klase :active.
Dosimies pie piemēra, lai saprastu norādīto jēdzienu.
Kā mainīt pogas krāsu, noklikšķinot CSS?
Lai mainītu pogas krāsu, noklikšķinot, vispirms izveidojiet pogu HTML failā un piešķiriet klases nosaukumu ' btn ”.
HTML
< ķermeni >< pogu klasē = 'btn' > Poga < / pogu >
< / ķermeni >
Pēc tam CSS pakalpojumā iestatiet pogas krāsu. Lai to izdarītu, mēs izmantosim ' .btn ”, lai piekļūtu pogai un iestatītu pogas krāsu kā “ rgb(0, 255, 213) ”.
CSS
.btn {fona krāsa : rgb ( 0 , 255 , 213 ) ;
}
Pēc tam uz pogas izmantojiet :aktīvo pseidoklasi kā “ .btn:active ” un iestatiet pogas krāsu, kas aktīvajā stāvoklī tiks rādīta kā „ rgb(123, 180, 17) ”:
.btn : aktīvs {fona krāsa : rgb ( 123 , 180 , 17 ) ;
}
Tas parādīs šādu rezultātu:
Tagad pievienosim virsrakstu ar
tagu un pogas klases nosaukumu ' pogu ”, tagā .
HTML
< centrs >
< h1 > Mainiet pogas krāsu < / h1 >
< pogu klasē = 'poga' > Noklikšķiniet uz Es < / pogu >
< / centrs >
Pēc tam mēs pāriesim uz CSS un veidosim pogu un lietosim tai :active. Lai to izdarītu, mēs iestatīsim apmales stilu kā ' neviens ' un piešķiriet polsterējumu kā ' 15 pikseļi ”. Pēc tam iestatiet pogas teksta krāsu kā ' rgb(50, 0, 54) ' un tā fons kā ' rgb(177, 110, 149) ”, un tā rādiuss kā “ 15 pikseļi ”:
.poga {
robeža : neviens ;
polsterējums : 15 pikseļi ;
krāsa : rgb ( piecdesmit , 0 , 54 ) ;
fona krāsa : rgb ( 177 , 110 , 149 ) ;
robeža-rādiuss : 15 pikseļi ;
}
Tas parādīs šādu rezultātu:
Pēc tam uz pogas tiks lietota :aktīva pseidoklasi kā “ .button:active ” un iestatiet pogas krāsu kā „ rgb(200, 255, 0) ”:
.poga : aktīvs {
fona krāsa : rgb ( 200 , 255 , 0 ) ;
}
Kad esat ieviesis visu iepriekš minēto kodu, dodieties uz HTML failu un izpildiet to, lai pārbaudītu rezultātu:
No izvades var novērot, noklikšķinot uz pogas, tās krāsa tiek mainīta atbilstoši norādītajam RGB krāsu kodam.
Secinājums
Lai mainītu pogas krāsu, noklikšķinot CSS, “ : aktīvs ” var izmantot pseidoklasi. Precīzāk, tas var attēlot pogas elementu, kad tas tiek aktivizēts. Izmantojot šo klasi, varat iestatīt dažādas pogu krāsas, kad uz tās noklikšķina pele. Šajā rakstā ir izskaidrota procedūra, kā mainīt pogas krāsu, noklikšķinot CSS.
HTML
< centrs >< h1 > Mainiet pogas krāsu < / h1 >
< pogu klasē = 'poga' > Noklikšķiniet uz Es < / pogu >
< / centrs >
Pēc tam mēs pāriesim uz CSS un veidosim pogu un lietosim tai :active. Lai to izdarītu, mēs iestatīsim apmales stilu kā ' neviens ' un piešķiriet polsterējumu kā ' 15 pikseļi ”. Pēc tam iestatiet pogas teksta krāsu kā ' rgb(50, 0, 54) ' un tā fons kā ' rgb(177, 110, 149) ”, un tā rādiuss kā “ 15 pikseļi ”:
.poga {robeža : neviens ;
polsterējums : 15 pikseļi ;
krāsa : rgb ( piecdesmit , 0 , 54 ) ;
fona krāsa : rgb ( 177 , 110 , 149 ) ;
robeža-rādiuss : 15 pikseļi ;
}
Tas parādīs šādu rezultātu:
Pēc tam uz pogas tiks lietota :aktīva pseidoklasi kā “ .button:active ” un iestatiet pogas krāsu kā „ rgb(200, 255, 0) ”:
.poga : aktīvs {fona krāsa : rgb ( 200 , 255 , 0 ) ;
}
Kad esat ieviesis visu iepriekš minēto kodu, dodieties uz HTML failu un izpildiet to, lai pārbaudītu rezultātu:
No izvades var novērot, noklikšķinot uz pogas, tās krāsa tiek mainīta atbilstoši norādītajam RGB krāsu kodam.
Secinājums
Lai mainītu pogas krāsu, noklikšķinot CSS, “ : aktīvs ” var izmantot pseidoklasi. Precīzāk, tas var attēlot pogas elementu, kad tas tiek aktivizēts. Izmantojot šo klasi, varat iestatīt dažādas pogu krāsas, kad uz tās noklikšķina pele. Šajā rakstā ir izskaidrota procedūra, kā mainīt pogas krāsu, noklikšķinot CSS.