Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

CSS Doing it in style!. CSS Cascading style sheets. Eget språk for presentasjon av dokumenter. Ligner Java-syntaks. Klasser av stiler for gjenbruk. Kaskaderende.

Liknende presentasjoner


Presentasjon om: "CSS Doing it in style!. CSS Cascading style sheets. Eget språk for presentasjon av dokumenter. Ligner Java-syntaks. Klasser av stiler for gjenbruk. Kaskaderende."— Utskrift av presentasjonen:

1 CSS Doing it in style!

2 CSS Cascading style sheets. Eget språk for presentasjon av dokumenter. Ligner Java-syntaks. Klasser av stiler for gjenbruk. Kaskaderende stil og arv. Tre viktige HTML-attributter: id, style og class.

3 CSS: Syntaks selektor { egenskap: verdi;... } Eksempel: p { color: red; } La alle forekomster av p har rød tekst.

4 Koble til HTML style-attributtet til etthvert element. style-elementet i et dokument Et link-element

5 Koble til HTML: Style- attributtet Gjelder kun elementet, evt også dets barn. Unngå. Dette er litt tekst.

6 Koble til HTML: I style- elementet Gjelder hele dokumentet. p { margin-top: 10px; } …...

7 Koble til HTML: Ekstern fil. Kan gjelde flere dokumenter. Tekstfil: filnavn.css <link rel=”stylesheet” type=”text/css” href=”filnavn.css”/>...

8 CSS: Klasser I CSS: p.important { font-weight: bold; } La alle forekomster av p med klassen important ha fet skrift. I HTML: Dette er viktig.

9 CSS: Anonyme klasser I CSS:.important { font-weight: bold; } La alle elementer med klassen important ha fet skrift. I HTML: Dette er viktig. Dette er noe vi må se litt nærmere på.

10 CSS: Stil på ID. I CSS: div#toc { /* eller bare #toc { … }*/ font-size: 10px; color: green; } La elementet med id'en toc ha 10px fontstørrelse og grønn tekstfarge. I HTML: Innhold...

11 CSS: Pseudoselektorer selektor:pseudoselektor {... } Selektorer: a:link, a:visited, a:active selektor:hover selektor:before, selektor:after selektor:first-letter, selektor:first-child Eksempel: a:hover { background-color: pink; }

12 Element-typer Block (p, div, td, li, form) Inline (span, em, code, strong, input) Container ??

13 CSS: Utdrag Generelt utseende: font-family, font-size, font-weight text-align, horizontal-align, text-decoration color, background-color background, background-image Posisjonering: margin, padding, border width, height, float, position, top, left, bottom, right

14 CSS: The box model

15 CSS: The box model 2 Width/height er vidde/høyde av innhold IE i Quirks mode: width/height er vidde/høyde av innhold + padding + border. CSS 3: Regel for bytte av box model.

16 CSS: Posisjonering Static: Vanlig flyt. Bokser fra topp til bunn, inline fra venstre til høyre. Relative: Bokser forskyves relativt til deres posisjon i vanlig flyt. Absolute: Bokser forskyves relativt til punktet 0,0 i viewporten. Evt relativt til absolutt posisjonert foreldreboks. Fixed: Bokser låses relativt til viewpointen. F.eks ”alltid øverst”. Støttes ikke av IE <= 6.0.

17 CSS: Når det blir kult… 1 Sekevens: selektor underselektor... {... } #menu div p.head { font-size: 12px; } Liste/gruppering: selektor1,..., selektorN {... } #menu, #header { margin-bottom: 10px; } Flere klasser:..

18 CSS: Når det blir kult... 2 Forskjellige media-typer: … Flere stilark. Alternative stilark.

19 Ressurser W3Cs stil-aktiviteter: http://www.w3.org/Style/ W3Cs CSS-aktiviteter http://www.w3.org/Style/CSS/ Spesifikasjonen for CSS 2.1: http://www.w3.org/TR/css2


Laste ned ppt "CSS Doing it in style!. CSS Cascading style sheets. Eget språk for presentasjon av dokumenter. Ligner Java-syntaks. Klasser av stiler for gjenbruk. Kaskaderende."

Liknende presentasjoner


Annonser fra Google