Globale linker

CSS

Font-definisjoner

CSS-standarden inneholder følgende egenskaper som endrer hvordan tekst skrifttyper vises:

font-family
font-size
font-style
font-weight
font-variant

Alle disse egenskapene arves av under-elementer, eller child elements.

font-family

Font-family egenskapen spesifiserer navnet på font-typen som skal brukes:

p {font-family:verdana}

Nå er det dumt å angi bare en font-type, i og med at vi ikke kan være sikre på at brukeren har akkurat den fonten på sin maskin. Det beste er å liste opp flere alternative font-typer, adskilt av komma. Du kan videre øke muligheten for at brukeren vil se resultatet med en ønsket font-type hvis du avslutter rekken med alternative fonter med en generell font-type-beskrivelse:

p {font-family:verdana, arial, helvetica, sans-serif}

Hvis browseren ikke finner Verdana vil den lete etter Arial, hvis den ikke finner Arial vil den lete etter Helvetica, og hvis den ikke finner noen av fontene angitt vil den bruke en eller annen sans-serif font-type.
(Sans-serif er font-typer uten pynt (f.eks: Arial), mens serif er font-typer med pynt (f.eks. Times New Roman)).

Les mer om hvilke fonter som anses som websikre.

font-size

Font-size egenskapen setter høyden på font'en Dette kan gjøres på fem forskjellige måter:

En verdi relativ til størrelsen på default font i browseren. Verdiene her er:
xx-small (den minste font-størrelsen)
x-small (ca. 1,5 ganger større enn xx-small)
small (ca. 1,5 ganger større enn x-small (default i IE5)
medium (ca. 1,5 ganger større enn small)
large (ca. 1,5 ganger større enn medium)
x-large (ca. 1,5 ganger større enn large)
xx-large (ca. 1,5 ganger større enn x-large)
En verdi relative til størrelsen på foreldre-elementets font:
smaller (ca. 33% mindre enn foreldre-elementets font)
larger (ca. 50% større enn foreldre-elementets font)
(hvis elementet ikke er nøstet inn under et annet element, vil størrelsen beregnes ut i fra browserens default font)
En prosentvis størrelse i forhold til foreldre-elementet.
(hvis elementet ikke er nøstet inn under et annet element, vil størrelsen beregnes ut i fra browserens default font)
En relativ størrelse i forhold til standard tekststørrelse i nettleseren
ems (em) hvor 1 em er lik elementets font-størrelse. 0.5em (punktum, ikke komma) er altså halvparten av størrelsen på fonten.
En spesifikk størrelse. Verdier her kan angis i:
- punkter (pt) Gode gamle punkt-størrelsen som vi er kjent med fra bl.a. Word.(72 punkter=1 inch)
- pixler (px) høyden på fonten i pixler
- centimeter (cm) høyden i centimeter
- Millimeter (mm) høyden i millimeter.
- inches (in) høyden i tommer (72 punkter=1 inch)
- picas (pc) høyden i picas (1 pica = 12 punkter)
- Ex (ex) høyden i forhold til en liten x i font-typen. 2ex er da altså to ganger høyere en fontens lille x.

p {font-size:200%}

font-style

Font-style egenskapen bestemmer om elementets tekst skal vises i skråstilte eller normale bokstaver. Kan ha disse verdiene:

p {font-style:italic} Angir en italic font hvis det fins en i font-settet. Gjør det ikke det angis en oblique font.
p {font-style:oblique} En font som er generert ved å skråstille en normal font
p {font-style:normal} Standard, ikke skråstilt.

font-weight

Font-weight egenskapen bestemmer hvor bold (hvor tykk og mørk) et elements bokstaver skal se ut. Kan ha en av 13 verdier:

p {font-weight:normal} Viser teksten med normal tykkelse.
p {font-weight:bold} Viser teksten med normalt tykke bokstaver
p {font-weight:bolder} Viser teksten i en tykkere font en foreldre-elementet
p {font-weight:lighter} Viser teksten i en tynnere font enn foreldre-elementet
p {font-weight:100} Viser teksten i 100 bold
p {font-weight:200} Viser teksten i 200 bold
p {font-weight:300}Viser teksten i 300 bold
p {font-weight:400} Viser teksten i 400 bold
p {font-weight:500} Viser teksten i 500 bold
p {font-weight:600} Viser teksten i 600 bold
p {font-weight:700} Viser teksten i 700 bold
p {font-weight:800} Viser teksten i 800 bold
p {font-weight:900} Viser teksten i 900 bold

For å være helt ærlig ser jeg ikke store forskjellen på 100-400 og 500-900.

font-variant

Du kan bruke font-variant til å sette all teksten til store bokstaver. To mulige verdier:

p {font-variant:small-caps} Alle bokstaven blir store små bokstaver
p {font-variant:normal} Teksten blir ikke konvertert.

font

Shorthand-metode i følgende rekkefølge:

font: font-style font-variant font-weight font-size/line-height font-family

for eksempel:

font: italic small-caps bold 12px/15px Verdana, Arial, sans-serif;

color

Med color egenskapen bestemmer du fargen på teksten. Det kan gjøres på en av følgende måter:

p {color:red} Ved å angi et nøkkelord for farven
p {color:#FF0000} Ved å bruke hexadesimalverdien
p {color:#f00} kortversjon av den over
p {color:rgb(255,0,0)} Ved å bruke RGB-verdien
p {color:rgb(100%,0%,0%)} Ved å bruke prosentvis andel av hver farge

Gå til neste side hvor vi ser på tekst-definisjoner