C S S - attributter

<længde>
<farvenavn>
color
DEFINITIONER:
    element
    inline og blok
    canvas
    box

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

TEKST
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height

BAGGRUND
background
background-color

BOX
margin
margin-top,
     right / bottom / left
padding
padding-top,
     right / bottom / left
border-width
border-top-width,
     right / bottom / left
border-style
border-color
border
width
height
float
clear

CLASSIFICATION
display
white-space
list-style-type
list-style-image
list-style-position
list-style

CSS har en stor ulempe: Det virker ikke, i hvert fald ikke hver gang med begge browsere (Netscape og Internet Explorer). Jeg har her gjort et stort nummer ud af at teste det af, men tænk på at der er mange attributter der kan antage mange forskellige værdier, og knyttes til endnu flere forskellige HTML-elementer. Så kan du nok forstå at ikke alle kombinationer er prøvet af.

Undskyld, browserlisten er helt forældet, det burde være Opera, Firefox, Internet Explorer og Chrome. Det blir det osse snart, håber jeg. Problemet er bare, at jeg sommetider laver andet end at tjekke browsere.

: Netscape4.5

: Netscape6.2

: Interner Explorer4.0
Virker Virker nogenlunde
Virker ret dårligt Virker ikke

Ved de blå og gule kugler er der næsten altid skrevet en uddybende forklaring, som kan læses ved at holde musen på kuglen, uden at klikke

Hvis det var et spørgsmål, så er dette et svar

Detteher er altså dennehersensens uddybende forklaring

Hvis værdien af en attribut er angivet uden brug af < > - paranteser, skal værdien skrives ordret som den står; med paranteser skal der indtastes en værdi for det der står i parantesen. Eks:

	<tal>%	Skriv f.eks. 7%
	<længde> <farvenavn>	Skriv en længde som defineret nedenfor Skriv et farvenavn som defineret nedenfor
	<URL>	URL er et filnavn (hvis internet-adresse, da med korrekt store/små bogstaver)
	<font-style>	skriv en af de værdier, som nedenfor er anført som mulige værdier for font-style.
	olfert	Da der ikke står < > så skriv ordet Olfert (det er ligemeget med store og små bogstaver)


		Længde-enheder: <længde>
	Testet om virker i viste eksempler:
	Procent-enheder
		P { line-height: 120% }	120% af elementets 'font-size'
	Relative enheder
		H1 { margin: 0.5em }	em, ~ højden af elementets font
		H1 { margin: 1ex }	x-højde, ~ højden af bogstavet 'x'
		P { font-size: 12px }	pixels, relativ til canvas
	Absolutte enheder
		H1 { margin: 0.5in }	inch (tomme), 1in = 2.54cm
		H2 { line-height: 3cm }	centimeter, 1 cm er 1,5 cm lang på en 17" skærm
		H3 { word-spacing: 4mm }	millimeter
		H4 { font-size: 12pt }	points, 1pt = 1/72 in
		H4 { font-size: 1pc }	picas, 1pc = 12pt

gul ramme 2% (ses kun med Netscape 4) ramme 2 em ramme 2 ex ramme 20 px ramme 0,25 tomme ramme 1 cm ramme 5 mm ramme 10 pt ramme 1 pc

Farve-enheder: <farvenavn>

	EM { color: #f00 }	#rgb
	EM { color: #ff0000 }	#rrggbb
	EM { color: rgb(255,0,0) }	0 - 255
	EM { color: rgb(100%, 0%, 0%) }	0.0% - 100.0%
	EM { color: Red }	Klik for mulige navne
	H1 { background-color: Transparent }	Overflødig

COLOR En sær ting ved CSS-dokumentationen:

Der er en css-attribut der hedder 'color', som bruges til at sætte forgrunds-farven (tekstens farve) med. Den er nævnt i dokumentationen

i mange eksempler, men af en eller anden grund er den i princippet udokumenteret, bortset fra eksemplerne. Mon der er flere udokumenterede css-attributter?
Og en højst ubelejliget detalje:
I et felt til en tabel virker <TD style="color: farvenavn"> nok i Internet Explorer og Netscape 6, men desværre ikke i Netscape 4.

Test : i denne <td> ikke angivet style

i denne <td> style="color:magenta"

NOGLE DEFINITIONER
Hvis man skriver <DIV style="color: red"> så har vi et ELEMENT = HTML-koden (DIV) med HTML-attributten style, der tillægges en værdi. Denne værdi er css-koden, der igen består af css-attributten 'color', der får tillagt værdien 'red'. Hvis jeg bare skriver kode mener jeg normalt HTML-kode.

INLINE og BLOCK-level elementer:
I css deles elementerne op i blok-elementer og inline-elementer, og så er der elementet <BR> der ikke passer ind i systemet.
Et inline-element er HTML-kode der kan stå "indeni linien", f.eks. <I>. Ifølge dokumentationen til CSS forstås der ved et Block-level-element

"an element which has a line break before and after (e.g. 'H1' in HTML)",

men definitionen holder ikke - iflg denne definition skulle eksempelvis TABLE ikke være et blok-element, men det opfører sig som sådant.

CANVAS
Det engelske ord "canvas" betyder - ordret oversat - lærred, herunder teltdug og det lærred kunstmaleren maler på. Det bruges i overført betydning: Noget der kan bære koden, den tabel man skriver i, en liste, eller sågar hele <BODY>-afsnittet.
En karakteristisk ting ved CANVAS-elementer er, at de ikke kan deles over med <BR> , hvis de ikke kan være på skærmen i bredden indsættes i stedet scroll-bars. Vi ser derfor, at også også < IMG>-elementer må regnes med til canvas.

BOX
Css-dokumentationen anser det for at være så selvindlysende hvad en box er, at det ikke behøver en nøjere forklaring. Jeg er derfor henvist til gætterier: Jeg gætter på, at en BOX er et element, der enten er et BLOCK-level element eller en canvas.

ALFABETISK LISTE OVER ATTRIBUTTER
background background-color BAGGRUND border border-color border-style border-top-width, right / bottom / left border-width BOX box canvas CLASSIFICATION	clear color DEFINITIONER display element float FONT font font-family font-size font-style font-variant	font-weight height inline og blok letter-spacing line-height list-style-type list-style-image list-style-position list-style margin margin-top, right / bottom / left	padding padding-top, right / bottom / left TEKST text-align text-decoration text-indent text-transform vertical-align white-space width word-spacing

: Til toppen af siden