Hoe maak je een link met CSS-stijl

Hoe maak je een link met CSS-stijl


Webpagina hyperlinks hebben veel eigenschappen die u kunt stylen. U kunt de kleur, onderstrepen, achtergrond en vele andere aspecten van het uiterlijk met CSS veranderen. Hier zijn een paar tips om mee te beginnen.

instructies

Link stijlen voor al uw links

1 De CSS-selector voor hyperlinks is de A-selector. De juiste term is anker, geen link, maar A-elementen worden gewoonlijk koppelingen. Een elementen kunnen worden gericht met CSS pseudo klassekiezers, gebaseerd op de toestand van de koppeling. De meest voorkomende pseudo classes gebruiken deze CSS selectors:

een link
a: visited
a: hover
a: active

2 CSS-regels voor diverse koppeling staten bepalen font, text-decoration (al dan niet de link is onderstreept), kleur, background-color of background-image, weergave-eigenschappen zoals inline of blokkeren, grens, opvulling, marge en andere CSS-eigenschappen

3 Deze eenvoudige set van regels maakt eerst alle Een element vertoning in het vet. Het gaat dan door de individuele band staten om verschillende kleuren en text-decoration waarden voor elke staat.

een {

font-weight: bold;
}

een link {

color: #660066;
text-decoration: none;

}
a: visited {

color: #663366;
text-decoration: none;

}
a: hover {

color: #660066;
text-decoration: underline;

}
a: actief {

color: #660066;
text-decoration: none;

}

4 Regels zoals de voorbeelden in stap 3 van toepassing op alle links op een hele pagina. Eigenschappen zoals achtergrondkleur, grens en anderen kunnen alle regels worden toegevoegd zoals het voorbeeld in stap 3.

Koppelingsstijlen voor specifieke gebieden van een webpagina

5 De meeste webpagina's zijn vastgelegd in afdelingen of gebieden die kunnen worden geïdentificeerd met een id of klasse. Wanneer u koppelingen in een div of andere webpagina sectie geïdentificeerd met een id of klasse, kunt u afstammeling selectors om de banden met de regels die van toepassing zijn slechts in die sectie stijl te creëren.

6 Het beeld bij de opening van dit artikel toonde een voorbeeld van een pagina met links met behulp van verschillende stijlen op basis van afstammeling selectors. Stel dat de twee gebieden van de webpagina zijn gemaakt met divs met toegewezen id's. De inhoud div id gebruikt de 'inhoud' en de navigatiebalk div maakt gebruik van het id "navigatiebalk."

7 Gebruik het id (klassen) die verschillende onderdelen van een webpagina identificeren selectors die alleen in dat gedeelte van de pagina. Met behulp van de aannames in stap 2, regels voor deze selectors verschillende stijlen zou scheppen in twee gebieden van een pagina:

inhoud a: linkcontent a: visitedcontent a: hovercontent a: activenavbar a: linknavbar a: visitednavbar a: hovernavbar a: active

8 Stel dat uw pagina maakt gebruik van een klasse met de naam "blogpost" voor elk item. Je maakt links individueel stijl voor alleen die delen van de pagina, ook. Afstammeling selectors voor de links in alleen dat gedeelte van de pagina er als volgt uitzien:

.blogpost a: link toe
.blogpost a: visited
.blogpost a: hover
.blogpost a: active

Hints

  • Een minder vaak gebruikte pseudo-class selectors is: focus.
  • Om erachter te komen hoe je een link beeldscherm zoals een navigatiebalk maken, zie het artikel Hoe kan ik een lijst met CSS-stijl
  • Voor de beste resultaten, houd de regels in uw stylesheet in deze volgorde: LVHA, of een link, bezocht, zweven, actief.