CSS Usuń podkreślenie z linku
Przykład 01:
Spójrzmy na pierwszy przykład HTML, aby dodać link na stronie internetowej HTML. Następnie będziemy omawiać sposób na usunięcie podkreślenia tego linku. Wygenerowaliśmy nowy plik tekstowy z tytułem „CSS”. Ten plik został otwarty w kodzie Visual Studio. Rozpoczynamy kod przy użyciu głównego znacznika HTML, „HTML”. W tagu „Head” tego skryptu HTML używamy znacznika „Tytuł”, aby wymienić lub tytuł naszej strony internetowej „Usuń podkreślenie”.
W obrębie znacznika ciała dodaliśmy naszą treść do wyświetlania na stronie internetowej za pomocą niektórych przydatnych tagów HTML. Pierwszym tagiem, którego używamy, jest znacznik nagłówka o rozmiar 2, „H2”. H2 jest drugim co do wielkości nagłówkiem w skryptowaniu HTML. Ten nagłówek będzie wyświetlany na stronie internetowej bez żadnego stylizacji i w innym formacie. Kolejnym tagiem, którego używamy, jest tag akapitowy „P”. Zawiera prosty tekst wraz z łączem, który jest do niego dołączony z kotwicą „A”, a następnie „HREF”, aby dodać adres URL. Ten link może być ścieżką do jakiegoś obrazu na lokalnym komputerze lub internetowej stronie internetowej. Zapewniliśmy ścieżkę do obrazu na naszym lokalnym komputerze (i.mi., indeks.png.) Cokolwiek podałeś w kodoworze „A”, zostanie podkreślone i wyróżnione na stronie internetowej. Chodzi o użycie linków na stronie HTML. Zapiszmy i uruchommy ten kod za pomocą przycisku Uruchom z paska zadań kodu Visual Studio. Uruchom ten kod z przeglądarką Chrome.
Strona internetowa o nazwie „Usuń podnoś” została otwarta w przeglądarce, jak widać z poniższego wyjścia. Na białym ekranie znajduje się nagłówek „Link with podkreślenie”. Następnie masz pod nim prosty akapit z jedną linią z linkiem dołączonym do słowa „logo”. Widać, że słowo „logo” jest podkreślone i podświetlone w kolorze niebieskim. Stuknij słowo „logo”, aby zobaczyć, co się wydaje.
Strona internetowa została skierowana do obrazu pokazanego (indeks.JPG) Lokalizacja znajdująca się na naszym lokalnym komputerze. Obraz zawiera proste animowane logo.
Zaktualizujmy nasz kod HTML, aby usunąć wiersz używany do podkreślenia słowa kluczowego łącza „Logo”. W tym celu najpierw zaktualizowaliśmy nagłówek H2 (i.mi., „Link bez podkreślenia”). Następnie używamy znacznika CSS „Style” w znaczniku Anchor „A”, aby ustawić właściwość „dekorację tekstu” na „Brak”. Właściwość „Dekoracja tekstu” ustawiona na „Brak” usunie całą styl zastosowaną do konkretnego słowa kluczowego „logo” i sprawi, że jest to prosty normalny tekst. Najpierw zapiszmy ten kod.
Po uruchomieniu zaktualizowanego kodu w przeglądarce mamy linię akapitu i zaktualizujemy. Słowo „logo” zostało wyróżnione tak, jak jest, ale podkreślenie zostało z niego usunięte. Z drugiej strony słowo kluczowe „logo” nadal działa jako link i kieruje do obrazu.
Przykład 2:
Rzućmy okiem na nowy przykład, aby usunąć podkreślenie z linków podanych na stronie internetowej HTML. Ten przykład będzie inny, ponieważ używamy dwóch linków różnych rodzajów w wewnętrznym znaczniku akapitu znacznika ciała dla skryptu HTML. Dodaliśmy dwa nagłówki i dwa akapity na ciele strony internetowej za pośrednictwem tagów. Pierwsze i drugie tytuły: „Link with podkreślenie”, pokazują, że oba linki zostaną podkreślone. W obrębie tagów akapitowych używamy znacznika Anchor „A” do dodania linków do określonych adresów URL. Pierwszy URL akapitu wskazuje na ten sam wskaźnik obrazu.png. Do ustawienia koloru tego linku „Logo” na fioletowe jest znacznik w stylu CSS. Drugi URL akapitu wskazuje na nowy adres URL prostego pliku tekstowego znajdującego się na naszym lokalnym komputerze (i.mi., test.TXT) i znacznik stylu CSS został użyty do ustawienia koloru jego słowa kluczowego „Plik” na brązowe, zgodnie z właściwością kolorystyczną.
Ustawmy je za pomocą znacznika stylu w znaczniku głowy pliku HTML. Ustawiliśmy 15-pikselowe marginesy na nagłówki i akapity, podczas gdy ustawiamy również właściwości link i zawisu. Właściwość tekstu tekstowego używa wartości „podkreślają” do podkreślenia obu słów kluczowych. Grubość linii została ustawiona na 6 pikseli. Kolor właściwości zawisowej został ustawiony na „Aqua”. Zapiszmy i debugujmy ten kod teraz w Visual Studio.
Wyjście powyższego kodu pokazało dwa nagłówki z dwoma akapitami. Podkreślone słowo kluczowe „Logo” zawiera ścieżkę do obrazu, podczas gdy podkreślone słowo „plik” będzie kierować cię do pliku tekstowego (i.mi., test.tekst.)
Kiedy dotkniesz słowa kluczowego „Plik”, skieruje Cię do testu.plik txt, jak pokazano poniżej.
Kiedy unosicie się na dowolnym z podświetlonych słów z akapitów pokazanych, kolor słowa i jego podkreślenie zostaną zmienione na „aqua”, jak pokazano na poniższym wyświetlaczu.
Aby usunąć podkreślenie z obu słów linków, musimy ustawić dekorację tekstu właściwości, aby uzyskać link do „Brak”. Nie zaktualizowaliśmy reszty kodu, aby uniknąć jakichkolwiek niedogodności. Aby zobaczyć jego działanie, musimy go zapisać najpierw przez Ctrl+S, a następnie debugować przycisk „Uruchom” z kodu Visual Studio.
Dane wyjściowe tego zaktualizowanego kodu pokazało dwa akapity, każdy z linkiem odpowiednio słowo „logo” i „plik”. Podkreślenie na dole obu słów zostało pomyślnie usunięte bez powodowania problemu.
Wniosek:
Demonstracja usunięcia podkreślenia z linku została wykonana w tym artykule. W tym celu wykorzystaliśmy właściwość dekoracji tekstu w stylizacji stylistycznej i stylizacji skryptu HTML. Zastosowanie elementu zawisowego wraz z grubością i kolorem właściwości linku było bardzo pomocne w całym artykule. Po przejrzeniu wszystkich ilustracji HTML podanych w tym artykule, będziesz w stanie uzyskać wiedzę i jasne zrozumienie linków, ich stylizacji i usunięcia podliczeni pod nimi.