Šajā apmācībā ir izskaidrots šāds saturs:
- Kā lietot virziena, fokusa un aktīvo stāvokļus ar teksta dekorācijas biezumu aizmugurējā vējā?
- Teksta dekorācijas biezuma uzlikšana ar “ novietojiet kursoru ' Valsts.
- Teksta dekorācijas biezuma uzlikšana ar “ fokuss ' Valsts.
- Teksta dekorācijas biezuma uzlikšana ar “ aktīvs ' Valsts.
Kā lietot virziena, fokusa un aktīvo stāvokļus ar teksta dekorācijas biezumu aizmugurējā vējā?
' Teksta apdare Biezums ' var lietot ar šiem stāvokļiem, izmantojot mērķa stāvokli un ' teksts-dekorācija-biezums ” rekvizītu, kam seko mērķa biezuma vērtība pikseļos. Šo pieeju integrācija maina teksta dekorācijas biezumu (pikseļos), virzot peles kursoru, kad elements tiek fokusēts vai elements ir aktīvs. Šie pikseļi var būt ' 1 pikselis ',' 2 pikseļi ',' 4 pikseļi ” vai “ 8 pikseļi ”. Tas ir tāds, ka jo vairāk pikseļu, jo lielāks ir biezums.
1. piemērs: Teksta noformējuma biezuma pielietošana ar “virzīšanas” stāvokli
Šis piemērs attiecas uz ' teksts-dekorācija-biezums ' īpašums ar ' novietojiet kursoru ” stāvokli, lai iestatītu biezumu, virzot peles kursoru:
< html >
< galvu >
< meta rakstzīmju kopa = 'utf-8' >
< meta nosaukums = 'skata logs' saturu = 'platums=ierīces platums, sākotnējais mērogs=1' >
< skripts src = 'https://cdn.tailwindcss.com' >< / skripts >< / galvu >
< ķermenis >
< teksta apgabals klasē = 'pasvītrot kursoru: dekorācija-4' > Džeimss ir punktuāls < / teksta apgabals >
< / ķermenis >
< / html >
Šajā koda fragmentā iekļaujiet CDN ceļu tagā “
”, lai izmantotu Tailwind funkcijas. Pēc tam sadaļā “ ' elementu, norādiet ' novietojiet kursoru 'stāvoklis kopā ar lietoto' teksts-dekorācija-biezums ”, kas iestata dekorācijas biezumu no noklusējuma pasvītrojuma līdz palielinātam biezumam par “4” pikseļiem, novietojot peles kursoru.Izvade
Šī izvade nozīmē, ka teksta apdares biezums, t.i., pasvītrojums, ir attiecīgi iestatīts.
2. piemērs: Teksta dekorācijas biezuma pielietošana ar “fokusa” stāvokli
Šis piemēra kods ievieš teksta dekorācijas biezumu mērķa pikseļa vērtībā, kad elements tiek fokusēts, izmantojot ' Tab ” taustiņš:
< html >
< galvu >
< meta rakstzīmju kopa = 'utf-8' >
< meta nosaukums = 'skata logs' saturu = 'platums=ierīces platums, sākotnējais mērogs=1' >
< skripts src = 'https://cdn.tailwindcss.com' >< / skripts >< / galvu >
< ķermenis >
< teksta apgabals klasē = 'pasvītrot dekorāciju-1 fokuss: dekorēšana-4' >Džeimss ir punktuāls< / teksta apgabals >
< / ķermenis >
< / html >
Šajā koda blokā atkārtojiet apspriestās pieejas, lai iekļautu CDN ceļu un “ ” elements. Tagad norādiet noklusējuma biezumu kopā ar pārejas biezumu, t.i., “4” pikseļi ar “ fokuss ” stāvoklī, lai piemērotu izmaiņas aktivizētajā stāvoklī.
Piezīme: noklusējuma ' pasvītrot ” un „ pasvītrot dekorāciju-1 ” īpašības dod tādu pašu rezultātu.
Izvade
No šīs izvades var pārbaudīt, vai teksta apdares biezums ir attiecīgi pāriets.
3. piemērs: Teksta dekorācijas biezuma pielietošana ar “aktīvo” stāvokli
Šajā koda fragmentā teksta apdares biezums tiek mainīts, kad elements ir aktīvs:
< html >
< galvu >
< meta rakstzīmju kopa = 'utf-8' >
< meta nosaukums = 'skata logs' saturu = 'platums=ierīces platums, sākotnējais mērogs=1' >
< skripts src = 'https://cdn.tailwindcss.com' >< / skripts >< / galvu >
< ķermenis >
< teksta apgabals klasē = 'pasvītrot dekorāciju-1 aktīvais:dekorācija-8' >Džeimss ir punktuāls< / teksta apgabals >
< / ķermenis >
< / html >
Saskaņā ar šīm koda rindām iekļaujiet arī CDN ceļu un elementu “
Izvade
Kā novērots, noklikšķinot elementā, teksta dekorācijas biezums, t.i., pasvītrojums tiek mainīts uz “8” pikseļiem, t.i., elements ir atbilstoši aktīvs.
Secinājums
' novietojiet kursoru ',' fokuss ' un ' aktīvs 'stāvokļi var tikt piemēroti ar ' teksts-dekorācija-biezums ” rekvizītu, lai iestatītu biezumu, kad pele virza elementu, elements tiek fokusēts vai elements ir aktīvs. Šis raksts ilustrē, kā lietot kursoru, fokusu un aktīvos stāvokļus ar teksta dekorācijas biezumu programmā Tailwind.