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

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