Style sheet-technologie dient twee doelenbij het stylen van HTML-pagina's. Ten eerste wordt met zijn hulp de positie van individuele elementen van de site gevormd. Ten tweede maakt het de blokken visueel aantrekkelijk voor de gebruiker. De tweede functie wordt op verschillende manieren geïmplementeerd. Een daarvan is onderstrepen. CSS levert hiervoor een attribuut tekst-decoratie.
Kenmerkrecordspecificatie
Gebruik eigendom tekst-decoratie gewoon. Het is voldoende om de volgende regel voor het element in de stijlbestandscode te schrijven:
tekst-decoratie: attribute_value;
In plaats van "AttribuutwaardeDe CSS-specificatie biedt een aantal opties:
- onderstrepen - de regel bevindt zich strikt onder de tekst;
- bovenlijn - de regel loopt over de tekst;
- geen - verwijdering van alle decoratieve effecten;
- erven - neemt de waarde van het bovenliggende element over.
Hierboven staan niet alle mogelijke schrijfvormen, aangezien dit attribuut niet alleen CSS-onderstreping instelt, maar ook andere effecten, bijvoorbeeld tekst "knipperen" of doorhalen.
Voorbeelden van styling-hyperlinks
Voor beginners in webdesign en programmerende vraag rijst: waarom de onderste regel van de tekst maken? Aan het begin van het tijdperk van internettechnologieën gaf een dergelijke selectiemethode de gebruiker aan dat er een hyperlink voor hem stond - een tekst, door erop te klikken waarop een overgang naar een nieuwe pagina zou worden gemaakt.
Hyperlinks hebben standaard de eigenschap onderstrepen... In de praktijk ontstaat de taak om de lijn van inactieve elementen te verwijderen en zichtbaar te maken wanneer de gebruiker met de muisaanwijzer zweeft. Hier is een voorbeeldcode die het onderstrepen van CSS-koppelingen uitschakelt:
een {text-decoration: none;}
Het volgende item wordt gebruikt voor actieve links:
a: hover {text-decoration: underline;}
Decoratieve onderstreping voor gevorderden
Standaardkenmerk tekst-decoratie heeft verschillende beperkingen:
- de kleur van de lijn verschilt niet van de kleur van de linktekst, je kunt geen onderscheid maken tussen hun "kleur";
- alleen een ononderbroken lijn wordt als onderstreping gebruikt. CSS impliceert geen andere tekststijl.
Maar speciale trucs helpen het klassieke tekstontwerp te omzeilen. In het eerste geval een extra tag <span>.
Bijvoorbeeld:
<a href="#" style="text-decoration: underline; color: red">
<span style = "color: blue"> hyperlinks</span>
</een>. </p>
Als gevolg hiervan wordt het hyperlinkwoord in blauw op de pagina geschreven en wordt de lijnkleur rood.
Een andere geavanceerde manier om CSS-onderstreping te implementeren, - border-bottom... In het onderstaande voorbeeld wordt het gebruik ervan uitgelegd:
een {border-bottom: 1px effen rood;}
Het resultaat is hetzelfde als in het vorige voorbeeld. Maar deze methode heeft een belangrijk voordeel. Naast het veranderen van de lijnkleur (nu ingesteld op rood - rood), is het mogelijk om de manier waarop het wordt getekend te transformeren:
- gestippeld - maakt een stippellijn onderstreept;
- onderbroken - de lijn bestaat uit slagen;
- dubbele - tekent een dubbele lijn.
Dus het attribuut grens-bodem functioneler. Naast het weergeven van een decoratieve lijn onder de tekst, is het mogelijk om het uiterlijk aan te passen.
