Stilarkteknologi har to funktionernår du designer HTML-sider. For det første dannes positionen for de enkelte elementer på stedet med dens hjælp. For det andet gør det blokke tiltalende for brugeren. Den anden funktion implementeres på forskellige måder. En af dem er understregning. CSS leverer en attribut til dette. tekst-dekoration.
Specifikation af attributpost
Udnyt ejendommen tekst-dekoration ganske enkelt. Det er tilstrækkeligt at skrive følgende linje for elementet i koden på typografien:
tekst-dekoration: attribute_value;
I stedet for "ATTRIBUTE_VALUECSS-specifikationen tilbyder en række muligheder:
- understrege - linjen er strengt placeret under teksten;
- overlinie - linjen løber over teksten;
- ingen - fjernelse af alle dekorative effekter;
- arve - overtager værdien af overordnede element.
Ikke alle mulige former for skrivning er beskrevet ovenfor, da denne attribut definerer ikke kun CSS-understregning, men også andre effekter, for eksempel "blinking" af en tekst eller dens gennemgående.
Eksempler på hyperlinkdesign
Begyndere inden for webdesign og programmeringspørgsmålet opstår: hvorfor gøre bundlinjen i teksten? I morgenen med internetteknologiens æra indikerede denne fremhævningsmetode for brugeren, at der er et hyperlink foran ham - en tekst, der, når der klikkes, skifter til en ny side.
Som standard har hyperlinks egenskaben understrege. I praksis opstår opgaven med at fjerne linjen fra inaktive elementer og gøre den synlig, når brugeren svæver musemarkøren. Her er et eksempel på kode, der deaktiverer understregning af CSS-link:
en {tekstdekoration: ingen;}
For aktive links bruges følgende post:
a: hover {tekstdekoration: understregning;}
Dekorativ understregning til avanceret
Standardattribut tekst-dekoration har flere begrænsninger:
- linjens farve adskiller sig ikke fra farven på linketeksten; du kan ikke skelne mellem deres "farvelægning";
- kun en solid linje bruges som en understregning. CSS indebærer ikke brugen af andre tegningstyper.
Men specielle teknikker hjælper med at omgå det klassiske design af teksten. I det første tilfælde et ekstra tag <span>.
For eksempel:
hyperlinks
a>. n>
Som et resultat skrives hyperlinkordet med blåt på siden, og linjefarven er rød.
En anden avanceret måde at implementere CSS-understregning er - border-bottom. Eksemplet nedenfor forklarer brugen:
a {kantbund: 1px massiv rød;}
Resultatet vil være det samme som i eksemplet tidligere. Men denne metode har en vigtig fordel. Ud over at ændre linjens farve (rød er nu indstillet til - rød), er en transformation af den måde, den tegnes på, mulig:
- prikket - gør et punkt understreget;
- stiplet - linjen består af slagtilfælde;
- dobbelt - tegner en dobbelt linje.
Så attribut grænse-bund mere funktionel. Ud over at vise en dekorativ linje under teksten, gør det det muligt at tilpasse dets udseende.
