CSS - Cascading Style Sheets HTML-koder for
tekststruktur og
for formatering HTML-koder for
tekststruktur CSS-koder for
formatering Før Nu Lettere at redigere mange sider
Større uafhængighed af platform og software
Renere kode
Mere kompakt kode - hurtigere at downloade og parse
CSS - Cascading Style Sheets HTML-koder for
tekststruktur og
for formatering HTML-koder for
tekststruktur CSS-koder for
formatering Før Nu 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 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
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
Inline
Tekst
CSS syntaks
H2 {font-family: 'Arial'; font-weight: bold; font-size: x-large;} Selector Property Value
element egenskab væ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;
”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
Comments