Hoe CSS te gebruiken om hyperlinks op webpagina's te stijlen

Mei 17, 2024

Als u bekend bent met HTML, weet u dat u de kleur van de tekst en hyperlinks op een webpagina kunt beheren. Maar met Cascading Style Sheets kunt u veel meer doen. Bepaalde tags zoals de hyperlink-ankertag hebben zogenaamde pseudoklassen die zijn gekoppeld aan de verschillende statussen van de tag. De hyperlink-tag heeft bijvoorbeeld vier toestanden; koppelen, bezocht, zweven en actief.

Wanneer een link niet wordt gebruikt (niet geselecteerd), is dat de koppeling pseudoklasse of staat. De bezocht staat is nadat de link is gebruikt. De zweven staat wanneer de muis over de link gaat en de actief staat is wanneer u op de link klikt. De magie van CSS is dat elke status van de link onafhankelijk wordt bestuurd via pseudo-klassen. U kunt dus verschillende eigenschappen instellen voor elke status. U kunt elke eigenschap gebruiken die is gekoppeld aan de hyperlink-ankertag in CSS.

In het onderstaande voorbeeld stellen we de koppelingsstatus in op rood, de bezochte status op paars (# 400040), de muisaanwijzer en de actieve statussen op rood, onderstreept en cursief.

Notitie--De pijl

geeft aan dat de code op een tweede regel is ingepakt en eigenlijk allemaal op één regel moet staan.

Zoals u kunt zien, hebben we de eigenschap color ingesteld op rood voor alle staten behalve de bezochte staat, die we op paars hebben ingesteld. Omdat we alleen willen dat de hyperlink wordt onderstreept voor de zweeftoestand en actieve statussen, hebben we de eigenschap text-decoration ingesteld op geen voor de andere twee statussen. Ten slotte hebben we de lettertypestijl ingesteld op cursief voor de zweeftoestand en actieve statussen, waardoor de tekst cursief wordt wanneer u eroverheen gaat of op de link klikt, en we hebben de tekstdecoratie teruggezet om te onderstrepen. Dit is slechts een eenvoudig voorbeeld. Je kunt je stijlen zo eenvoudig of zo luxe maken als je wilt. Er zijn echter een paar dingen om te onthouden.

Webbrowsers verschillen in de manier waarop ze hiermee omgaan. Als u een eigenschap instelt op een bepaalde waarde, wordt deze meestal overgenomen door (doorgegeven aan) de staten die erna worden vermeld. In ons voorbeeld hierboven was de eerste status in onze code de linkstatus en hebben we de eigenschap color ingesteld op rood. Meestal zou dit worden doorgegeven aan de andere drie staten tenzij we het veranderen met code, zoals we deden voor de bezochte staat. Als we de tekstdecoratie niet opnieuw hadden ingesteld om te onderstrepen, zou de tekst voor de zweeftoestand en actieve statussen niet zijn onderstreept omdat we deze in de eerste status hadden uitgeschakeld. Maar u kunt niet op alle browsers rekenen om dit te doen. Daarom is het het beste om alle eigenschappen voor elke status afzonderlijk in te stellen.

Wanneer u mooie koppelingen ontwerpt, breng dan geen grote veranderingen tussen staten aan, zoals het dramatisch vergroten van de tekstgrootte. Hierdoor zal de webbrowser de pagina opnieuw laden en zullen uw bezoekers erg overstuur met u zijn.

De volgorde waarin u de code voor deze pseudoklassen vermeldt, wordt beïnvloed door de cascade-volgorde. We zullen de cascade-volgorde in een latere tutorial bespreken. Onthoud voor nu gewoon dat om conflicten te voorkomen, de staten coderen in de volgorde die we hierboven hebben gebruikt; koppelen, bezocht, zweven en actief.

Video-Instructies: Pagina's Koppelen (Hyperlinks) - HTML (Mei 2024).

Hoe CSS te gebruiken om hyperlinks op webpagina's, HTML, pseudoklassen die zijn gekoppeld aan de verschillende statussen van de tag, pseudoklasse, hyperlink, coderende hyperlinks in CSS, CSS pseudoklasse, CSS-staten, status van een tag, fancy links op een webpagina met CSS, mooie links

Vorige Artikel

Volgende Artikel

Verwante Artikelen

computers

Bescherm uzelf tegen phishing

Mei 2024

Phishing is de illegale handeling van een onbekende entiteit die zich voordoet als een bedrijf, zoals een bank of creditcardmaatschappij, om persoonlijke informatie te verzamelen. De informatie die...

computers

Een eerste JavaScript-programma

Mei 2024

Er is een programmeertraditie dat wanneer je een nieuwe programmeertaal leert, het eerste programma dat je schrijft een programma is dat de zin ‘Hallo wereld’ weergeeft. Dit wordt meestal een "Hallo...