CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere.

Præsentationer af emnet: "CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere."— Præsentationens transcript:

1 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

2 Kun til nyere browsere: >= Internet Explorer 3.0 + (1996), Netscape 4.0 + (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

3 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

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

5 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; }

6 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; }

7 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: #990099 } A.active { color: #FF0000 }

8 ”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