A dokumentum vagy szöveg aláhúzását mindig könnyűnek tartják. De ha megvizsgáljuk a weboldalak esetét, akkor még könnyű? A legtöbben azt mondanák, hogy igen, de ha vízszintes vonalat készítünk, amely egyedi terveket tartalmaz, ez az egyszerű feladat fárasztóvá válik. Indítsa el a Szövegdekoráció utazását CSS használatával a következő módon:
- Mi a szövegdekoráció?
- Szövegdekorációk típusai a CSS-ben
- Szövegdekoráció CSS használatával: Kód
- Szövegdekoráció kihagyása
Mi a szövegdekoráció?
Meghatározza a dekoratív vonalak megjelenését a szövegen. Gyorsírás a következők számára:
- szöveg-dekoráció-sor
- szöveg-dekoráció-szín
- szöveg-dekoráció-stílus
Egy vagy több szóközzel elválasztott értékként van megadva, amely a hosszúkás te értéket képviselixt-dekorációs tulajdonságok.
Szintaxis:
szövegdíszítés: || ||
Hol,
szöveg-dekoráció-sor: A használt dekoráció típusának beállítására szolgál, plaláhúzás, overline és line-through.
szöveg-dekoráció-szín:A dekoráció színének beállítására szolgál.
szövegdekorációs stílus: A vonal stílusának beállítására szolgál, példáulszilárd, hullámos, pontozott, szaggatott, kettős
Szövegdekorációk típusai a CSS-ben
- Áttekintés:
#decoration {text-decoration: overline} 
- Line-through:
#decoration {text-decoration: line-through}- Aláhúzás:
#decoration {text-decoration: aláhúzás}- Kombináció:
#decoration {text-decoration: aláhúzza az átmenő vonalat}Kimenet:
Szövegdekoráció CSS használatával: Kód
Kód:
CSS kód:
#overline {text-decoration: hullámos overline lime} #underover {text-decoration: szaggatott aláhúzás overline} #dotted {text-decoration: aláhúzás overline pontozott piros} # hullámos {text-decoration: line-through hullámos}Kimenet:
Szövegdekoráció kihagyása
A text-decoration-skip néven ismert tulajdonság akkor is használható, ha a szöveg átfed, áthúzza és aláhúzza. Segít a szöveg díszítésében. Egyszerűen meghatározza, hogyan rajzolják az át- és aláhúzást, amikor áthaladnak az emelkedőkön és leszármazottakon.
#decoration {text-decoration-skip: ink}A szövegdekorációs ugrásoknál használható értékek:
tárgyakat : (alapértelmezett) sor kihagyja az inline objektumokat, például a képeket vagy az inline blokkoló elemeket.
egyik sem : vonal mindent áthalad.
szóközök : a díszítő sor kihagyja a szóközöket, a szóelválasztó karaktereket és a betűközzel vagy szóközökkel beállított szóközöket.
tinta : a díszítő vonal kihagyja a karakterjeleket, leszármazókat vagy emelkedőket.
hogyan ellenőrizhető a palindrom Java-ban
élek : a díszítési vonal kissé a tartalom kezdő éle után kezdődik, és kissé a tartalom vége előtt végződik.
dobozdekoráció : a díszítési vonal átugorja az örökölt margót, a szegélyt és a párnázást.
Mivel ezt a tulajdonságot egyetlen böngésző sem támogatja, még nincs bemutató, de itt van egy példa az alábbi képen arra, hogy az egyes értékek hogyan nézhetnek ki, amikor a text-decoration-skip megvalósításra kerül.
Ezzel a szövegdekoráció végére értünk a CSS használatával. Ha bármilyen kérdése van ezzel a témával kapcsolatban, kérjük, hagyjon megjegyzést alább, és kapcsolatba lépünk Önnel.
Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiák használatának képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.
Van egy kérdésünk? Kérjük, említse meg a „Szövegdekoráció CSS használatával” blog megjegyzés rovatában, és kapcsolatba lépünk Önnel.