Præsentation er lastning. Vent venligst

Præsentation er lastning. Vent venligst

Cascading style sheets (CSS) Formål med css • Adskillelse af indhold og udtryk • Større typografisk frihed • Nemmere redigering Eksempel uden style sheetuden.

Lignende præsentationer


Præsentationer af emnet: "Cascading style sheets (CSS) Formål med css • Adskillelse af indhold og udtryk • Større typografisk frihed • Nemmere redigering Eksempel uden style sheetuden."— Præsentationens transcript:

1 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

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

3 Adskillelse af medietype •I CSS kan man definere medietype: @media screen { p {font- family:verdana,sans-serif; font- size:14px} } •Andre @media-eksempler: Print, handheld, aural, projection mm.

4 Større typografisk frihed Nye muligheder: Linieafstand Indryk Punktstørrelse Præcis placering mm.

5 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

6 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

7 Link til ekstern css-fil •Link til css-fil indsættes i html- dokumentets -sektion:......

8 Direkte i HTML dokument...... h3 { color: #006699; }...

9 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......

10 Klasser (Classes)... Her kommer den tekst der bliver formateret med reglerne for "afsnit1"......

11 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


Download ppt "Cascading style sheets (CSS) Formål med css • Adskillelse af indhold og udtryk • Større typografisk frihed • Nemmere redigering Eksempel uden style sheetuden."

Lignende præsentationer


Annoncer fra Google