Tämä blogi kattaa seuraavat sisältöalueet:
- Kuinka käyttää tekstin koristelua Tailwind Hoverilla, Focusilla ja aktiivisilla tiloilla?
- Tekstin koristelun käyttäminen 'hover'-tilassa.
- Tekstin koristelun käyttäminen 'focus'-tilassa.
- Tekstin koristelun käyttäminen 'aktiivisessa' tilassa.
Kuinka käyttää tekstin koristelua Tailwind Hoverilla, Focusilla ja aktiivisilla tiloilla?
Tekstiä voi koristella ' teksti-sisustus ” omaisuutta. Tätä ominaisuutta voidaan käyttää useilla muokkaustiloilla, kuten ' leijuu ', ' keskittyä ' ja ' aktiivinen ' koristella tekstiä käyttäjän toimesta vastaavasti.
Esimerkki 1: Tekstin koristelun käyttäminen 'hover'-tilassa
Tämä esimerkki koskee ' teksti-sisustus ”-ominaisuus siten, että sitä ei oletuksena alleviivata, vaan se tulee alleviivatuksi, kun hiirtä vie:
< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< käsikirjoitus src = 'https://cdn.tailwindcss.com' >< / käsikirjoitus >< / pää >
< kehon >
< tekstialue luokkaa = 'ei alleviivausta hover:alleviivaus' > Tämä on Tailwind CSS < / tekstialue >
< / kehon >
< / html >
Määritä CDN-polku näiden koodirivien mukaan '
Lähtö
Kuten näkyy, '
Esimerkki 2: Tekstin koristelun käyttäminen 'focus'-tilassa
Seuraava koodilohko koristaa tekstiä lisäämällä ' keskittyä ”tila. Tämä alleviivaa tekstiä (ei oletuksena alleviivattu), kun elementti tarkentuu ' Tab 'näppäin:
< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< käsikirjoitus src = 'https://cdn.tailwindcss.com' >< / käsikirjoitus >< / pää >
< kehon >
< tekstialue luokkaa = 'ei alleviivausta fokus: alleviivaus' >Tämä on Tailwind CSS< / tekstialue >
< / kehon >
< / html >
Tämän koodin mukaan:
- Sisällytä vastaavasti CDN-polku ja '
”elementtiä. - Käytä sen jälkeen ' teksti-sisustus ”-ominaisuus, joka tekee tekstistä oletuksena alleviivaamattoman.
- siihen liittyvä ' keskittyä ”-tila alleviivaa sitten tekstiä elementin tarkentuessa.
Lähtö
Tämä tulos tarkoittaa, että elementin sisältämä teksti alleviivautuu, kun painat ' Tab ”-näppäintä eli elementin tarkentamista.
Esimerkki 3: Tekstin koristelun käyttäminen 'aktiivisessa' tilassa
Tässä esimerkissä teksti voidaan koristella siten, että ' linjan läpi ”-ominaisuutta käytetään siihen, kun elementti on aktiivinen:
< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< käsikirjoitus src = 'https://cdn.tailwindcss.com' >< / käsikirjoitus >< / pää >
< kehon >
< tekstialue luokkaa = 'ei-alleviivausta aktiivinen:linja läpi' >Tämä on Tailwind CSS< / tekstialue >
< / kehon >
< / html >
Käytä tässä koodinpätkässä alla olevia ohjeita:
- Muista käsitellyt menetelmät CDN-polun ja '
”elementtiä. - Käytä nyt tekstin koristelua ' ei alleviivausta '-ominaisuus oletuksena ja varaa ' aktiivinen ' tila ' linjan läpi ”.
- Tämä rivittää tekstin läpi, kun elementti on aktiivinen.
Lähtö
Tästä tulosteesta voidaan varmistaa, että teksti on koristeltu sovelletun tilan mukaisesti asianmukaisesti.
Johtopäätös
Tekstiä voidaan koristella ' teksti-koriste ” omaisuutta. Tätä ominaisuutta voidaan käyttää ' leijuu ', ' keskittyä ' ja ' aktiivinen ”-muokkaustila koristaa tekstiä hiiren osoitin, elementti on kohdistettu tai elementti on aktiivinen, vastaavasti.