|
Af Jesper Hermansen
Opdateret marts 2003
Send e-mail >>
Farver i CSS
Når du skal definere en farve til noget i CSS (f.eks. på tekst eller
en baggrund), så kan det gøres på mange måder. Lad os starte med den
helt elementære RGB-information.
RGB er en forkortelse for Red Green Blue, og hver farve kan ligge i
intervallet 0-255. På den måde kan vi ramme præcist den farve, vi har
brug for.
Eksempel i CSS
h1 { color: rgb(0, 0, 255) }
NOTE: Husk altid at angive background-color, når du angiver color og
omvendt. Det skal til for at overholde standarden inden for CSS!
Her har vi givet h1-tag'et farven blå. Fordi både rød og grøn er sat
til 0, og blå er sat til maksimum, bliver farven så blå, som det
overhovedet er muligt!
h1 { color: rgb(0, 0, 150) }
Dette giver en mørkere blå, fordi vi har dæmpet lidt for mængden af blå
i vores farve. Ønsker vi en lysere blå kunne vi f.eks. skrive:
h1 { color: rgb(100, 100, 255) }
Andre måder at skrive farve-information på
I CSS er det også muligt at angive farverne på andre måder end
som vist ovenfor. I stedet for mængden 0-255, kan vi angive farverne i procent:
h1 { color: rgb(100%, 39%, 75%) }
Skulle man finde på at angive værdier som ligger uden for mængden,
så sættes disse bare til den nærmest tilgængelige værdi.
Således bliver:
h1 { color: rgb(-90, 300, 60) }
til
h1 { color: rgb(0, 255, 60) }
Ligeledes med procent, så bliver:
h1 { color: rgb(140%, -10%, 0%) }
til
h1 { color: rgb(100%, 0%, 0%) }
Hexadecimaler
Hvis man er træt af at skrive rgb(bla, bla, bla) hver gang, så kan
det gøres kortere vha. hexadecimaler.
Læs mere om det hexadecimale
talsystem på:
http://da.wikipedia.org/wiki/Hexadecimale_talsystem
>>
Et hex-tal kan antage 16 værdier, fra 0-F
(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Bruger vi to hexadecimaler, kan
vi angive en værdi mellem 0 og 255, hvilket jo er præcist hvad vi
skal bruge! :-)
Se på tallet 0F. Ligesom 10-tal systemet læses laveste værdi fra
højre. Tallet vi har til at stå her bliver på den måde 15 (husk 0).
Skriver vi 4F står der pludselig 79. 4E giver på den måde 78, osv.
Jeg tror den er feset ind på lystavlen! ;-)
Når man skal angive en farve vha. hex i CSS, så starter man med
symbolet #. De efterfølgende tal aflæses derefter fra venstre mod
højre, #RRGGBB.
h1 { color: #FF0088 }
Giver således fuld rød, ingen grøn og lidt blå.
Skal man bruge præcise farver kan der også skrives:
h1 { color: #AF970C }
Men vent! Det kan gøres endnu kortere!
Tager vi det første eksempel med hexadecimaler, så kunne det
forkortes til:
h1 { color: #F08 }
Det udvider din browser nemlig til #FF0088. Ligeledes bliver #45A
til #4455AA.
Som en sidebemærkning skal det siges, at CSS er ligeglad med, om du
bruger små eller store bogstaver. Du kunne således godt skrive #ab5,
hvis du synes, det er pænere. Personligt foretrækker jeg det andet!
Konstanter
Det sidste, vi kommer til at gennemgå, er farve-konstanterne i CSS. Nu
hvor du har fundet ud af, hvordan hex-tal angives, kommer her en
oversigt over farve-konstanterne i CSS med hexadecimaler:
Navn Hex-tal
================
aqua #00FFFF
black #000000
blue
#0000FF
uchsia #FF00FF
gray #808080
green #008000
lime #00FF00
maroon
#800000
navy #000080
olive #808000
orange #FFA500
purple #800080
red #FF0000
silver #C0C0C0
teal #008080
white #FFFFFF
yellow #FFFF00
Ligeledes findes der nogle konstanter fra system-farverne som
afhænger af opsætningen af dit operativ system. Disse kan du læse
nærmere om på:
http://www.w3.org/TR/CSS21/ui.html#system-colors
>>
Kilde
http://www.w3.org/TR/CSS21/syndata.html#color-units
>>
@-begynder takker Jesper Hermansen,
som har skrevet denne
artikel.
stem her!
|
