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.
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:
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 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
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.
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.