HTML & CSS for nybegynnere (Del 31): Farger og bakgrunner

Om color-egenskapen beskrives forgrunnsfargen (tekstfargen) til elementer. Fargene kan spesifiseres på mange forskjellige måter. Vanligvis bruker man heksadesimale verdier. Disse verdiene begynner alltid med en hashtag. Deretter følger vanligvis tre tallpar og/eller bokstavpar. Disse representerer rød, grønn og blå. Fargeangivelser foregår alltid etter følgende skjema:

RRGGBB

Angivelsen #ffffff fører til en hvit farge. Hvis man derimot bruker #000000, vises svart som farge. I «fornuftige» HTML-redaktører finnes det tilsvarende fargevelgere.

Dere kan finne de heksadesimale kodene. I tillegg finnes det mange nettsider (f.eks. http://www.farbtabelle.net/) med oversikter over farger.

I CSS har man muligheten til å forkorte formen på heksadesimale fargeverdier. Dette prinsippet fungerer imidlertid ikke for alle fargeverdier. Dette fungerer faktisk bare når en verdi består av tre like par. Typiske eksempler på dette er fargedefinisjonene for svart og hvitt. Vanligvis skriver man disse slik:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Denne syntaksen kan også forkortes.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

I CSS er også RGB-verdier tillatt. Her oppgis desimalverdier fra 0 til 255, som skal separeres med komma. Rekkefølgen på fargeangivelsene stemmer overens med den for heksadesimale farger.

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

Som eksempelet viser, er også prosentangivelser mulige, men det er sjeldent å finne det i praksis.

En annen variant for fargedefinisjoner er fargesluttnøkkelord. Her er noen eksempler:

• black

• red

• blue

• yellow

• white

• green

En tilsvarende definisjon kunne se slik ut:

p { 
 color: white; 
 background: black; 
}

Merk at med CSS3 ble utvalget av tilgjengelige fargesluttnøkkelord betydelig utvidet. CSS3 har adoptert fargenavnene fra SVG-spesifikasjonen. En oversikt over tilgjengelige fargenavn finner du på http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Definere Bakgrunn

På background er en oppsummering av de følgende mulige verdiene, som vil bli grundig presentert senere i denne opplæringen:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

De enkelte angivelsene skal skilles med mellomrom. Rekkefølgen betyr ingenting. Det er ikke nødvendig å angi alle verdiene.

Et eksempel:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Bakgrunnsfarger

For å tilordne en bakgrunnsfarge til et element, brukes egenskapen background-color.

div { 
   background-color: #009999;
}

Den ønskede fargen oppgis som verdi.

Bakgrunnsbilder

background-image bestemmer en grafikk som bakgrunn. Hvis denne egenskapen er notert i en ekstern CSS-fil, refererer de relative stioppføringene til mappen hvor CSS-filen ligger.

• none – ingen bakgrunnsgrafikk

• URI – sti til grafikk

Her er et eksempel.

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

Men vær forsiktig med bruk av bakgrunnsbilder. For slående bakgrunnsbilder gjør det ikke akkurat enklere å lese teksten.





Selvfølgelig finnes det nettsteder der det bare handler om utseendet. Her kan man absolutt bruke mer slående bakgrunner.

Scrollbare Bakgrunner

På lengre elementer beveger bakgrunnsbildet seg mens du skroller på siden. Med background-attachment kan dette forhindres.

• fixed – ruller med

• scroll – bakgrunnsgrafikken forblir stille og justeres i nettleservinduet (visningsport).

Egenskapen background-attachment brukes vanligvis i kombinasjon med background-image.

Et eksempel:

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

Bakgrunnens posisjon

Med background-repeat-egenskapen bestemmer du hvor bakgrunnen skal begynne. Referansepunktet er elementet som grafikken er definert for.

• Prosentandel - én eller to verdier som bestemmer avstanden til grafikken fra øvre venstre hjørne av elementet. Ved to verdier står den første for horisontal avstand og den andre for vertikal avstand. Referansepunktet er ikke det øvre venstre hjørnet av grafikken, men et punkt innenfor grafikken som også angis ved x/y-verdier.

• Lengdeangivelse - bestemmer avstanden fra grafikkens øvre venstre hjørne til elementets øvre venstre hjørne. Tillatt er én eller to verdier. Hvis to verdier er angitt, bestemmer den første den horisontale avstanden og den andre den vertikale avstanden.

I tillegg er følgende nøkkelord mulige:

• left - horisontalt til venstre

• center - sentrert

• right - horisontalt til høyre

• top - vertikalt øverst

• bottom - vertikalt nederst

Her er et eksempel på hvordan det kan se ut:

p { 
   background-position: 8em top; 
}

Gjentakende bakgrunnsbilder

Om og hvordan en bakgrunnsgrafikk gjentas hvis den er mindre enn det viste området, kan bestemmes med background-repeat.

• repeat - bakgrunnsbildet gjentas vertikalt og horisontalt for å fylle elementet.

• repeat-x – grafikken gjentas kun horisontalt.

• repeat-y - grafikken gjentas kun vertikalt.

• no-repeat – grafikken gjentas ikke.

Også her et eksempel:

body { 
   background-repeat: repeat-y; 
}

I dette tilfellet gjentas grafikken kun vertikalt.

Hvis du derimot bruker repeat-y, blir gjentagelsen kun horisontal.





Denne opplæringen har vist hvor kraftig CSS også er på området farger og bilder.