CSS bez podkreślenia

CSS bez podkreślenia

CSS i HTML są połączone w celu zaprojektowania strony internetowej poprzez tworzenie zawartości HTML i dodając do nich styl. CSS umożliwia kilka stylów na zawartość HTML. Jednym z nich jest zastosowanie efektu dekoracyjnego. Ten efekt dotyczy głównie elementu tekstowego. Prosty tekst HTML jest używany również w nagłówkach, akapitach, listach i linkach. Efekty stosowane przez CSS dekorator właściwości tekstowej są odważne, kursywne i podkreślające właściwości. W tym artykule porozmawiamy o tym, jak możemy usunąć właściwość podkreślenia z tekstu używanego w linkach. Treść łącza domyślnie zawiera efekt podkreślenia.

Link HTML:

Link to zawartość HTML, która jest używana, gdy istnieje potrzeba dołączenia dwóch lub więcej stron internetowych. Jeśli chcemy podać adres innej strony internetowej lub strony internetowej na naszej domyślnej stronie, użyjemy „linku”, aby utworzyć łącze między stronami. W tym celu używana jest znacznik kotwicy HTML.

Podkreślona właściwość polega na wyróżnieniu tekstu linku lub widocznego. Ta podkreślona funkcja jest wbudowana, gdy dochodzimy do linków.

Przykład 1: Korzystanie z właściwości dekoracji tekstu:

Przeważnie napotykamy strony internetowe, w których podkreślają się linki osadzone na stronach internetowych. Użyliśmy więc prostego przykładu, w którym użyjemy oryginalnego linku z podkreślonym efektem i tym samym linkiem bez podkreślonej właściwości CSS. Odbywa się to za pośrednictwem właściwości dekoracji tekstu.

Właściwość dekoracji tekstu:

Właściwość CSS jest stosowana do zawartości HTML do ich dekorowania. Te efekty dekoracji obejmują kolor tekstu, efekt podkreślenia, pogrubiony, kursywa, wyrównanie i wiele innych właściwości.

Podstawowa składnia tej właściwości to:

1
Dekoracja tekstu: wartość; // Wartość typu dekoracji

Ale w przypadku, gdy chcemy usunąć wszystkie efekty, „brak” jest używane w miejscu wartości.

Przechodząc do kodu, użyliśmy stylizacji inline, aby wyrównać całą zawartość HTML, o której wspomnimy w ciele, do centrum strony internetowej. Pierwsza zawartość HTML to nagłówek

To również podano styl wbudowany, aby zmienić domyślny czarny kolor na niebieski. Jest to dodatkowy kod, być może nie trzeba tego używać.

1

Kolejny nagłówek jest używany, który pokaże, że link wspomniany po tym nagłówku jest oryginalny z podkreślonym efektem.

Link jest zawsze tworzony za pomocą znacznika Anchor HTML. Funkcja „href” jest w celach informacyjnych. Jest to źródło lub adres strony internetowej, która zostanie otwarta po naciśnięciu linku. Ponieważ nie dodajemy adresu, więc na razie niech funkcja będzie pusta.

1
Kliknij mnie, link1

Po tym linku użyjemy
Tag przebij się, aby utworzyć pustą linię. Następnie nagłówek, który pokaże, że następny link nie zostanie podkreślony. Znów jest używany znacznik kotwicy. Ale tym razem wykorzystaliśmy ID CSS, aby zastosować efekt tego identyfikatora. Podczas gdy cała pozostała funkcje linku będą takie same.

1
Kliknij mnie, link2

Teraz użyjemy opisu stylu wewnętrznego w sekcji głównej. Po dodaniu znacznika tytułu użyjemy instrukcji stylu o opisie utworzonego identyfikatora.

Identyfikatory i klasy wewnętrznych i zewnętrznych CS zawierają efekty, które określają tylko te elementy HTML, w których użyliśmy nazw identyfikatorów i klas. Na przykład jedna klasa, która ma właściwość nie podkreślając tekstu, zostanie zastosowana tylko do znacznika zakotwiczenia zawierającego nazwę identyfikatora, zadeklarowana w głowie.

1
2
3
4
5
#jeden
Dekoracja tekstu: Brak;

Identyfikator będzie zawierał efekt dekoracji tekstu o wartości „brak”. Ta wartość wyeliminuje wszystkie skutki zawartości HTML: współczynnik podkreślający, pogrubiony, kursyw.

Teraz zamknij wszystkie tagi i zapisz plik z rozszerzeniem HTML, aby uruchomić plik w przeglądarce.

Po wykonaniu pliku zobaczysz, że na stronie internetowej wyświetlone są dwa nagłówki z dwoma linkami. Podkreślony jest link tworzony w czynnikach domyślnych bez stosowania efektu identyfikatora CSS. Ale drugi to link bez podkreślenia, ponieważ usunęliśmy wszystkie efekty za pośrednictwem właściwości dekoracji tekstu.

PRZYKŁAD 2: Własność naadowa:

W tym przykładzie właściwość zawisu służy do usunięcia efektu podkreślonego tekstu. Podejście to podejście do nawigacji myszy w kierunku linku. Ponownie właściwość dekoracji tekstu jest dodawana do kodu, ale tym razem przy użyciu efektu zawisowego.

W sekcji nadwozia kodu nadwozie jest ponownie wyrównane do centrum, stosując wbudowane CSS. Nagłówek jest używany, a następnie nakładany jest znacznik kotwicy.

1
< a href = "#"> Cześć, jestem linkiem

Teraz użyjemy wewnętrznego opisu linku. Tym razem zastosowaliśmy efekty bezpośrednio do linku zamiast używania CSS ID. Korzystając z kotwicy „A”, zastosowany jest efekt łącza i efekt nachylenia. W przypadku „A” jako linku dekoracja tekstu jest stosowana z wartością podkreślenia.

1
2
3
4
5
A: link
Dekoracja tekstu: podkreślenie;

Podczas gdy dla właściwości nachylenia użyjemy wartości dekoracji tekstu jako „brak”. Czyniąc to, ilekroć mysz jest nawigowana do łącza, podkreślona właściwość zostanie usunięta.

1
2
3
4
5
Odp.: Hover
Dekoracja tekstu: Brak;

Stosując oba efekty, strona na obciążeniu będzie miała link podkreślenia. Ale po unosowaniu efekt podkreślenia zostanie usunięty.

Video gracze.com/wp-content/uploads/2022/07/css-no-underline-open-me.MP400: 0000: 0000: 08 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.

Wyjście koncepcji usuwania efektu podkreślenia jest wyświetlane na wideo. Dodaliśmy małą sekcję, w której łącze jest tworzone z efektami podkreślenia. Gdy mysz jest nawigowana w kierunku linku lub gdy unosimy się na linku, efekt podkreślenia łącza jest usuwany. Znowu link pojawia się, gdy mysz się porusza.

Ponadto, zamiast linków, które mają domyślnie podkreślony tekst, możemy również podkreślić dowolny tekst za pomocą znacznika podkreślenia HTML .

Wniosek:

Artykuł „CSS no podkreślenie” to kompletny przewodnik wyjaśniający podejście zastosowane do usunięcia efektu podkreślenia z tekstu już posiadającego właściwość podkreślenia, czyli link HTML. Zaczęliśmy od krótkiego wprowadzenia do linków HTML. Dwa podejścia CSS są używane do wyjaśnienia koncepcji usuwania efektu podkreślenia. Pierwszym z nich jest bezpośrednie użycie właściwości dekoracji tekstu. Podczas gdy druga metodologia obejmuje zastosowanie właściwości zawisowej, która jest pośrednio powiązana z właściwością dekoracyjną w celu wyświetlania lub wyświetlania podkreślenia na linku. Obie te koncepcje są wyjaśnione na podstawie przykładów w celu wykazania CSS używanych do podważania właściwości.