Podkreślenie dokumentu lub tekstu jest zawsze uważane za łatwe. Ale jeśli weźmiemy pod uwagę strony internetowe, czy jest to jeszcze łatwe? Większość z nas zgodziłaby się, ale wykonanie poziomej linii zawierającej niektóre niestandardowe projekty sprawia, że to proste zadanie jest męczące. Zacznijmy podróż po dekoracji tekstu za pomocą CSS w następujący sposób:
- Co to jest dekoracja tekstu?
- Rodzaje dekoracji tekstu w CSS
- Dekoracja tekstu za pomocą CSS: Code
- Dekoracja tekstu Pomiń
Co to jest dekoracja tekstu?
Określa wygląd ozdobnych linii na tekście. Jest to skrócona właściwość dla:
- text-decoration-line
- kolor dekoracji tekstu
- styl dekoracji tekstu
Jest określony jako jedna lub więcej wartości oddzielonych spacjami, reprezentujących te z długiej rękiWłaściwości dekoracji.
Składnia:
dekoracja tekstu: || ||
Gdzie,
text-decoration-line: Służy do ustalenia rodzaju zastosowanej dekoracji nppodkreślenie, nadkreślenie i przejście liniowe.
kolor dekoracji tekstu:Służy do ustalenia koloru dekoracji.
styl dekoracji tekstu: Służy do ustawiania stylu linii, npjednolity, falisty, kropkowany, przerywany, podwójny
Rodzaje dekoracji tekstu w CSS
- Overline:
#decoration {text-decoration: overline} 
- Linia przez:
#decoration {text-decoration: line-through}- Podkreślać:
#decoration {text-decoration: underline}- Połączenie:
#decoration {text-decoration: underline line-through overline}Wynik:
Dekoracja tekstu za pomocą CSS: Code
Kod:
Kod CSS:
#overline {text-decoration: wavy overline limonka} #underover {text-decoration: dashed underline overline} #dotted {text-decoration: underline overline dotted red} #wavy {text-decoration: line-through wavy}Wynik:
Dekoracja tekstu Pomiń
Właściwość zwana pomijaniem dekoracji tekstu może być również używana, gdy tekst jest nadpisany, przekreślony lub podkreślony. Pomaga w dekorowaniu tekstu. Po prostu określa, w jaki sposób podkreślenie i nadkreślenie są rysowane, gdy przechodzą nad wznoszącymi i opadającymi.
#decoration {text-decoration-skip: ink}Wartości, których można używać z pomijaniem dekoracji tekstu to:
obiekty : (domyślnie) linia pomija obiekty w wierszu, takie jak obrazy lub elementy blokowe.
Żaden : linia przecina wszystko.
przestrzenie : linia dekoracji pomija spacje, znaki separatora słów i wszelkie spacje ustawione z odstępami między literami lub odstępami między wyrazami.
atrament : linia dekoracji pomija glify, zstępujące lub wznoszące się.
krawędzie : linia dekoracji zaczyna się nieco za początkową krawędzią treści i kończy się nieco przed końcową krawędzią treści.
dekoracja pudełkowa : linia dekoracji przeskakuje odziedziczony margines, obramowanie i dopełnienie.
Ponieważ ta właściwość nie jest obsługiwana przez żadną przeglądarkę, nie ma jeszcze wersji demonstracyjnej, ale na poniższym obrazku znajduje się przykład pokazujący, jak każda z wartości może wyglądać po zaimplementowaniu pominięcia dekoracji tekstu.
który ide jest najlepszy dla java
W ten sposób dochodzimy do końca tego bloga Dekorowanie tekstu przy użyciu CSS. Jeśli masz jakieś pytania dotyczące tego tematu, zostaw komentarz poniżej, a my skontaktujemy się z Tobą.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „Dekorowanie tekstu za pomocą CSS”, a my skontaktujemy się z Tobą.