HTML & CSS for begyndere (del 31): Farver og baggrunde

Om farve-egenskaben beskriver forgrundsfarven (tekstfarven) af elementer. Farveangivelserne kan ske på mange forskellige måder. Typisk bruger man hexadecimale værdier. Disse værdier begynder altid med et foranstillet hegnstegn. Derefter følger sædvanligvis tre tal- og/eller bogstavpar. Disse står for rød, grøn og blå. Farveangivelser sker altid efter følgende skema:

RRGGBB

Angivelsen #ffffff resulterer i en hvid farve. Hvis man derimod bruger #000000, vises sort som farve. I "fornuftige" HTML-redaktører findes der tilsvarende farvevælgere.

I kan finde de hexadecimale koder. Derudover findes der på adskillige hjemmesider (f.eks. http://www.farbtabelle.net/) oversigter over farver.

I CSS er der mulighed for at forkorte skrivemåden af hexadecimalfarveværdier. Dette princip kan dog ikke anvendes på alle farveværdier. Det virker faktisk kun, når en værdi består af tre ens par. Typiske eksempler på dette er farvedefinitionerne for sort og hvid. Normalt skrives disse således:

.sort {
   color: #000000;
}
.hvid {
   color: #ffffff;
}

Denne syntaks kan også forkortes.

.sort {
   color: #000;
}
.hvid {
   color: #fff;
}

I CSS er RGB-værdier også tilladt. Her angiver man decimalværdier fra 0 til 255, adskilt af kommaer. Rækkefølgen af farveangivelserne er den samme som for hexadecimale farver.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}

Som eksemplet viser, er der også mulighed for procentvise angivelser, hvilket dog sjældent anvendes i praksis.

En anden mulighed for farveangivelser er farvenøgleord. Her er nogle eksempler:

• sort

• rød

• blå

• gul

• hvid

• grøn

En tilsvarende definition kunne se sådan ud:

p { 
 color: hvid; 
 background: sort; 
}

Bemærk, at med CSS3 er paletten af tilgængelige farvenøgleord blevet betydeligt udvidet. CSS3 har overtaget farvenavne fra SVG-specifikationen. En oversigt over de tilgængelige farvenavne kan findes på http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Definér baggrund

Ved baggrund drejer det sig om en opsummering af de følgende mulige værdier, som vil blive udførligt præsenteret senere i denne vejledning:

• baggrundstilbehør

• baggrundsfarve

• baggrundsbillede

• baggrundspostion

• baggrundsgentagelse

De enkelte angivelser skal adskilles af mellemrum. Rækkefølgen, hvori det sker, er ligegyldigt. Ikke alle værdier skal angives.

Et eksempel:

p { 
    baggrund: transparent
    url(logo.jpg)
    rul gentag 0% 0%; 
 }

Baggrundsfarver

For at tildele et element en baggrundsfarve bruges egenskaben baggrundsfarve.

div { 
   baggrundsfarve: #009999;
}

Man angiver den ønskede farve som værdi.

Baggrundsbilleder

baggrundsbillede bestemmer et billede som baggrund. Hvis denne egenskab skrives i en ekstern CSS-fil, refererer de relative stiadangivelser til mappen, hvor CSS-filen ligger.

• ingen – intet baggrundsbillede

• URI – sti til billedet

Her er et eksempel.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Velkommen til PSD-Tutorials.de!
</div>

Vær dog omhyggelig med baggrundsbilleder. For meget iøjnefaldende baggrundsbilleder gør det ikke ligefrem nemt at læse teksterne.





Naturligvis er der helt sikkert hjemmesider, hvor det udelukkende handler om udseendet. Her kan man sikkert arbejde med mere iøjnefaldende baggrunde.

Rullende baggrunde

På længere elementer bevæger baggrundsbilledet sig, når siden rulles. Med baggrundstilbehør kan dette forhindres.

• fikseret – ruller med

• rulles – baggrundsbilledet står stille og er justeret til browser-vinduet (viewport).

Egenskaben baggrundstilbehør bruges normalt i kombination med baggrundsbillede.

Et eksempel:

div.fest {
    background-image: url(background.gif); 
    background-repeat: no-repeat;
 }

Baggrundens position

Ved hjælp af egenskaben background-repeat angives, hvor baggrunden skal starte. Referencen er elementet, hvor grafikken er defineret.

• Procentangivelse - én eller to værdier, der bestemmer afstanden mellem grafikken og elementets øverste venstre hjørne. Hvis der er to værdier, står den første for den horisontale og den anden for den vertikale afstand. Referencen er ikke grafikkens øverste venstre hjørne, men et punkt inden i grafikken, der også angives med x/y-værdier.

• Længdeangivelse - bestemmer afstanden mellem grafikkens øverste venstre hjørne og elementets øverste venstre hjørne. Tilladte er én eller to værdier. Hvis der angives to værdier, bestemmer den første den horisontale afstand, den anden den vertikale afstand.

Derudover er følgende nøgleord også mulige:

• left - vandret venstrestillet

• center - centreret

• right - vandret højrestillet

• top - lodret øverstillet

• bottom - lodret nederstillet

Her er et eksempel på, hvordan det kan se ud:

p { 
   background-position: 8em top; 
}

Gentagende baggrundsbilleder

Om og hvordan et baggrundsbillede gentages, hvis det er mindre end det viste område, kan bestemmes med background-repeat.

• repeat - baggrundsbilledet gentages vandret og lodret for at fylde elementet.

• repeat-x - grafikken gentages kun vandret.

• repeat-y - grafikken gentages kun lodret.

• no-repeat - grafikken gentages ikke.

Her er også et eksempel:

body { 
   background-repeat: repeat-y; 
}

I dette tilfælde gentages grafikken kun lodret.

Hvis man derimod anvender repeat-y, gentages det kun vandret.





Dette tutorial har vist, hvor kraftfuld CSS også er inden for farver og billeder.