Access Keys:
Skip to content (Access Key - 0)


Kapittel 3.4 - Tekstdekorering

Added by Joachim Haagen Skeie , last edited by Joachim Haagen Skeie on Nov 20, 2009 16:37
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Innholdsfortegnelse

I motsetning til HTML gir CSS svært god kontroll over tekstens dekorering og formatering. Det er spesielt fire elemter som eger seg til tekst dekorering: text-decoration, color, text-transform og font-variant.

Tekst dekorering

Elementet text-decoration muliggjør understreket, overstreket, gjennomstreket og blinkende tekst. Selv om HTML flaggene <u>, <strike> og <blink> (Kun i Netscape) tillater henholdvis understreket, gjennomstreket og blinkende tekst, har de blitt erstattet av CSS elementet text-decoration i HTML 4.01.

<style> 
   p { text-decoration: overline; } gir overstreket tekst 
   p { text-decoration: underline; } gir understreket tekst 
   p { text-decoration: line-through; } gir gjennomstreket tekst 
   p { text-decoration: blink; } gir blinkende tekst 
</style> 

Det er selvfølgelig mulig å kombinere flere av disse effektene ved å inkludere de ønskede effektene som en liste til font-decoration. En vanlig kombinasjon er overstreket og understreket:

p { text-decoration: overline underline; } gir understreket og overstreket tekst

De færreste nettlesrer støtter blinkende tekst, ettersom det er en rimelig irriterende effekt, samtidig som det er svært upraktisk. I tillegg er det noen versjoner av Netscape som ikke støtter overstreket tekst.

Farge

Som du kanskje har gjettet kan du tilegne farge ved hjelp av CSS elementet color:. Farger er definert på samme måte som i HTML hvor 6 heksadesimaler angir en bestemt farge. Dersom du ikke vet hvordan man definerer en HTML farge, bør du ta titt på Kapittel 2.4 i vår HTML guide. Det lønner seg å benytte seg av de websikre fargene for å forsikre seg at en nettside har samme farger i alle nettlesere. Du finner alle de websikre CSS fargene i Appendix A.

CSS elementet color: #ff33aa gir ikke bare farge til tekst, men til det som vises i forgrunnen i et HTML-flagg. Med andre ord kan du benytte <hr style="color: blue;"> for å gjøre separatoren blå (Fungerer ikke i Mozilla eller Netscape):

font-variant

CSS elementet font-variant har kun en effekt som støttes av de fleste nettlesere: small-caps. Effektes av small-caps er at teksten blir omgjordt til store bokstaver, men hvor store bokstaver er noe større enn de små.

<style> 
   p { font-variant: small-caps; } Omgjør teksten til store bokstaver 
</style> 

small-caps omgjør teksten til store bokstaver, men beholder Store bokstaver Store. Gir teksten en "tegneserie" følelse

Tekst omforming

Det siste CSS elementet som har mulighet til å dekorere tekst er text-transform. Elementet gjør det mulig å omforme tekst til store eller små bokstaver, samt gi hvert ord i en setning stor bokstav i begynnelsen av ordet.

<style> 
   p { text-transform: uppercase; } gir store bokstaver 
   p { text-transform: lowercase; } gir små bokstaver 
   p { text-transform: capitalize; } Gjør første bokstav i hvert ord om til en stor bokstav 
</style> 
Adaptavist Theme Builder (3.3.5-conf210) Powered by Atlassian Confluence 3.0.2, the Enterprise Wiki.