Tekstformatering i HTML

Indlæs andet indhold på denne side:

Man er næppe kommet ret langt i sit arbejde med at lave en hjemmeside, før behovet for at kunne styre skriftstørrelser, fonte, afsnit og overskrifter melder sig. Det er netop emnet for denne side.

Sæt farve på teksten

Siden er opdateret 7. 12. 2011

De fleste folks browsere er indstillet til at vise tekst som sort, hvis ikke andet er defineret i de hjemtagne dokumenter.

Da det i midlertid ikke nødvendigvis er det, du ønsker skal være resultatet af dine anstrengelser, er det nødvendigt at kunne fastlægge tekstens farve i dine sider på forhånd.

Så er det kun de browsere, som er fast indstillet til at vise teksten i en bestemt farve, der ikke viser teksten i din valgte farve.

Der er to måder at foruddefinere tekstfarven i dine sider:

  1. Du kan definere al teksten enten i en .css-fil eller et stylesheet. Forskellen er, at en .css-fil kan genbruges til at styre teksten i adskillige dokumenter mens et stylesheet skal gentages i alle dokumenter, hvori det skal bruges.
  2. Du kan ved hver enkelt tekststykke fastlægge en bestemt farve.

Den første måde er at foretrække til den generelle tekstfarvedefinition, da det fylder betydeligt mindre.

Den anden måde bør kun anvendes i specielle tilfælde, der skal afvige fra normen i dine sider.

Ved anvendelse af enten .css-fil eller stylesheet kan der (i forbindelse med definition af teksttype og -størrelse) defineres en tekstfarve sådan - næstsidste linje:

body,h1,h2,h3,h4,h5,p,td,ul,ol{
font-family: arial, helvetica, ms sans serif, sans-serif;
font-size: 10pt;
color: black;
background: white
}

Du kan naturligvis frit bestemme dig for en anden farve, blot skal du være opmærksom på at tekstfarven giver en tilstrækkelig kontrast til sidens baggrundsfarve eller -billede.

På siden om CSS-styring af siderne har jeg forneden skrevet mere om tekstfarver og med det lille hjælpeprogram Color Helper kan du fastlægge farver efter eget ønske. På en side om websikre farver har jeg vist, hvilke farver, du kan være sikker på vil blive vist korrekt i alle browsere.

Skal du lave et mindre stykke tekst med en afvigende farve, skal denne tekstfarve defineres ved dette specielle tekststykke:

<p style="color:green;background:#fff">Denne tekst er grøn på hvid baggrund.</p>

Og dette er resultatet:

Denne tekst er grøn på hvid baggrund.

Farvedefinitionen kan naturligvis uden videre kombineres med definition af skrifttype og/eller -størrelse (beskrevet i foregående afsnit). Du skal blot huske at adskille definitionerne af font, størrelse, farve m.m. med semilolonner.


Inden vi helt forlader emnet farve på tekst, skal vi også lige kigge på fænomenet farve bag teksten.

Det kan undertiden være hensigtsmæssigt at give en mindre stump tekst i en større sammenhæng en afvigende baggrundsfarve for at fremhæve dette.

Dette gør du på denne måde:

<p style="background: #090; color: white">Denne tekst er hvid på grøn baggrund</p>

Og dette er resultatet:

Denne tekst er hvid på grøn baggrund

Indsættelse af &nbsp; før og efter teksten gør, at den farvede baggrund begynder lidt før teksten og slutter lidt efter.

Du husker naturligvis, at du altid skal definere både en tekstfarve og en baggrundsfarve, også selv om tekstfarven ikke skal ændres i forhold til sidens standard - men det kan ved visse baggrundsfarver være en fordel at have en anden tekstfarve end den sorte standard, især hvis baggrundsfarven er lidt mørk.

De farver, du vil vælge til såvel tekst som baggrund, kan defineres på tre forskellige måder, for nogle få farvers vedkommende - resten kan så kun defineres på to forskellige måder

  1. Farverne kan defineres ved deres hexadecimale farveværdi (hex-kode) med et foranstillet # eks. #4080ff.
  2. Farverne kan defineres ved deres rgb-værdi med tallene fra 0 til 255 - indsat i en parentes og adskilt med et komma
    eks. rgb(64,128,255)
  3. Farverne kan defineres ved deres farvenavne - kun få farver mulige, se skemaet herunder.

Hvis den ønskede farves hexkode består af cifre, der to og to er ens, f.eks. #336699, kan koden kortes ned til kun tre cifre: #369. Men kun hvis ALLE tre farver defineres med to ens cifre.

21 navngivne farver med tilsvarende hex-værdier og rgb-værdier
black
#000000
rgb(0,0,0)
gray
#808080
rgb(128,128,128)
silver
#c0c0c0
rgb(192,192,192)
navy
#000080
rgb(0,0,128)
blue
#0000ff
rgb(0,0,255)
lightblue
#add8e6
rgb(173,216,230)
teal
#008080
rgb(0,128,128)
green
#008000
rgb(0,128,0)
lightgreen
#90ee90
rgb(144,238,144)
maroon
#800000
rgb(128,0,0)
red
#ff0000
rgb(255,0,0)
pink
#ffc0cb
rgb(255,192,203)
purple
#800080
rgb(128,0,128)
fuchsia
#ff00ff
rgb(255,0,255)
orange
#ffa500
rgb(255,165,0)
olive
#808000
rgb(128,128,0)
yellow
#ffff00
rgb(255,255,0)
lightyellow
#ffffe0
rgb(255,255,224)
lime
#00ff00
rgb(0,255,0)
aqua
#00ffff
rgb(0,255,255)
white
#ffffff
rgb(255,255,255)

Bemærk, at farvenavnene lightblue, lightgreen, lightyellow og pink ikke er valide som farvedefinitioner, så farverne skal defineres som enten rgb- eller hexkoder.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen januar 2000
Hjemmesideskolen
Du er her: Forsiden - html - Tekstformatering i HTML
Brugere lige nu: 1
Home Mail