CSS Fjern understreken fra lenken
Eksempel 01:
La oss se på det første eksemplet på HTML for å legge til lenken i HTML -websiden. Deretter vil vi diskutere en måte å fjerne understreken av denne lenken. Vi har generert en ny tekstfil med tittelen “CSS”. Denne filen er åpnet i Visual Studio -koden. Vi har startet koden vår med bruk av hoved HTML -taggen, “HTML”. Innenfor "head" -merket til dette HTML -skriptet har vi brukt "tittelen" -koden for å navngi eller tittel vår webside, "Fjern understreket".
Innenfor kroppskoden har vi lagt til innholdet vårt som skal vises på nettsiden ved hjelp av noen nyttige HTML -tagger. Den første taggen vi har brukt er overskriften i størrelse 2, “H2”. H2 er den nest største overskriften i HTML -skripting. Denne overskriften vises på nettsiden uten styling og i et annet format. Den neste taggen vi har brukt er avsnitts -taggen, “P”. Den inneholder en enkel tekst sammen med lenken i den som er festet til den med ankeret “A” -kode etterfulgt av “Href” for å legge til URL. Denne lenken kan være en vei til et bilde på din lokale datamaskin eller en online webside. Vi har gitt veien til et bilde i vår lokale datamaskin (i.e., indeks.png.) Uansett hva du har gitt i ankeret "A" -merket, vil bli understreket og fremhevet på en webside. Dette handler om bruk av lenker på en HTML -side. La oss lagre og kjøre denne koden ved å bruke kjøreknappen fra oppgavelinjen til Visual Studio Code. Kjør denne koden med Chrome -nettleseren.
Nettsiden som heter "Fjern understreken" er åpnet i nettleseren som du kan se fra utdataene nedenfor. Det er en overskrift "lenke med understrek" på den hvite skjermen. Etter det har du et enkelt en-linje avsnitt under det med en lenke knyttet til ordet "logo". Du kan se at ordet "logo" er understreket og fremhevet i blå farge. Trykk på ordet "logo" for å se hva som kommer ut.
Nettsiden er rettet mot det vist-below-bildet (indeksen.jpg) beliggenhet som har vært lokalisert på vår lokale datamaskin. Bildet inneholder en enkel animert logo.
La oss oppdatere HTML -koden vår for å fjerne linjen som brukes til å understreke lenkeordet "logo". For dette har vi oppdatert overskrift H2 først (i.e., “Link med ingen understreker”). Etter dette har vi brukt “Style” CSS-taggen i ankerkoden “A” for å sette eiendommen “tekstdekorasjon” til “ingen”. Egenskapen "Tekst-dekorasjon" som er satt til "Ingen" vil fjerne all styling som brukes på det aktuelle lenkenes nøkkelord "logo" og gjøre det til en enkel normal tekst. La oss lagre denne koden først.
Etter å ha kjørt den oppdaterte koden i nettleseren, har vi avsnittlinjen og overskriften oppdatert. Ordet "logo" er blitt fremhevet som det er, men understreken er fjernet fra det. På den annen side fungerer nøkkelordet "Logo" fremdeles som en lenke og leder deg til bildet.
Eksempel 2:
La oss se på det nye eksemplet for å fjerne understreken fra lenkene som er gitt på HTML -websiden. Dette eksemplet vil være annerledes fordi vi har brukt to lenker av forskjellige slag i det indre avsnittsmerket til en kroppskode for et HTML -skript. Vi har lagt til to overskrifter og to avsnitt i kroppen til en webside gjennom tagger. Den første og andre titlene: "Link med understrek", viser at begge koblingene vil bli understreket. Innenfor paragraf -kodene har vi brukt ankerkoden “A” for å legge til lenker til spesifikke nettadresser. Den aller første avsnittet URL har pekt mot samme bildeindeks.png. En CSS -stilkode har blitt brukt til å angi fargen på denne lenken nøkkelordet "logo" til lilla i henhold til fargeegenskapen. URL for andre avsnitt har pekt mot den nye URL -en for en enkel tekstfil som ligger på vår lokale datamaskin (i.e., test.txt) og CSS -stilkode har blitt brukt til å angi fargen på koblings -nøkkelordet “File” til Brown i henhold til fargeegenskapen.
La oss style dem ved hjelp av en stilkode i hodemerket til en HTML -fil. Vi har satt 15-pikselmarginene for overskrifter og avsnitt mens vi også har satt koblings- og svevegenskapene. Egenskapen for tekstdekorasjon bruker verdien "understrek" for å understreke begge nøkkelordene. Tykkelsen på linjen er satt til 6 piksler. Hover -eiendomsfargen er satt til “Aqua”. La oss lagre og feilsøke denne koden i Visual Studio nå.
Utgangen for ovennevnte kode har vist to overskrifter med to avsnitt. Det understrekede nøkkelordet "Logo" inneholder banen til bildet mens det understrekede ordet "fil" vil lede deg mot tekstfilen (i.e., test.tekst.)
Når du trykker på nøkkelordet "fil" vil den henvise deg til testen.txt -fil som vist nedenfor.
Når du svever over noen av de uthevede ordene fra de vistede avsnittene, vil fargen på et ord og dets understreke bli endret til “Aqua” som vist på skjermen nedenfor.
For å fjerne understreken fra begge koblingsordene, må vi angi eiendomstekstdekorasjonen for en lenke til “Ingen”. Vi har ikke oppdatert resten av koden for å unngå ulemper. For å se den.
Utgangen for denne oppdaterte koden har vist to avsnitt hver med henholdsvis koblingsordet "logo" og "fil". Understreken i bunnen av begge ordene er fjernet med hell uten å forårsake noe problem.
Konklusjon:
Demonstrasjonen av å fjerne en understrek fra lenken er gjort i denne artikkelen. For dette benyttet vi av tekst-dekorasjonsegenskapen innen styling og outline styling av et HTML-skript. Bruken av svevelementet sammen med tykkelsen og fargeegenskapen til en lenke har vært veldig nyttig gjennom hele artikkelen. Etter å ha gått gjennom alle illustrasjonene av HTML gitt i denne artikkelen, vil du kunne få kunnskap og klar forståelse av lenker, deres styling og fjerne understrekene under dem.