CSS-stilark - en oversikt over utvalgte egenskaper

Her følger en oversikt over de vanligste egenskapene til bruk i stilark, og kort om hvordan de brukes. Dette er ikke en komplett liste, det kan du finne bl a i W3C CSS Recommended Specification.

Generelt

Stilark kan forbindes med html-kodet tekst på fire ulike måter: Som et lenket stilark i en egen fil, som et importert stilark i en egen fil, som en egen seksjon innenfor head-seksjonen av html-dokumentet, og som attributter plassert i de enkelte tager i html-dokumentet. Her vil vi bare ta for oss den tredje av disse metodene. Prinsippene for stilark er likevel de samme, uansett hvilken av disse metodene som benyttes, men den fjerde metoden forhindrer at man kan benytte en av de kraftigste egenskapene ved stilark, nemlig gjenbruk av stiler.

Her følger et enkelt eksempel på hvordan stilark kan angis og benyttes:

<html> <head> <title> Dokument med stilark </title> <style type="text/css">  </style> </head> <body> <h2> Her er en rød overskrift. </H2> <p> Her er en vanlig tekst. </P> <p class="viktig"> Denne teksten blir uthevet og blå. </p> </body> </html>

Skrift: typer, størrelser og utseende

font-family: angir en vanlig skrifttype, f eks Arial, "Times New Roman", "Courier New", m fl. Skrifttyper bestående av flere ord må skrives i anførselstegn. Man kan også angi et generisk font-navn. De mest utbredte er da: serif og monospace, noen nettlesere støtter også sans-serif .
font-size: kan angis i punkter pt, f eks 24pt, i prosent (%), f eks 120%, i pixeler px, f eks 20px, eller i navngitte størrelser hvor alternativene er: xx-small, x-small, small, medium, large, x-large, xx-large. En fleksibel angivelse er i tegnenheter, em. Dette tilsvarer prosentangivelse og tar utgangspunkt i bredden av bokstaven m. Eksempler: font-size: x-large; (ekstra stor skrift), font-size: 1.4em; (skriften blir 1,4 ganger så stor som normalt).
font-weight: angir skriftens "vekt", fet eller normal (eller grader). Verdier: bold eller normal, evt bolder eller lighter. Tallverdier kan også benyttes, da er alternativene: 100, 200, 300, ... 900, hvor normal skrift tilsvarer tallverdien 400, fet skrift tilsvarer tallverdien 700.
font-style: angir om teksten skal være kursiv. Verdier: italic, normal eller oblique.
font: er en forkortet notasjon som omfatter alle ovenfor. Disse må da komme i følgende rekkefølge: font: <font-style> <font-weight> <font-size> <font-family>. (Bare verdiene angis.) Eksempel: font: italic normal 24pt Arial;
text-transform: forvandler kapitaliseringen av teksten (store/små bokstaver.) Verdiene er: capitalize (første bokstaven i hvert ord blir stor), uppercase (alle bokstaver blir store), lowercase (alle bokstaver blir små) eller none (nøytraliserer en teksforvandling).

Marger, luft og justering

margin-left: angir marg utenfor elementet. Denne kan angis i prosent, f eks 7%, i tegn-enheter, em f eks 2em, dvs 2 tegns bredde, i punkter pt, eller pixeler px, slik som ved font-size. Verdiene for margin kan være negative, det resulterer i at elementet blir flyttet. Dette kan benyttes til å plassere elementer svært nært eller oppå hverandre.
margin-right: på samme måte som margin-left. Eksempel: margin-left: 5%; margin-right: 15%;
margin-top
margin-bottom
margin: - forkortet notasjon for samtlige ovenfor. De fire margene angis i følgende rekkefølge: <top> <right> <bottom> <left>. Angis bare én verdi, blir alle fire margene like. Angis to eller tre, hentes de manglende verdiene fra motsatt side. Eksempel: margin: 24px 50px 12px 50px;
padding-left: angir "luft" inni elementet. Samme størrelser som for margin-left. Det er padding- tilsvarende for right, top og bottom. Verdiene for padding kan ikke være negative.
padding: - forkortet notasjon, på samme måte som ved margin.
text-align: angir tekstens plassering innenfor elementet. Kan være én av: left, right, center, justify.
text-indent: angir innrykk av første linje av et element. Bruk samme størrelser som for margin-left.
line-height: angir linjehøyden, som kan være forskjellig fra font-størrelsen. Verdiene er de samme som for font-size.

Farger og bilder

color: tekst- og annen forgrunnsfarge. Kan angis som hexadesimale verdier: #FFCC99, som fargenavn (for noen farger): black, green, eller som rgb-verdier: rgb(10%,20%,10%) hvor prosentene angir metning av henholdsvis rødt, grønt og blått.
background-color: bakgrunnsfarge, angis på samme måte som forgrunnsfarge. Det er en god praksis å angi både for- og bakgrunnsfarge for elementer.
background-image: url(" ... "): her oppgis filnavnet til en grafikk- eller bilde-fil. Nytt er at de fleste elementer kan ha et bakgrunnsbilde, ikke bare body. Men: forsiktig med størrelsen på bildefiler, og sørg alltid for god leselighet! Eksempel: background-image: url("neshorn.jpg");
background-repeat: angir om og hvordan bakgrunnsbildet skal gjentas. Verdiene er: repeat, repeat-x (gjentas bare vannrett), repeat-y (gjentas bare loddrett), no-repeat (gjentas ikke). Background-repeat er upålitelig i noen nettlesere.

Kantlinjer, rammer

border-width: Man kan angi en ramme rundt de fleste elementer. Dette angir rammens tykkelse. Man kan bruke en størrelse i pixeler (f 5px), eller termene thin, medium, thick. Det kan angis fra én til fire verdier. Angis én verdi, gjelder den alle sidene. Angis det to verdier, gjelder den første over-og neder-kant, den andre høyre- og venstre-kant. Angis det tre verdier, gjelder den første over-kant, den andre høyre- og venstre-kant og den tredje neder-kant. Angis det fire verdier gjelder de over-, høyre-, bunn- og venstre-kant i denne rekkefølgen.
border-color: dette angir rammens farge, på samme måte som farger ovenfor. Fargeangivelse angis for de fire kantene på samme måte som ved rammens tykkelse, ovenfor.
border-style: angir ulik stil på rammen. Velg mellom: none, dotted, dashed, solid, double, groove, ridge, inset og outset. Stil angis for de fire kantene på samme måte som ved rammens tykkelse, ovenfor.
border: - forkortet notasjon for kantlinje-egenskapene. Egenskapene kommer da i følgende rekkefølge: <border-width> <border-style> <border-color>. Alle fire kanter blir ved forkortet notasjon like. Eksempel: border: 3px ridge rgb(70%,0%,40%);

Lister

list-style-type: angir utseende på markøren for det enkelte listepunkt. Verdien kan være én av følgende: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.
list-style-image: angir en bildefil som vil brukes som markør for det enkelte listepunkt. Verdien er en gyldig url (web-adresse eller filnavn). Eksempel: list-style-image: url(punkt.gif).
list-style-position: angir hvordan punktmarkøren tegnes i forhold til innholdet. Verdiene er: inside, outside.
list-style: - forkortet notasjon for alle tre. Rekkefølgen er: <type> <position> <image>. Et eksempel: list-style: lower-alpha inside; , et annet eksempel: list-style: outside url(punkt.gif);

Tilbake til CSS - en kort innføring