Dekorative understreke CSS-elementer
Teknologien til stilark utfører to funksjonerved registrering av HTML-sider. For det første, med sin hjelp, blir posisjonen til de enkelte elementene på nettstedet dannet. For det andre gjør blokkene visuelt attraktive for brukeren. Den andre funksjonen er implementert på forskjellige måter. En av dem understreker. CSS sørger for dette attributtet tekst-dekorasjon.
Spesifikasjon av attributtregisteret
Dra nytte av eiendommen tekst-dekorasjon enkel. Det er nok å skrive følgende linje for elementet i koden til stilfilen:
tekst-dekorasjon: attribute_value;
I stedet for "znachenie_atributa"CSS-spesifikasjonen tilbyr en rekke alternativer:
- understreke - linjen ligger strengt under teksten
- overlinje - linjen går fra toppen av teksten
- none - fjerning av alle dekorative effekter
- arve - vedtar verdien av foreldreelementet.
Ovennevnte er ikke alle mulige former for posten, siden dette attributtet spesifiserer ikke bare CSS understreket, men også andre effekter, for eksempel "blinker" teksten eller dens interlacing.
Eksempler på hyperlink design
Nybegynnere i webdesign og programmeringspørsmålet oppstår: hvorfor gjør bunnlinjen i teksten? Ved begynnelsen av internetteknologi-æraen viste denne måten å markere på at brukeren har en hyperkobling foran den - en tekst som vil bli klikket på en ny side.
Som standard har hyperkoblinger et egenskapssett understreke. I praksis oppstår problemet å fjerne linjen fra inaktive elementer og gjøre det synlig når brukeren svinger musepekeren. Her er et eksempelkode som deaktiverer CSS understreket:
en {tekst-dekorasjon: ingen;}
For aktive linker, bruk følgende oppføring:
a: svever {tekst-dekorasjon: understreke;}
Dekorativt understreke for avansert
Standardattributt tekst-dekorasjon har flere begrensninger:
- fargen på linjen er ikke forskjellig fra fargen på linkteksten, det er umulig å skille mellom "fargene";
- bare den faste linjen brukes som en underskrift. CSS innebærer ikke bruk av andre stilarter.
Men spesielle teknikker bidrar til å omgå den klassiske utformingen av teksten. I det første tilfellet brukes en ekstra tag <til å angi hyperkoblingen.span>.
For eksempel:
<a href="#" style="text-decoration: underline; color: red">
<span style = "color: blue"> hyperkoblinger</ span>
</a>. </p>
Som et resultat vil hyperkoblingsordet bli skrevet i blått på siden, og linjefargen vil bli rød.
En annen avansert måte å implementere CSS understreke på, - nedre kant. Eksempelet nedenfor forklarer bruken av dette:
en {border-bottom: 1px solid rød;}
Resultatet vil være det samme som i eksemplet ovenfor. Men denne metoden har en viktig fordel. I tillegg til å endre fargen på linjen (nå satt til rød - rød), er omformingen av måten mulig:
- stiplede - gjør et poeng understreke;
- stiplede - linjen består av slag;
- dobbel - tegner en dobbel linje.
Så attributt listbunn mer funksjonell. I tillegg til å vise en dekorativ linje under teksten, lar den deg tilpasse utseendet.
