Sedan uppfinningen av hypertext markup language, HTML, har begreppen layout och layout för webbdokument förändrats dramatiskt. Med det nästan fullständiga stödet från populära webbläsare för CSS- och CSS2-kaskadformat för standardark har det blivit möjligt att påverka nästan alla aspekter av den visuella presentationen av ett dokument. Du kan till exempel göra bakgrunden till en länk färgad, fylld med en viss bild och även ändra beroende på användarens handlingar.
Nödvändig
- - förmågan att redigera dokumentet eller texten i dokumentstilsarken;
- - en textredigerare som låter dig spara dokumentet i den ursprungliga kodningen.
Instruktioner
Steg 1
Gör bakgrunden på länken enhetligt fylld med en slumpmässig färg genom att lägga till inbyggd stilinformation till elementet A. Lägg till stil till attributen för A-elementet som motsvarar länken vars bakgrund du vill ändra. I stilattributets innehåll placerar du CSS-egenskapen för bakgrundsfärg med det angivna värdet, vilket är rätt identifierare för bakgrundsfärgen. Det kan till exempel se ut så här:
länktext
Steg 2
Definiera länkens bakgrund i ett externt eller inbäddat formatmall i ditt dokument. Lägg till en uppsättning regler som adresseras av en väljare med en acceptabel nivå av specificitet i lämpligt formatmall. I regleruppsättningen anger du bakgrundsfärgsegenskapen på samma sätt som i föregående steg. Välj specificitet för väljaren baserat på CSS2-kaskadreglerna och önskat omfång. Så om du behöver ställa in färgen på bara en länk, är det vettigt att använda en ID-väljare. Om det finns flera sådana länkar är det bättre att använda en attributväljare baserat på klassvärdet.
För att till exempel ställa in en grön bakgrund för en specifik länk i ett dokument kan du lägga till en uppsättning regler i stilarket:
A # ID_GREEN
{
bakgrundsfärg: # 00FF00;
}
Du bör också ställa in ID-attributet för A-elementet som motsvarar önskad länk till ID_GREEN:
länktext
Steg 3
Fyll bakgrunden på länken med en bild. Följ metoderna som beskrivs i steg ett och två, men istället för CSS-egenskapen för bakgrundsfärg, använd bakgrundsbild. Till exempel:
länktext
Om det behövs lägger du till en bakgrundsupprepningsegenskap i CSS-reglerna som definierar alternativ för att duplicera bakgrundsbilden horisontellt och vertikalt.
Steg 4
Gör att bakgrunden för länken ändras när du svävar över den eller när fokus flyttas. Lägg till regeluppsättningar till ett externt eller inbäddat dokumentformat som definierar bakgrunden för en länk eller länkgrupp i olika tillstånd. Använd ID och attributväljare i kombination med de dynamiska pseudoklasserna: sväva,: aktiv och: fokus. Till exempel, för att bakgrunden till en länk med ID-attributvärdet ID_DYNAMIC_BACKGROUND ska vara röd i inaktivt tillstånd och grönt i tillståndet att vara under muspekaren, måste följande regler läggas till i stilarket:
A # ID_DYNAMIC_BACKGROUND
{
bakgrundsfärg: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: sväva
{
bakgrundsfärg: # 00FF00;
}
Du kan göra detsamma för att skapa en bakgrund med en dynamiskt föränderlig bild.
