: Retur til startside  
Testmenu (hvis den eksisterer)
: Retur til hovedside om css
: Alfabetisk fortegnelse overr attributter
: BOX-attributter
font tekst baggrund classification: Diverse css-attributter

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 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.
olfertDa 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
  Virker i dette eksempel, men ikke i rammen nedednfor P { line-height: 120% } 120% af elementets 'font-size'
  Relative enheder
  Margin bliver for stor her, men em-enheden virker i eksemplet nedenfor 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
 mm-enheden virker udmærket; men word-spacing virker aldrig  mm-enheden virker udmærket; men word-spacing virker aldrig 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%
   Ikke alle navne dúr. Klik EM { color: Red }Klik for mulige navne
 virker ikke virker ikke 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