Denne bloggen dekker innholdsområdene nedenfor:
- Hvordan bruke tekstdekorasjon med sveve med medvind, fokus og aktive tilstander?
- Påføring av tekstdekorasjon med 'sveve'-tilstanden.
- Påføring av tekstdekorasjon med 'fokus'-tilstanden.
- Bruk av tekstdekorasjon med 'aktiv' tilstand.
Hvordan bruke tekstdekorasjon med sveve med medvind, fokus og aktive tilstander?
Teksten kan dekoreres via ' tekst-dekorasjon ' eiendom. Denne egenskapen kan brukes med forskjellige modifikasjonstilstander som ' sveve ', ' fokus ' og ' aktiv ” for å dekorere teksten på brukerhandlingen tilsvarende.
Eksempel 1: Påføring av tekstdekorasjon med 'sveve'-tilstanden
Dette eksemplet gjelder ' tekst-dekorasjon ”-egenskapen slik at den ikke er understreket som standard, men blir understreket når du holder musepekeren:
< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< manus src = 'https://cdn.tailwindcss.com' >< / manus >< / hode >
< kropp >
< tekstområde klasse = 'no-underline hover:underline' > Dette er Tailwind CSS < / tekstområde >
< / kropp >
< / html >
I henhold til disse kodelinjene, spesifiser CDN-banen i '
Produksjon
Som sett, '
Eksempel 2: Påføring av tekstdekorasjon med 'fokus'-tilstanden
Følgende kodeblokk dekorerer teksten ved å inkludere ' fokus ' stat. Dette understreker teksten (ikke understreket som standard) når elementet blir fokusert via ' Tab '-tasten:
< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< manus src = 'https://cdn.tailwindcss.com' >< / manus >< / hode >
< kropp >
< tekstområde klasse = 'no-underline focus:underline' >Dette er Tailwind CSS< / tekstområde >
< / kropp >
< / html >
I henhold til denne koden:
- På samme måte inkluderer CDN-banen og inkorporer '
' element. - Etter det, bruk ' tekst-dekorasjon ” egenskap som gjør at teksten ikke er understreket som standard.
- Den tilknyttede ' fokus ” state understreker deretter teksten når elementet blir fokusert.
Produksjon
Dette resultatet betyr at den inneholdte teksten i elementet understreker når du trykker på ' Tab ” nøkkel, dvs. å få elementet fokusert.
Eksempel 3: Bruk av tekstdekorasjon med 'aktiv' tilstand
I dette eksemplet kan teksten dekoreres slik at ' gjennomgående '-egenskapen brukes på den når elementet er aktivt:
< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< manus src = 'https://cdn.tailwindcss.com' >< / manus >< / hode >
< kropp >
< tekstområde klasse = 'no-underline active:line-through' >Dette er Tailwind CSS< / tekstområde >
< / kropp >
< / html >
I denne kodebiten bruker du trinnene nedenfor:
- Husk de diskuterte metodene for å inkludere CDN-banen og '
' element. - Påfør nå tekstdekorasjonen ' ingen understreking ' egenskap som standard og alloker ' aktiv ' oppgi med ' gjennomgående '.
- Dette fører til linjer gjennom den inneholdte teksten når elementet er aktivt.
Produksjon
Fra denne utgangen kan det bekreftes at teksten er dekorert i samsvar med den anvendte tilstanden på riktig måte.
Konklusjon
Teksten kan dekoreres via ' tekst-dekorasjon ' eiendom. Denne egenskapen kan brukes med ' sveve ', ' fokus ' og ' aktiv ” modifikatortilstander for å dekorere teksten ved musepeker, henholdsvis elementet som er fokusert eller elementet er aktivt.