Oppiskele Tyylien Parantaminen Käyttäjän Toiminnan Pseudoluokilla

Käyttäjän toimintaan perustuvat pseudoluokat mahdollistavat elementtien tyylittelyn käyttäjän vuorovaikutuksen perusteella. Niitä käytetään yleisesti <button>- ja <a>-elementeissä palautteen antamiseen vuorovaikutuksen aikana.

Syntaksi on seuraava:

selector:pseudo-class {
  property: value;
}

selector voi olla mikä tahansa aiemmissa luvuissa käsitelty valitsin;
pseudo-class tarvitsee : ennen määrittelyään, eikä väliä lisätä.

Huomio

Käsittelemme hyödyllisimmät tilapseudoluokat (hover, focus, active ja visited).

:hover

Aktivoituu, kun käyttäjä osoittaa elementtiä hiiren osoittimella. Erinomainen interaktiivisen visuaalisen palautteen luomiseen.

index.html

styles.css

:focus

Aktivoituu, kun elementti saa näppäimistön fokuksen (yleensä Tab-näppäimellä). Saavutettavuuden varmistamiseksi hover- ja focus-tyylejä käytetään usein yhdessä, jotta hiiren ja näppäimistön käyttäjille tarjotaan yhtenäinen kokemus.

Ero :hover- ja :focus-valitsimien välillä

:hover reagoi hiiren osoittimen toimintaan;
:focus reagoi näppäimistön toimintaan ("Tab"-näppäin).

Seuraavassa esimerkissä samaan elementtiin on liitetty eri pseudoluokkia. Kiinnitä huomiota styles.css-tiedostoon. Voimme huomata, että hover- ja focus-efekteille voidaan määrittää samat tyylit erottamalla valitsin ja pseudoluokka pilkulla ,.

index.html

styles.css

:active

Aktivoituu, kun elementtiä käytetään, yleisimmin hiiren painalluksen aikana painikkeissa tai linkeissä.

index.html

styles.css

:visited

Käytetään linkkeihin, joiden kohde on jo käyty käyttäjän toimesta. Selaimet näyttävät yleensä käymättömät linkit sinisinä ja käydyt violetteina, ellei näitä tyylejä ohiteta.

index.html

styles.css

1. Mikä pseudoluokka aktivoituu, kun käyttäjä vie hiiren elementin päälle?

2. Mikä pseudoluokka lisätään linkkiin, joka on jo vierailtu?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 1. Luku 6

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Pyyhkäise näyttääksesi valikon

Syntaksi on seuraava:

selector:pseudo-class {
  property: value;
}

selector voi olla mikä tahansa aiemmissa luvuissa käsitelty valitsin;
pseudo-class tarvitsee : ennen määrittelyään, eikä väliä lisätä.

Huomio

Käsittelemme hyödyllisimmät tilapseudoluokat (hover, focus, active ja visited).

:hover

Aktivoituu, kun käyttäjä osoittaa elementtiä hiiren osoittimella. Erinomainen interaktiivisen visuaalisen palautteen luomiseen.

index.html

styles.css

:focus

Ero :hover- ja :focus-valitsimien välillä

:hover reagoi hiiren osoittimen toimintaan;
:focus reagoi näppäimistön toimintaan ("Tab"-näppäin).

index.html

styles.css

:active

Aktivoituu, kun elementtiä käytetään, yleisimmin hiiren painalluksen aikana painikkeissa tai linkeissä.

index.html

styles.css

:visited

Käytetään linkkeihin, joiden kohde on jo käyty käyttäjän toimesta. Selaimet näyttävät yleensä käymättömät linkit sinisinä ja käydyt violetteina, ellei näitä tyylejä ohiteta.

index.html

styles.css

1. Mikä pseudoluokka aktivoituu, kun käyttäjä vie hiiren elementin päälle?

2. Mikä pseudoluokka lisätään linkkiin, joka on jo vierailtu?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 1. Luku 6