Strikethrough jest zdefiniowany jako linia przez tekst. Jest powszechnie używany do pokazywania nieistotnego tekstu, ale możemy również wykorzystać go do dekoracji. Wczesne wersje elementu używanego HTML do wykonania tekstu tekstu. Jednak HTML5 nie obsługuje elementu. Mówiąc dokładniej, w CSS „dekoracja tekstu„Wartość właściwości jest ustalana jako„linia przez”W tym samym celu.

W tym artykule poprowadzi Cię o CSS Strikethrough i innych właściwości dekoracji tekstu. A więc zacznijmy!

Jakie są właściwości CSS z dekoracją tekstu?

Jest wiele "dekoracja tekstu”Wartości właściwości stosowane w CSS. Niektóre z nich są wymienione poniżej:

• linia przez
• podkreślać
• Overline
• nic

Przejdźmy do nich jeden po drugim!

Dekoracja tekstu: Przejście linii

„„linia przez”Właściwość tekstu tekstowego służy do dodania poziomej linii przez tekst. Ta właściwość jest również znana jako tekst skrzyżowany.

Przykład 1: Jak używać CSS Strikethrough?

Najpierw dodamy nazwane „pojemnik”Wewnątrz elementu ciała pliku HTML. Następnie dołącz

tag, aby dodać tekst.

Html

Dekoracja tekstu: Strikethrough

W sekcji CSS przypisz wartość właściwości dekoracji tekstowej jako „linia przez".

CSS

Dekoracja tekstu: Przez linię;

Można zauważyć, że właściwość przez linię jest z powodzeniem stosowana do dodanego tekstu:

Aby ta dekoracja była bardziej interesująca, zastosujmy do niej animację.

Przykład 2: Jak zastosować animację na strikeThrough z CSS?

Dodaj element DIV wewnątrz elementu ciała pliku HTML. Wewnątrz div umieść nagłówek

tag za pomocą tekstu.

Html

Witamy w Linuxhint!

Następnie zastosuj style do elementów HTML.

CSS

Elementy HTML są stylizowane za pomocą właściwości CSS. Aby ustawić wyrównanie tekstu w środku, element DIV jest dostarczany z właściwością Wysokość tekstu z centrum wartości:

div
Text-Align: Center;

Style Line Div

.linia
Font-Family: Sans-Serif;
Rozmiar czcionki: 60px;
Kolor: #00154f;
Pozycja: względny;
Wyświetlacz: Block Inline;
Kursor: wskaźnik;

Właściwości CSS, które są stosowane do linii Div, wyjaśniono poniżej:

• "rodzina czcionek„Nieruchomość ustawia rodzinę czcionki tekstu jako„Sans-Serif".
• "rozmiar czcionki„Własność o wartości”60px”Ustawia rozmiar czcionki na 60px.
• "kolor„Właściwość jest wykorzystywana do określenia koloru tekstu.
• "pozycja”Z wartością„względny”Dostosowuje div linii w stosunku do jej bieżącej pozycji.
• "wyświetlacz„Nieruchomość jako„Block wbudowany”Zezwoli na ustawienie szerokości linii i ograniczy zawartość do wyświetlenia w następnym wierszu.
• "kursor”Z wartością„wskaźnik”Określa, że ​​gdy mysz unosi się nad tekstem, wyświetli się kursor dłoni wskazujący.

Styl Line Div po selekcecie

Kod pod względem uzyskania poniżej stylizacji div linii po jego wybraniu. „„::Po”Jest znany jako selektor:

.linia :: po
treść: ";
Blok wyświetlacza;
szerokość: 0;
Wysokość: 20px;
kolor tła: #f4af1b;
Pozycja: absolutna;
Dół: 10%;
z -index: -1;
Przejście: szerokość 1s;

Po wybraniu linii wspomniane właściwości zostaną zastosowane zgodnie z wyjaśnieniem:

• "treść„Właściwość jest wykorzystywana do wstawienia określonej zawartości do elementu. Jeśli wartość nie ma, to po wyborze zawartość jest ustawiona zgodnie z wymienionym pseudo kodem.
• "wyświetlacz”Gdy blok przyjmuje dostępną szerokość ekranu i ustawia blok, aby zacząć od nowej linii.
• "szerokość„Własność jest wykorzystywana do ustawiania szerokości elementu.
• "wysokość„Właściwość jest wykorzystywana do ustawiania wysokości elementu.
• "kolor tła„Właściwość jest wykorzystywana do ustawiania koloru tła elementu.
• "pozycja”Jak absolutne odnosi się, że linia Div pozycjonuje w stosunku do swojej Div macierzystej po wyborze.
• "spód”Własność dodaje 10% miejsca na dole linii.
• "z-index”Określa kolejność nakładających się elementów.
• "przemiana”Właściwość ustawia ruch elementu, w którym wartość szerokości reprezentuje przejście, które należy zastosować na właściwości szerokości elementu, a 1s to jego czas trwania.

Style Line Div po zawisieniu

Ustaw szerokość kontenera linii na 100%, gdy mysz się na nim unosi:

.Linia: Hover :: po
szerokość: 100%;

W rezultacie unoszenie się nad dodanym tekstem doda animowaną strikeThrough:

Dekoracja tekstu: Podkreśl

„„podkreślać”Wartość właściwości tekstowej tekstu umieści wiersz pod tekstem. Ta właściwość jest wykorzystywana głównie do uznania wymaganego tekstu.

CSS

Dekoracja tekstu: podkreślenie;

Wyjście

Dekoracja tekstu: Overline

Dekoracja overline odnosi się do tekstu o linii poziomej. Jest również znany jako nadmierny. Mówiąc dokładniej, aby dokonać zastępowania tekstu, przypisz „dekoracja tekstu„Własność wartości”Overline".

CSS

Dekoracja tekstu: Overline;

Przypisując Overlinie wartość, można zauważyć, że pasek jest wyświetlany przez tekst:

Dekoracja tekstu: Brak

Jeśli nie potrzebujesz dekoracji tekstu, przypisz wartość „nic" do "dekoracja tekstu" nieruchomość.

CSS

Dekoracja tekstu: Brak;

Wyjście

Do tej pory omówiliśmy właściwości dekoracji tekstu, przejście linii, podkreślenie, przekroczenie i brak z przykładami. Następna sekcja omówi wartości atrybutu dekoracji tekstu. Więc chodźmy!

Wartości atrybutów tekstu tekstowego

Możesz również użyć dodawania innych wartości atrybutów:

• Linia tekstu tekstowego: Definiuje typ linii, taki jak podkreślenie, przerząd.
• kolor dekoracji tekstu: Definiuje kolor linii.
• Styl w stylu tekstu: Określa styl linii, niezależnie od tego, czy falisty, kropkowany, przerywany itp.
• grubość dekoracji tekstu: Definiuje szerokość linii.

Spójrz na poniższy przykład, który pokazuje dekorację tekstową z wieloma wartościami omówionych powyżej.

Przykład

Najpierw dodaj kropkowaną linię do tekstu o szerokości 10px i określony kolor:

Dekoracja tekstowa: Overline kropkowane 10px #00154f;

Następnie falisty podkreśla z wymaganą szerokością i kolorem:

Dekoracja tekstowa: Podkreśl falujący 9px RGB (249, 253, 2);

Wyżej powyższe linie kodu CSS pokażą następujące wyniki:

Podaliśmy informacje związane z CSS Striketrough i innymi właściwościami dekoracji tekstu.

Wniosek

Właściwości dekoracji tekstu CSS ustawiają wygląd różnych linii dekoracyjnych na dodanym tekście. Mówiąc dokładniej, Strikethrough dodaje linię przez tekst, który można zastosować, ustawiając wartość dekoracji tekstowej jako „linia przez". W tym poście omówiono CSS Striketrough, inne właściwości dekoracji tekstu i wartości atrybutów.