Globale linker

CSS

classification properties

Denne gruppen med definisjoner kontrollerer hvordan noen standard-elementer vises, som display og lister. Disse egenskapene kan forandre et type element fra inline til block og fra et list-element til et inline. Disse egenskapene inneholder også metoder for å kontrollere hvordan lister blir vist, slik at du kan få større kontroll over f.eks en punktliste.

display

Display bestemmer hvordan et elements tekst blir vist i en browser. Kan ha verdiene:

inline (default) browseren setter ikke inn et linjeskift før eller etter et elements tekst.
block browseren setter inn et linjeskift før og etter elementet (omtrent som <p>-taggen). Ved å definere et element som en block kan du formattere ting som kantlinjer, marger, osv...
none browseren viser ikke elementet.
list-item browseren viser elementet som en linje i en liste

h1 {display:inline} tvinger overskriften inn på linje sammen med neste element.

list style

brukes til å formattere lister. Her har vi følgende egenskaper:

list-style-type bruker du for å bestemme hva slags type liste du vil ha. Kan ha verdiene:

none ingen punkt foran liste-elementene
disc fylt runding
circle smultring
square firkant
decimal tall
lower-roman små romertall
upper-roman store romertall
lower-alpha små bokstaver
upper-alpha store bokstaver

list-style-position brukes til å sette innrykk eller utrykk for punktgrafikken. Kan ha verdiene:

inside innrykk av punktet
outside utrykk av punktet

list-style-image Har du laget deg egne punkter for å bruke i lister bruker du denne egenskapen. Pass på at disse bildene er små! Kan ha verdiene:

none
url (addresse )

ul {
				list-style-position:inside;

				list-style-type:disc; 

				list-style-image:url(images/punkt.gif)
			}

kan også samles i en med rekkefølgen: type, position, image:

ul {list-style: disc inside url(images/punkt.gif)}

white-space

Med white-space bestemmer du selv hvordan tekst i et element skal flyte. Du har tre alternativer:

normal slik som tekst flyter i dag. Er det behov for linjeskift p.g.a. vindusstørrelsen bryter browseren selv teksten for at all teksten skal synes.
pre indikerer at innholdet allerede er formattert riktig og skal vises som det er.
nowrap det skal ikke forekomme tekstbryting

F.eks:

pre {white-space:pre}

Dette indikerer at elementet er preformattert Avstand mellom tegn, ord og linjer er satt i koden, så også linjeskift.

p {white-space:normal}

Tekst flyter som normalt

h1 {white-space:nowrap}

Teksten i overskriften skal ikke tekstbrytes.

Gå til neste side hvor vi skal se på posisjonering.