Top
Phpuniverset logo
 

INDHOLD

Forside

Job annoncer

Tips og Tricks

Konkurrence

Downloads

Dokumenter

PHP bog shop

Forum

Online udviklere


Propelcom

ARTIKLER

CSS

Diverse

E-handel / annoncer

Grafik

Html

Internet

Javascript

Linux

PHP/MySQL

Programmer

Flash

Søgemaskiner

Windows

C / C++


INFO

Information

Annoncering

Kontakt

Farver i CSS

Forside Kategori CSS Farver i CSS




 

 Artiklen går i dybten med alle de forskellige metoder der kan bruges til angivelse af 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å, da 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 den viste. 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 side bemæ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     #00FFFFblack    #000000blue     #0000FFfuchsia  #FF00FFgray     #808080green    #008000lime     #00FF00maroon   #800000navy     #000080olive    #808000orange   #FFA500purple   #800080red      #FF0000silver   #C0C0C0teal     #008080white    #FFFFFFyellow   #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


Kilder
http://www.w3.org/TR/CSS21/syndata.html#color-units

Skrevet af : hermandsen



Skrevet af: Phpuniverset | Dato : 2004-04-12 13:1 | Læst : 7319 gange | Print

Din kommentar og karakter til artiklen

Din karakter:

1

2

3

4

5

6

7

8

9

10

Kommentar:

Log ind for at give en karakter og kommentar.

Kommentarer og karakterer til artiklen

 

Send Artikel/anmeldelse til: phpuni@phpuniverset.dk

Tilbage til oversigt

FORUM

Nyeste forum indlæg :

PHP/Opencart import module

Opencart/php import modul hjælp

Lækkert kontor / kontorfællesskab i Helsingør

Opdatering af PHP

Vurdering af hjemmeside

Nyeste forum svar :

Vurdering af hjemmeside

Lækkert kontor / kontorfællesskab i Helsingør

Android programmering

Joomla som CMS

Grafik problemer

 

MEDLEM

LOGIN ER IKKE MULIGT, MENS VI LAVER NYT SITE
 

NYHEDSBREV

Nyhedsbrev

Tilmeld dig vores nyhedsbrev og modtag nyheder om nye scripts og tips samt om mange andre nye tiltag på Phpuniverset.dk


 

© Copyright 2000 Propelcom Phpuniverset's politik om personlige oplysninger, artikler & Koder Phpuniverset er optimeret til Mozilla 1024 * 768 Phpuniverset version: 3.0 beta
Webhost : Ignesco.dk - android talk & help

Bund