CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere mange sider Større uafhængighed af platform og software Renere kode Mere kompakt kode - hurtigere at downloade og parse

Kun til nyere browsere: >= Internet Explorer (1996), Netscape (1997) Manglende standarder: IE og Netscape implementerer forskelligt CSS-problemer Løsningsmuligheder: Layout siderne så de også er læselige uden css Skriv meget enkle css’er Skriv flere css’er og benyt JavaScript til browserkontrol men ikke dobbeltsæt af sider hhv med og uden css css og HTML-formateringskoder i samme dokument

CSS - 3 niveauer af cascading Selvstændig CSS-fil linket til HTML-filer Prioritet: 3 Indlejret CSS - dvs. CSS-blok i HTML-filen Prioritet: 2 Inline CSS-koder i HTML-koderne Prioritet: 1

Selvstændig fil... CSS i dokumentet Indlejret <!-- P { font-size: 10pt; font-family: "Arial, Sans-Serif"; color: # } H1 { font-size: 16pt; font-family: "Arial, Sans-Serif"; color: # } --> Inline Tekst

CSS syntaks H2 {font-family: 'Arial'; font-weight: bold; font-size: x-large;} SelectorPropertyValue elementegenskabværdi H2 { font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'; font-weight: bold; font-size: x-large; color: #660066; }

CSS arvelighed P { font-family: 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvetica'; font-weight: bold; font-size: 11pt; … color: #000066; position: relative; (Arves af P.small) margin-left: 1cm; } P.small { font-family: 'Arial', 'Sans-Serif'; font-weight: normal; font-size: 8pt; text-align: center; }

CSS- generel klasse, specielle klasser.note { font-family: 'Arial', 'Sans-Serif'; font-size: 10pt; font-weight: normal; color: #006600; } Specielle klasser for A.link { color: #FFFF00 } A.visited { color: # } A.active { color: #FF0000 }

”sikre” CSS-muligheder - i hovedtræk Font størrelse skrifttype udformning (vægt, stil) Tekst Linjeafstand Justering Indrykning udsmykning (u, s, sub, sup) Automatisk stort 1.bogstav Knibning bogst, ord Farver Tekstfarve Baggrundsfarve/billede Margin Margin, V og H, T og B Luft langs sider Layout Placering fra T, V Position ift. Dok., Overordnet element Mål på element H, B Synlig/skjult Udklip (gennemsigtigt omr.) Kasser Margin, V og H, T og B Luft langs sider Ramme-udformning Punktopstilling Punkt-udforming

Billede 10 Varighed Overgang Billede 1 Varighed Overgang Billede 2 Varighed Overgang Billede 3 Varighed Overgang Billede 4 Varighed Overgang Billede 5 Varighed Overgang Billede 6 Varighed Overgang Billede 7 Varighed Overgang Billede 8 Varighed Overgang Billede 9 Varighed Overgang Billede 11 Varighed Overgang Antal gennemløb Transparens Størrelse Palet Gif-animation ver 89a

Frame: nr. Duration: x/100 sek. Paint Shop Pro Animation Shop højreklik File/ Animation wizard Test-vindue