Sinds de uitvinding van de hypertext-opmaaktaal, HTML, zijn de concepten van lay-out en lay-out van webdocumenten drastisch veranderd. Met de bijna volledige ondersteuning van populaire browsers voor de CSS en CSS2 cascading stylesheet-standaarden, is het mogelijk geworden om bijna elk aspect van de visuele presentatie van een document te beïnvloeden. U kunt bijvoorbeeld de achtergrond van een link gekleurd, gevuld met een afbeelding en ook wijzigen afhankelijk van de acties van de gebruiker.
Noodzakelijk
- - de mogelijkheid om de tekst van het document of de tekst van de document style sheets te bewerken;
- - een teksteditor waarmee u het document in de originele codering kunt opslaan.
instructies:
Stap 1
Maak de achtergrond van de link uniform gevuld met een willekeurige kleur door inline stijlinformatie toe te voegen aan het A-element. Voeg stijl toe aan de attributen van het A-element dat overeenkomt met de link waarvan u de achtergrond wilt wijzigen. Plaats in de inhoud van het stijlkenmerk de CSS-eigenschap background-color met de gegeven waarde, dit is de juiste identifier voor de achtergrondkleur. Het kan er bijvoorbeeld zo uitzien:
verbind tekst
Stap 2
Definieer de achtergrond van de link in een externe of ingesloten stylesheet in uw document. Voeg in de juiste stylesheet een set regels toe die zijn geadresseerd door een selector met een acceptabel niveau van specificiteit. Voer in de regelset de eigenschap background-color in op dezelfde manier als in de vorige stap. Selecteer de specificiteit van de selector op basis van de CSS2-cascaderegels en het gewenste bereik. Dus als u de kleur van slechts één link moet instellen, is het logisch om een ID-selector te gebruiken. Als er meerdere van dergelijke links zijn, is het beter om een attribuutselector te gebruiken op basis van de klassewaarde.
Als u bijvoorbeeld een groene achtergrond wilt instellen voor een specifieke link in een document, kunt u een set regels aan het stijlblad toevoegen:
Een # ID_GREEN
{
achtergrondkleur: # 00FF00;
}
U moet ook het ID-attribuut van het A-element dat overeenkomt met de gewenste link instellen op ID_GREEN:
verbind tekst
Stap 3
Vul de achtergrond van de link met een afbeelding. Volg de methoden die zijn beschreven in stap één en twee, maar gebruik in plaats van de CSS-eigenschap achtergrondkleur background-image. Bijvoorbeeld:
verbind tekst
Voeg indien nodig een background-repeat-eigenschap toe aan de CSS-regels die zijn ingesteld om opties te definiëren voor het horizontaal en verticaal dupliceren van de achtergrondafbeelding.
Stap 4
Laat de achtergrond van de link veranderen wanneer u erover beweegt of wanneer de focus beweegt. Voeg regelsets toe aan een extern of ingesloten documentstijlblad die de achtergrond van een koppeling of koppelingsgroep in verschillende statussen definiëren. Gebruik ID- en attribuutkiezers in combinatie met de dynamische pseudo-klassen: hover,: active en: focus. Om bijvoorbeeld de achtergrond van een link met een ID-attribuutwaarde van ID_DYNAMIC_BACKGROUND rood te laten zijn in de inactieve staat en groen in de staat van onder de muiscursor, moeten de volgende regelsets aan het stijlblad worden toegevoegd:
Een # ID_DYNAMIC_BACKGROUND
{
achtergrondkleur: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: zweven
{
achtergrondkleur: # 00FF00;
}
U kunt hetzelfde doen om een achtergrond te maken met een dynamisch veranderende afbeelding.
