See ajaveeb hõlmab järgmisi sisuvaldkondi:
- Kuidas rakendada teksti kaunistamist taganttuule hõljumise, fookuse ja aktiivsete olekutega?
- Tekstikaunistuse rakendamine hõljumise olekuga.
- Tekstikaunistuse rakendamine fookusolekuga.
- Tekstikaunistuse rakendamine 'aktiivse' olekuga.
Kuidas rakendada teksti kaunistamist taganttuule hõljumise, fookuse ja aktiivsete olekutega?
Teksti saab kaunistada ' tekst-kaunistus ” vara. Seda omadust saab rakendada mitmesuguste modifikaatorite olekutega, näiteks ' hõljuma ', ' keskenduda ” ja „ aktiivne ”, et kasutaja toimingul teksti vastavalt kaunistada.
Näide 1: Tekstikaunistuse rakendamine hõljumise olekuga
See näide kehtib ' tekst-kaunistus ” atribuut, nii et seda ei joonitata vaikimisi alla, vaid muutub allakriipsutatud hiirekursoril:
< html >
< pea >
< meta charset = 'utf-8' >
< meta nimi = 'vaateava' sisu = 'laius = seadme laius, esialgne skaala = 1' >
< stsenaarium src = 'https://cdn.tailwindcss.com' >< / stsenaarium >< / pea >
< keha >
< tekstiala klass = 'allajoonimata kursor: allajoon' > See on Tailwind CSS < / tekstiala >
< / keha >
< / html >
Vastavalt nendele koodiridadele määrake CDN-i tee jaotises '
Väljund
Nagu näha, '
Näide 2: Tekstikaunistuse rakendamine fookusolekuga
Järgmine koodiplokk kaunistab teksti, lisades ' keskenduda ” olek. See kriipsutab teksti alla (vaikimisi ei ole alla joonitud), kui element fokusseeritakse ' Tab ' võti:
< html >
< pea >
< meta charset = 'utf-8' >
< meta nimi = 'vaateava' sisu = 'laius = seadme laius, esialgne skaala = 1' >
< stsenaarium src = 'https://cdn.tailwindcss.com' >< / stsenaarium >< / pea >
< keha >
< tekstiala klass = 'allajoonimata fookus: allajoonimine' >See on Tailwind CSS< / tekstiala >
< / keha >
< / html >
Selle koodi järgi:
- Sarnaselt kaasake CDN-i tee ja lisage '
” element. - Pärast seda kasutage ' tekst-kaunistus ” atribuut, mis muudab teksti vaikimisi alla kriipsutamata.
- Seotud ' keskenduda ” olek rõhutab seejärel teksti elemendi fokuseerimisel.
Väljund
See tulemus tähendab, et elemendis sisalduv tekst kriipsutatakse alla nupule ' Tab ” klahvi, st elemendi fokuseerimiseks.
Näide 3: Tekstikaunistuse rakendamine 'aktiivse' olekuga
Selles näites saab teksti kaunistada nii, et „ joon läbi ” atribuut rakendatakse sellele, kui element on aktiivne:
< html >
< pea >
< meta charset = 'utf-8' >
< meta nimi = 'vaateava' sisu = 'laius = seadme laius, esialgne skaala = 1' >
< stsenaarium src = 'https://cdn.tailwindcss.com' >< / stsenaarium >< / pea >
< keha >
< tekstiala klass = 'allajoonimata aktiivne: läbijoon' >See on Tailwind CSS< / tekstiala >
< / keha >
< / html >
Selle koodilõigu puhul rakendage alltoodud samme.
- Tuletage meelde arutletud metoodikaid CDN-i tee kaasamiseks ja „
” element. - Nüüd rakendage teksti kaunistus ' allajoonimata ' atribuut vaikimisi ja eraldage ' aktiivne olek koos ' line-through ”.
- Selle tulemuseks on see, et element on aktiivne, ridades sisalduv tekst.
Väljund
Selle väljundi põhjal saab kontrollida, kas tekst on kaunistatud vastavalt rakendatavale olekule.
Järeldus
Teksti saab kaunistada ' tekst-kaunistus ” vara. Seda omadust saab rakendada koos ' hõljuma ', ' keskenduda ” ja „ aktiivne ” modifitseerija oleb teksti kaunistamiseks hiirekursori hõljutamisel, kui element on fokuseeritud või element on aktiivne.