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

Käyttäjän toiminnan pseudoluokat muotoilevat interaktiivisen elementin sen nykyisen tilan perusteella. Tämä auttaa ohjaamaan käyttäjiä ja ilmoittamaan heille, mitä juuri tapahtui. Yleensä lisäämme tilan pseudoluokkia <button>- ja <a>-elementteihin.

Syntaksi on seuraava:

selector:pseudo-class {
  property: value;
}

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

Huomio

Tarkastelemme hyödyllisimpiä tilan pseudoluokkia (hover, focus, active ja visited).

:hover

:hover-pseudoluokkaa käytetään reagoimaan käyttäjän toimintaan, kun hän on vuorovaikutuksessa kohteen kanssa osoitinlaitteella, kuten viemällä hiiren kohteen päälle. Voimme testata tätä seuraavassa esimerkissä viemällä hiiren button- ja a-elementtien päälle ja tarkkailla vaikutusta.

index.html

styles.css

:focus

:focus-valepseudoluokka toimii samalla tavalla kuin :hover-valepseudoluokka. Se reagoi elementin kohdistukseen, joka saavutetaan yleensä näppäimistön "Tab"-näppäimellä. Jotta interaktiivisten elementtien käyttäytyminen olisi johdonmukaista kaikille käyttäjille, suositellaan molempien valepseudoluokkien käyttöä yhdessä tyylittelyssä. Näin sekä hiirellä että näppäimistöllä navigoivat käyttäjät saavat saman käyttökokemuksen.

Ero :hover- ja :focus-valepseudoluokkien 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

:active aktivoituu, kun elementti otetaan käyttöön, esimerkiksi napsauttamalla linkkiä. Vaikka mikä tahansa elementti voidaan aktivoida, tätä pseudoluokkaa käytetään yleisesti linkeille ja painikkeille.

index.html

styles.css

:visited

:visited-valepääluokka koskee linkkejä, joita on jo vierailtu. Oletuksena linkit näytetään sinisinä ja muuttuvat violetiksi, kun niitä on klikattu.

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

Suggested prompts:

Can you explain more about how to use :hover and :focus together?

What are some best practices for styling interactive elements with these pseudo-classes?

Can you show examples of using :active and :visited as well?

Awesome!

Completion rate improved to 2.56

Pyyhkäise näyttääksesi valikon

Syntaksi on seuraava:

selector:pseudo-class {
  property: value;
}

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

Huomio

Tarkastelemme hyödyllisimpiä tilan pseudoluokkia (hover, focus, active ja visited).

:hover

index.html

styles.css

:focus

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

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

index.html

styles.css

:active

index.html

styles.css

:visited

:visited-valepääluokka koskee linkkejä, joita on jo vierailtu. Oletuksena linkit näytetään sinisinä ja muuttuvat violetiksi, kun niitä on klikattu.

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