HTML © Eva von Pepel
* [ HTML-referensbok ] * [ Referensböcker ] *
HTML tillåter dig att "färgsätta" dina dokument eller dess delar med både bak- och förgrundsfärg. Färgsättningen kan ske på två sätt: antingen med hjälp av stilistiska element (t ex FONT) och attribut (t ex COLOR) eller stilmallar. HTML 4.0 åtskiljer struktur från presentation och därmed enbart tillåter stilmallar.
Det finns bara två "färgelement" i HTML; nämligen FONT och BASEFONT och 6 "färgattribut": BGCOLOR, COLOR, TEXT, LINK, ALINK, VLINK.
Bakgrundsfärgen specificeras med hjälp av attributet BGCOLOR (står för background color) och kan tilldelas elementen:
BODY för att specificera en viss bakgrundsfärg som ska gälla hela dokumentet TABLE för att specificera tabellens bakgrundsfärgTR för tabellradTH för enskild tabellrubrikTD för enskild tabellcell
Attributets BGCOLOR värde är den önskade färgen. Färgerna specificeras genom att uppge deras RGB-värde (röd-grön-blå). Du kan även använda engelska namn på 16 av de mest populära färgerna som listas nedan.
RGB-värden skrivs i form av hexadecimal och består av 6 siffror. De två första representerar den röda färgen, de två i mitten den gröna och det två sista den blåa. Många grafikprogram visar detta värde när man pekar på färgen. Om det skulle visa sig att bildbehandlare enbart visar decimalvärdena måste du omvandla dessa till hexadecimal, dvs RGB. Här beskriver jag hur du gör. Det finns också en mängd olika små och praktiska applikationer där du kan blanda ihop dina egna färger och samtidigt avläsa deras RGB-värde. Ett sådant program på bara 14 kB och dessutom freeware heter Color Browser och kan hämtas på http://maximized.com/freeware/clrbrwsr/.
<BODY bgcolor="#FFFFFF">
<TABLE bgcolor="#FFFFFF">
<TR bgcolor="#FFFFFF">
<TH bgcolor="#FFFFFF">
<TD bgcolor="#FFFFFF">
FFFFFF står för vit. Observera att RGB-värdet följer en stege och att hela värdet måste citeras. Det spelar ingen roll om du skriver värdenas, attributens och elementens namn men versaler eller gemena. Vit tillhör en av de 16 vanligaste färgerna och kan även skrivas:
<BODY bgcolor=white>
Detta värde (white) behöver du inte citera men det skadar inte om du gör det.
Förgrundsfärgen, färgen i vilken text visas, specificeras med hjälp av attributen TEXT, LINK, VLINK, ALINK som tilldelas elementet BODY samt attributet COLOR som kan tilldeas elementen FONT och BASEFONT.
BODY - färgen gäller hela dokumentetBASEFONT - en basfärg som kan antingen gälla hela dokumentet eller dess delar men p.g.a. www-klienters dåliga HTML-implementation ärver inte tabellerna denna färgFONT med vilket färger specificerade med hjälp av BODY eller BASEFONT kan överskridas.
<BODY text="#000000">
Sätter dokumentets förgrundsfärg till svart. För att specificera färger på de olika länkarna (ej besökt, aktivt och besökt) skriver du t ex:
<BODY link="#0000FF" alink="#FF0000" vlink="#800000">
För att inte få dina färger överskridna av användarnas egna inställningar bör du alltid uppge de alla (eller inga). Om du till exempel uppger bara attributet background="white" och användaren ställer sin www-klient för att visa dokument med background="black" text="white" kommer ditt dokument visas på "din" vita bakgrund och med "användarens" vita bokstäver. Vit text på vit bakgrund syns ju inte. Samma sak gäller länkarna. Därför bör din "BODY-tagg" se ut så här:
<BODY bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#FF0000" vlink="#800000">
Med BASEFONT kan du specificera dokumentets eller dess delar bastextfärg genom att tilldela det attributet color men du även måste uppge fonternas storlek då size är elementets obligatoriska attribut. Storlekar varierar från 1 till 7 där 3 är standardvärdet. Färgen och storleken kommer att gälla fr.o.m. det ställe där BASEFONT befinner sig. Observera att texten i tabeller påverkas inte och att elementet saknar en sluttagg.
<BASEFONT size=3 color="#000000">
Med FONT kan du överskrida färger specificerade enligt ovan, t ex:
<P>text enligt BODY eller BASEFONT <FONT color="#0000FF ">blå text</FONT></P>
Du kan även överskrida färgen på obesökta länkar specificerade i BODY. Notera dock att inte alla www-klienter stödjer detta.
<A HREF="fil.html"><FONT color="#FFFF00">gul länk</FONT><A>
För att ändra textfärgen i tabeller måste du göra ändringen i varje tabellcell. Det är otillåtet att omfånga hela tabellen med "FONT-taggarna".
<TD><FONT color="#008000>grön text</FONT><TD>
FONT-elementet kan orsaka olika användar- och tillgänglighetsproblem, speciellt i tabeller. Om dessa kan du läsa i artikeln What's Wrong With FONT?
Färgsättningen enligt ovan får inte stöd i HTML 4.0 som åtskiljer struktur och presentation till förmån av stilmallar. Om du vill använda "färgelementen" eller "färgattributen" får du strukturera dina dokument enligt HTML 4.0 Transitional eller HTML 3.2. Dock det sistnämnda stödjer inte attributet color i BASEFONT. Stilmallen skapar du på följande sätt:
Stillmallar är mallar i vilka du specificerar hur de olika HTML-elementen ska presenteras och kan länkas med dokumentet(n) på ett antal olika sätt, t ex genom att bädda in den i dokumentet. Mallen gäller hela dokumentet och bäddas i mellan <STYLE> och </STYLE> någonstans i dokumentets huvud, dvs mellan <HEAD> och </HEAD>. Även här uppges färgerna i form av RGB-värden och de 16 vanligaste färgerna kan skrivas med deras engelska namn.
<HEAD>
<TITLE>Dokumentets titel</TITLE>
<STYLE type="text/css">
<!--
BODY {background: #FFFFFF; color: #000000}
-->
A:link {color: #0000FF; background: transparent}
A:active {color: #FF0000; background: transparent}
A:visited {color: #800000; background: transparent}
TD {color: red; background: black}
</STYLE>
</HEAD>
Observera att även här bak- och förgrundsfärg sätts tillsammans. De specificerade färgerna kommer att gälla alla länkar och varje förekomst av TD. Pga arvproblem i Netscapes implementation av stilmallar bör du tilldela stilen elementet TD och inte TABLE.
Genom att klassa de olika elementen kan varje enskild förekomst av A, TD eller vilket annat element som helst tilldelas specifik färg och/eller en mängd andra stilar, t ex varje förekomst av A eller P kan presenteras med en unik bakgrundsfärg som kan inte åstadkommas med vanligt HTML. Vad än du specificerar i dina stilmallar kan du överskrida det genom att tilldela något specifikt element en annan stil som du skriver in direkt i taggen. Till exempel för att visa en länk i en annan färg än den specificerade i mallen skriver du:
<A HREF="fil.html" STYLE="background: black; color: red">Denna länk visas på svart bakgrund och röda bokstäver</A>
Vill du använda samma mall i ett antal eller alla dina dokument skriv den inbäddade mallens innehåll, dvs det betonade innehållet mellan <!-- och --> i en separat fil, namnge den (t ex) stil.css och länka filen med dokumenten enligt följande:
<HEAD>
<TITLE>Dokumentets titel</TITLE>
<LINK REL=stylesheet TYPE="text/css" HREF="stil.css">
Tröttnar du på färgerna och vill ändra dem ändrar du då bara färgen i en enda fil istället för varje dokument. Enklare kan det knappast bli.
På http://vonpepel.com/ref/css/ kan du lära dig mer om stilmallar, bl.a. hur man klassar element.
Oberoende om du väljer färgerna med hjälp av stilmallar eller stilistiska element/attribut glöm inte att behålla kontrasten mellan dem så att alla kan läsa texten utan problem. Det sägs att 30% av den manliga befolkningen är färgblinda och har svårigheter att åtskilja visa färger.
| #000000 eller black | #C0C0C0 eller silver |
| #808080 eller gray | #FFFFFF eller white |
| #800000 eller maroon | #FF0000 eller red |
| #800080 eller purple | #FFFF00 eller yellow |
| #000080 eller navy | #00FF00 eller lime |
| #008080 eller teal | #808000 eller olive |
| #008000 eller green | #FF00FF eller fuchsia |
| #0000FF eller blue | #00FFFF eller aqua |