HTML & CSS för nybörjare (Del 31): Färger och bakgrunder

Genom color-egenskapen beskrivs förgunds färg (textfärgen) av element. Färgerna kan anges på olika sätt. Klassiskt används hexadecimala värden. Dessa värden börjar alltid med ett förtecknat #-tecken. Därefter följer vanligtvis tre siffer- och/eller bokstabpar. Dessa representerar rött, grönt och blått. Färganvisningar görs alltid enligt följande schema:

RRGGBB

Anvisningen #ffffff resulterar i en vit färg. Om man istället använder #000000 visas svart som färg. I "förnuftiga" HTML-redigerare finns det lämpliga färgväljare.

Genom kan ni bestämma de hexadecimala koderna. Dessutom finns det på många webbplatser (t.ex. http://www.farbtabelle.net/) översikter över färger.

I CSS finns möjligheten att förkorta skrivsättet för hexadecimala färgvärden. Denna princip kan dock inte tillämpas på alla färgvärden. Det fungerar faktiskt bara när ett värde består av tre likadana par. Typiska exempel på detta är färgdefinitionerna för svart och vitt. Vanligtvis skrivs dessa så här:

.svart {
   color: #000000;
}
.vit {
   color: #ffffff;
}

Denna syntax kan också förkortas.

.svart {
   color: #000;
}
.vit {
   color: #fff;
}

I CSS är även RGB-värden tillåtna. Här anges decimalvärden från 0 till 255, som ska separeras med kommatecken. Färgans ordning motsvarar då hexadecimala färger.

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

Som exemplet visar är även procentuella angivelser möjliga, vilket dock praktiskt taget är sällan förekommande. En annan variant för färbanvisningar är att använda färgnyckelord. Här är några exempel:

• black

• red

• blue

• yellow

• white

• green

En motsvarande definition skulle se ut så här:

p { 
 color: white; 
 background: black; 
}

Obs! Med CSS3 har paletten av tillgängliga färgnyckelord utökats betydligt. CSS3 har då övertagit färgnamnen från SVG-specifikationen. En översikt över tillgängliga färgnamn hittar ni på http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Definiera bakgrund

Vid background handlar det om en sammanfattning av följande möjliga värden, som senare i denna handledning kommer att presenteras utförligt:

• bakgrundsbilaga

• background-color

• bakgrundsbild

• bakgrundsläge

• bakgrundsupprepning

De enskilda anvisningarna ska skrivas med mellanslag mellan sig. I vilken ordning detta görs är irrelevant. Inte alla värden måste anges.

Ett exempel:

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

Bakgrundsfärger

För att tilldela ett element en bakgrundsfärg används egenskapen background-color.

div { 
   bakgrundsfärg: #009999;
}

Som värde anges önskad färg.

Bakgrundsbilder

background-image bestämmer en bild som bakgrund. Om denna egenskap skrivs i en extern CSS-fil, hänvisar de relativa sökvägarna till mappen där CSS-filen ligger.

• none – ingen bakgrundsbild

• URI – sökväg till bilden

Ett exempel även här.

<div style="bakgrundsbild:url(hinten.jpg); marginal:20px; fyllning:20px">
    Välkommen till PSD-Tutorials.de!
</div>

Men var försiktig när du använder bakgrundsbilder. För påfallande bakgrundsbilder underlättar verkligen inte läsbarheten av texter.





Självklart finns det webbplatser där endast utseendet är viktigt. Här kan man säkert arbeta med mer iögonfallande bakgrunder.

Scrollande bakgrunder

För längre element förflyttar sig bakgrundsbilden när sidan rullas. Med background-attachment kan detta förhindras.

• fixerad – följer med vid rullning

• rulla – bakgrundsbilden förblir stilla och riktas mot webbläsarfönstret (vyporten).

Egenskapen background-attachment används vanligtvis i kombination med background-image.

Ett exempel:

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

Bakgrundens position

Genom egenskapen background-repeat bestäms vid vilken position bakgrunden ska börja. Referenspunkten är elementet för vilket grafiken är definierad.

• Procentangivelse - en eller två värden som bestämmer avståndet mellan grafiken och den övre vänstra hörnet av elementet. Vid två värden är den första för horisontellt avstånd och den andra för vertikalt avstånd. Referenspunkten är inte grafikens övre vänstra hörn, utan en punkt inuti grafiken, som också anges med x/y-värden.

• Längdangivelse - bestämmer avståndet mellan grafikens övre vänstra hörn och elementets övre vänstra hörn. Tillåtna är en eller två värden. Om två värden anges bestämmer den första det horisontella avståndet, den andra det vertikala avståndet.

Dessutom är följande nyckelord möjliga:

• left - horisontellt vänsterjusterad

• center - centrerad

• right - horisontellt högerjusterad

• top - vertikalt toppjusterad

• bottom - vertikalt bottenjusterad

Här är ett exempel på hur något sådant kan se ut:

p { 
   background-position: 8em top; 
}

Återkommande bakgrundsbilder

Om och hur en bakgrundsbild upprepas när den är mindre än det visade området kan bestämmas med background-repeat.

• repeat - bakgrundsbilden upprepas vertikalt och horisontellt för att fylla elementet.

• repeat-x - bilden upprepas endast horisontellt.

• repeat-y - bilden upprepas endast vertikalt.

• no-repeat - bilden upprepas inte.

Ett exempel på detta:

body { 
   background-repeat: repeat-y; 
}

I detta fall upprepas bilden endast vertikalt.

Om man däremot använder repeat-y, upprepas bilden endast horisontellt.





Denna handledning har visat hur kraftfullt CSS är även när det gäller färger och bilder.