Ovaj vodič objašnjava sljedeće sadržaje:
- Kako primijeniti lebdenje, fokus i aktivna stanja s debljinom ukrasa teksta u stražnjem vjetru?
- Primjena debljine ukrasa teksta s ' lebdjeti ' Država.
- Primjena debljine ukrasa teksta s ' usredotočenost ' Država.
- Primjena debljine ukrasa teksta s ' aktivan ' Država.
Kako primijeniti lebdenje, fokus i aktivna stanja s debljinom ukrasa teksta u stražnjem vjetru?
' Debljina ukrasa teksta ' može se primijeniti s ovim stanjima korištenjem ciljnog stanja i ' tekst-ukras-debljina ” nakon čega slijedi ciljna vrijednost debljine u pikselima. Integracija ovih pristupa mijenja debljinu ukrasa teksta (u pikselima) nakon lebdenja mišem, elementa koji je fokusiran ili elementa koji je aktivan. Ovi pikseli mogu biti ' 1px ', ' 2 px ', ' 4 px ' ili ' 8 px ”. Što je više piksela, veća je i debljina.
Primjer 1: Primjena Debljine ukrasa teksta sa stanjem lebdenja
Ovaj primjer primjenjuje ' tekst-ukras-debljina ' svojstvo s ' lebdjeti ” za postavljanje debljine nakon prelaska miša:
< html >
< glava >
< meta skup znakova = 'utf-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1' >
< skripta src = 'https://cdn.tailwindcss.com' >< / skripta >< / glava >
< tijelo >
< tekstualno područje razreda = 'podcrtano lebdjenje:dekoracija-4' > James je točan < / tekstualno područje >
< / tijelo >
< / html >
U ovaj isječak koda uključite CDN put unutar oznake “
” kako biste iskoristili funkcije Tailwinda. Nakon toga, unutar “ ', navedite ' lebdjeti ” stanje zajedno s primijenjenim “ tekst-ukras-debljina ” svojstvo koje postavlja debljinu ukrasa sa zadane podcrtane na povećanu debljinu od “4” piksela nakon lebdenja mišem.Izlaz
Ovaj izlaz implicira da je debljina ukrasa teksta, tj. podcrtavanja, postavljena u skladu s tim.
Primjer 2: Primjena Debljine ukrasa teksta sa stanjem 'fokusa'.
Sljedeći primjer koda implementira debljinu ukrasa teksta na ciljnu vrijednost piksela nakon što se element fokusira pomoću ' tab ' ključ:
< html >
< glava >
< meta skup znakova = 'utf-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1' >
< skripta src = 'https://cdn.tailwindcss.com' >< / skripta >< / glava >
< tijelo >
< tekstualno područje razreda = 'podcrtani ukras-1 fokus: ukras-4' >James je točan< / tekstualno područje >
< / tijelo >
< / html >
U ovom bloku koda ponovite razmatrane pristupe za uključivanje CDN staze i ' ” element. Sada navedite zadanu debljinu zajedno s prijelaznom debljinom, tj. '4' piksela s ' usredotočenost ” za primjenu promjene na aktivirano stanje.
Bilješka: Zadana ' naglasiti ' i ' podcrtati ukras-1 ” svojstva daju isti ishod.
Izlaz
Iz ovog izlaza može se potvrditi da je debljina ukrasa teksta promijenjena u skladu s tim.
Primjer 3: Primjena Debljine ukrasa teksta s 'aktivnim' stanjem
U ovom isječku koda, debljina ukrasa teksta mijenja se nakon što je element aktivan:
< html >
< glava >
< meta skup znakova = 'utf-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1' >
< skripta src = 'https://cdn.tailwindcss.com' >< / skripta >< / glava >
< tijelo >
< tekstualno područje razreda = 'podcrtani ukras-1 aktivno: ukras-8' >James je točan< / tekstualno područje >
< / tijelo >
< / html >
U skladu s tim linijama koda, također, uključite CDN stazu i element “
Izlaz
Kao što je primijećeno, debljina tekstualnog ukrasa, tj. podvučene crte, mijenja se na '8' piksela nakon klika unutar elementa, tj. element je aktivan na odgovarajući način.
Zaključak
' lebdjeti ', ' usredotočenost ' i ' aktivan ' stanja mogu se primijeniti s ' tekst-ukras-debljina ” svojstvo za postavljanje debljine mišem koji lebdi nad elementom, fokusiranje elementa ili aktivan element. Ovaj tekst je ilustrirao kako primijeniti lebdenje, fokus i aktivna stanja s debljinom ukrasa teksta u Tailwindu.