CSS ingen understrek

CSS ingen understrek

CSS og HTML kombineres for å designe et nettsted ved å lage HTML -innholdet og legge til stil til dem. CSS lar flere stiler HTML -innhold. En av dem er å anvende den dekorative effekten. Denne effekten er hovedsakelig for tekstelementet. En enkel HTML -tekst brukes også i overskrifter, avsnitt, lister og lenker. Effektene som brukes av CSS dekorere tekstegenskaper er de dristige, kursiske og understrekene egenskapene. I denne artikkelen vil vi snakke om hvordan vi kan fjerne understreket egenskap fra teksten som brukes i lenker. Koblingsinnholdet inneholder understreket effekt som standard.

HTML Link:

En lenke er HTML -innholdet som brukes når det er behov for å knytte to eller flere websider. Hvis vi ønsker å gi adressen til en annen webside eller et nettsted på standardsiden vår, bruker vi 'Link' for å opprette en kobling mellom sider. For dette formål brukes HTML Anchor -tag.

Den understrekede egenskapen er å lage teksten til lenken fremhevet eller fremtredende. Denne understrekede funksjonen er innebygd når vi kommer til lenkene.

Eksempel 1: Bruke Egenskaper for tekstdekorasjon:

Stort sett kommer vi over nettstedene der koblingene som er innebygd på websidene er understreket. Så vi har brukt et enkelt eksempel der vi vil bruke en original kobling med en understreket effekt og den samme koblingen uten den understrekede egenskapen til CSS. Dette gjøres gjennom tekstdekorasjonsegenskapen.

Tekstdekorasjonsegenskap:

En CSS -eiendom brukes på HTML -innholdet for å dekorere dem. Disse dekorasjonseffektene inkluderer tekstfarge, understrek effekt, fet, kursiv, justering og mange andre egenskaper.

Den grunnleggende syntaks for denne egenskapen er:

1
Tekstdekorasjon: verdi; // Dekorasjonstypeverdi

Men i tilfelle hvor vi ønsker å fjerne alle effekter, brukes 'ingen' i verdien av verdien.

Kommer mot koden, har vi brukt en inline styling for å justere hele HTML -innholdet som vi vil nevne i kroppen, til sentrum av nettsiden. Det første HTML -innholdet er overskriften

som også er gitt en inline -stil for å endre standard svart farge til blå. Det er en ekstra kode, det er ikke sikkert du trenger å bruke dette.

1

En annen overskrift brukes som vil vise at lenken som er nevnt etter denne overskriften er den originale med en understreket effekt.

En lenke opprettes alltid gjennom en ankerkode med HTML. "Href" -funksjonen er som referanse. Det er kilden eller adressen til nettsiden som vil bli åpnet når vi trykker på lenken. Ettersom vi ikke legger til adressen, så la funksjonen være tom for nå.

1
Klikk meg, link1

Etter denne lenken vil vi bruke
Break -taggen for å lage en tom linje. Deretter blir en overskrift som viser at neste lenke ikke blir understreket erklært. En ankerkode brukes igjen. Men denne gangen har vi brukt CSS -ID for å få effekten av denne IDen brukt på lenken. Mens hele gjenværende lenkefunksjoner vil være den samme.

1
Klikk meg, link2

Nå bruker vi den interne stilbeskrivelsen i hodeseksjonen. Etter å ha lagt til tittelkoden, vil vi bruke stilerklæringen som har beskrivelsen av IDen vi opprettet.

ID -ene og klasser av interne og eksterne CSS inneholder effektene som bare spesifiserer de HTML -elementene der vi har brukt navnene på ID -ene og klassene. For eksempel vil den ene klassen som har egenskapen til ikke å understreke teksten bare bli brukt på ankerkoden som inneholder navnet på ID, erklært i hodet.

1
2
3
4
5
#en
Tekstdekorasjon: Ingen;

IDen vil inneholde tekstdekorasjonseffekten som har verdien 'ingen'. Denne verdien vil eliminere alle effektene av HTML -innholdet: understrek faktor, fet, kursiv eller en hvilken som helst farge som brukes på det.

Lukk nå alle taggene og lagre filen med HTML -utvidelsen for å kjøre filen i nettleseren.

Ved utførelsen av filen vil du se at to overskrifter med to lenker vises på websiden. En lenke som opprettes på standardfaktorer uten å bruke CSS ID -effekten er understreket. Men den andre er en kobling uten understrek fordi vi har fjernet alle effektene gjennom tekstdekorasjonsegenskapen.

Eksempel 2: Hover eiendom:

I dette eksemplet brukes en hoveregenskap for å fjerne effekten av understreket tekst. Hover er tilnærmingen til å navigere i musen mot en lenke. Igjen legges tekst-dekorasjonsegenskapen til koden, men denne gangen med bruk av svevetffekten.

I kroppsdelen av koden er kroppen igjen på linje med sentrum ved å bruke Inline CSS. Overskriften brukes og deretter brukes en ankerkode.

1
< a href = "#"> Hei jeg er en lenke

Nå vil vi bruke den interne CSS -beskrivelsen av lenken. Denne gangen har vi brukt effekter direkte på lenken i stedet for å bruke CSS ID. Ved å bruke ankeret 'A', brukes en koblingseffekt og sveveteffekten. For 'A' som en lenke, brukes tekstdekorasjonen med understreken verdien.

1
2
3
4
5
en kobling
Tekstdekorasjon: Understrek;

Mens vi for Hover -eiendommen vil bruke verdien av tekstdekorasjon som 'ingen'. Ved å gjøre dette, når musen blir navigert mot lenken, blir den understrekede eiendommen fjernet.

1
2
3
4
5
A: Hør
Tekstdekorasjon: Ingen;

Ved å bruke begge effektene, vil siden på belastningen ha understreken lenken. Men når du svever det understreket, vil effekten bli fjernet.

Videospillerhttps: // linuxhint.com/wp-content/uploads/2022/07/css-no-underline-open-me.MP400: 0000: 0000: 08 Bruk opp/ned piltastene for å øke eller redusere volumet.

Utgangen fra konseptet med å fjerne understrekningen vises i videoen. Vi har lagt til en liten seksjon, der lenken opprettes med understrekede effekter. Når musen blir navigert mot lenken, eller når vi svever på lenken, fjernes understreken av lenken. Igjen vises lenken når musen har navigert bort.

I stedet for lenker som har standard understreket tekst, kan vi også understreke hvilken som helst tekst via understreket HTML -taggen .

Konklusjon:

Artikkelen "CSS No Underline" er en komplett guide for å forklare tilnærmingen som brukes for å fjerne understreketeffekten fra teksten som allerede har understreket egenskap, det vil si HTML -lenken. Vi har startet med en kort introduksjon til HTML -lenker. To CSS -tilnærminger brukes til å forklare konseptet med å fjerne effekten. Den første er direkte bruk av tekstdekorasjonsegenskaper. Mens den andre metodikken inkluderer bruk av en hoveregenskap som indirekte er knyttet til dekorasjonsegenskapen for å vise eller vise understreket effekt på lenken. Begge disse konseptene blir forklart gjennom eksemplene for å utvise CSS som brukes til å understreke egenskaper.