CSS ver. 2 Rikke Møller-Poulsen

Visning af billeder?!? Er der stadig nogen, der har problemer med at få vist billeder på deres site?

CSS-syntaks CSS består af regler, der definerer, hvordan html’ens tags skal vises af browseren. selector { egenskab: værdi; } F.eks. røde overskrifter h1{ color: #ff0000; }

Helt CSS-lost? Se mine slides fra sidste gang vi havde om CSS (3. øvelsesgang)

inline elements vs block-level elements (Lloyd) Inline elements Kan indeholde andre inline elements F.eks. em, strong, a, span I css kan specificeres: Farve på tekst og baggrund Font-egenskaber, dvs. strørrelse, font-family, text-dekoration Block-level elements Kan indeholde andre block-level elements og inline elements F.eks. p, div, h1-h6, ul/ol I css kan specificeres: Farve tekst & baggrund Font-egenskaber Højde/bredde Position på sitet Border/margin/padding (the box-model)

Opg 1: class og id id og class er attributter i xhtml-koden I xhtml: … I CSS: #hovedmenu{ color:orange; } I xhtml: Denne skrift skal være gul I CSS:.gultekst { color:yellow; } Eller mere specifikt: p.gultekst { color:yellow; }

Opg 2: box-modellen Box-modellen virker optimalt, når der er angivet doctype øverst i dokumentet Der kan være eksempler, hvor browserne kan have nogle default-værdier på f.eks. margin, og det kan hjælpe at angive en værdi på nul. Giv de forskellige indholdselementer en farvet kant mens i arbejder med dem, det gør det mere overskueligt

Opg 2: boksmodellen fortsat I opgaven er brugt, og til at lege med boksmodellen Ofte vil man bruge og med tilknyttede class eller id-attributter – brug dem i allerede har lavet Man kan arbejde med layoutet vha forskellige ’indholdskasser’, der kan placeres i forhold til hinanden og inden i hinanden

Opgave 3 & 5 positionering vha egenskaben float Positionering er altafgørende Float får et element til at ligge sig f.eks. til højre, og det øvrige indhold ’pakkes’ til venstre for.

Opg 4: positionering vha egenskaben ’position’ Egenskaben position kan have 2 værdier: Absolut, dvs. det element man arbejder med har en position, der er defineret i forhold til browservinduets eller det omkringliggende elements koordinater (0,0 = øverst til venstre) Relative, dvs. elementet tager udgangspunkt i den placering, det har i forhold til andre elementer. Dette giver også mulighed for at placere noget ovenpå hinanden De tre former for positionering float:left/right, position:absolute og position:relative kan kombineres, så man opnår lige præcis det layout, man ønsker Prøv jer frem – læs Lloyd