Hover-, Focus- ja Active-tilojen käyttäminen tekstikoristepaksuudella myötätuulessa

Hover Focus Ja Active Tilojen Kayttaminen Tekstikoristepaksuudella Myotatuulessa



Sisältöpohjaisia ​​sivustoja luotaessa ohjelmoijan on usein korostettava tärkeitä termejä paremman käyttökokemuksen ja ymmärryksen saavuttamiseksi. Tällaisessa tapauksessa ' Tekstin koristelun paksuus ” Tailwind-apuohjelma astuu voimaan, joka voidaan sisällyttää mukautetulla tavalla sivuston ulkoasun mukaan.

Tämä opetusohjelma selittää seuraavan sisällön:

Kuinka soveltaa hover-, fokusointi- ja aktiivisia tiloja, joissa on tekstin koristelupaksuus myötätuulessa?

' Tekstin koristelu Paksuus ' voidaan soveltaa näihin tiloihin käyttämällä kohdetilaa ja ' teksti-koriste-paksuus ”-ominaisuuden jälkeen tavoitepaksuusarvo pikseleinä. Näiden lähestymistapojen integrointi muuttaa tekstin koristelun paksuutta (pikseleinä), kun hiirtä vietetään, elementti on tarkennettu tai elementti on aktiivinen. Nämä pikselit voivat olla ' 1px ', ' 2px ', ' 4px ' tai ' 8px ”. Se on sellainen, että mitä enemmän pikseleitä, sitä suurempi on paksuus.





Esimerkki 1: Tekstin koristelupaksuuden käyttäminen 'hover'-tilassa

Tämä esimerkki koskee ' teksti-koriste-paksuus ' kiinteistö ' leijuu ”-tila asettaaksesi paksuuden hiiren osoitin:





< 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 = 'alleviivaus hover:decoration-4' > James on täsmällinen < / tekstialue >

< / kehon >

< / html >

Sisällytä CDN-polku tähän koodinpätkään ''-tunnisteeseen, jotta voit hyödyntää Tailwind-toimintoja. Sen jälkeen ' '-elementti, määritä ' leijuu ”tila yhdessä sovelletun ” teksti-koriste-paksuus ' -ominaisuus, joka asettaa koristelun paksuuden oletusalleviivauksesta '4' pikselin paksuuteen, kun hiirtä vietetään.



Lähtö



Tämä tulos tarkoittaa, että tekstin koristelun paksuus eli alleviivaus on asetettu vastaavasti.



Esimerkki 2: Tekstin koristelupaksuuden käyttäminen 'focus'-tilassa

Seuraava esimerkkikoodi toteuttaa tekstin koristelun paksuuden kohdepikseliarvoon, kun elementti tarkentuu käyttämällä ' 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 = 'alleviivaus koriste-1 focus:decoration-4' >James on täsmällinen< / tekstialue >

< / kehon >

< / html >

Toista tässä koodilohkossa käsitellyt lähestymistavat CDN-polun ja ' ”elementtiä. Määritä nyt oletuspaksuus sekä siirtymäpaksuus, eli '4' pikseliä '' keskittyä ”-tilassa, jotta muutos otetaan käyttöön laukaistussa tilassa.

Huomautus: Oletusarvo ' korostaa ' ja ' alleviivaus koriste-1 ”-ominaisuudet tuottavat saman tuloksen.

Lähtö

Tästä tulosteesta voidaan varmistaa, että tekstin koristelupaksuus on muuttunut vastaavasti.

Esimerkki 3: Tekstin koristelun paksuuden käyttäminen 'aktiivisella' tilassa

Tässä koodinpätkässä tekstin koristelun paksuus muuttuu, 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 = 'alleviivaus koriste-1 aktiivinen:decoration-8' >James on täsmällinen< / tekstialue >

< / kehon >

< / html >

Sisällytä näiden koodirivien mukaan myös CDN-polku ja '