Cascading style sheets (CSS) Formål med css • Adskillelse af indhold og udtryk • Større typografisk frihed • Nemmere redigering Eksempel uden style sheetuden style sheet Eksempel med Style sheetmed Style sheet
Adskillelse af indhold og udtryk html dokument Overskrift celle HTML Indhold/struktur CSS Form/udtryk body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; } H1 { color: #FFFFFF; background-color: #000000; letter-spacing: 12pt; text-indent: 12pt; float: none; clear: right; height: 45px; width: auto; }
Adskillelse af medietype •I CSS kan man definere screen { p {font- family:verdana,sans-serif; font- size:14px} } Print, handheld, aural, projection mm.
Større typografisk frihed Nye muligheder: Linieafstand Indryk Punktstørrelse Præcis placering mm.
Nemmere redigering CSS body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; } H1 { color: #FFFFFF; background-color: #000000; letter-spacing: 12pt; text-indent: 12pt; float: none; clear: right; height: 45px; width: auto; } HTML html dokument Overskrift celle html dokument Overskrift celle html dokument Overskrift celle html dokument Overskrift celle Centralt administreret
HTML og CSS Tre måder: 1.Link til ekstern css-fil i html dokument 2.Indlejret css i sidehovedet, 3.Lokalt placeret i html dokument
Link til ekstern css-fil •Link til css-fil indsættes i html- dokumentets -sektion:......
Direkte i HTML dokument h3 { color: #006699; }...
Lokal placering (Inline Style Sheets) Overskrift <div style= ”font-family: Helvetica, Arial, Sans- serif; Background-color: #EEEEEE; text-align: center”>Her Kommer den grå centrerede Helvetica tekst......
Klasser (Classes)... Her kommer den tekst der bliver formateret med reglerne for "afsnit1"......
Dreamweaver, browsere og CSS •Redigering og applikering i Dreamweaver •WYSIWYG - med forhold! •Browsere tolker css forskelligt (jf, tidligere eksempel). Se liste med browser supportliste med browser support