DWDK – øvelsestime 3 CSS – let the fun begin!!. Tilgængelige slides Disse slides ligger på mit public drev www.itu.dk/people/ripo/ www.itu.dk/people/ripo/

Præsentationer af emnet: "DWDK – øvelsestime 3 CSS – let the fun begin!!. Tilgængelige slides Disse slides ligger på mit public drev www.itu.dk/people/ripo/ www.itu.dk/people/ripo/"— Præsentationens transcript:

1 DWDK – øvelsestime 3 CSS – let the fun begin!!

2 Tilgængelige slides Disse slides ligger på mit public drev www.itu.dk/people/ripo/ www.itu.dk/people/ripo/

3 En lille opsang… Der skal ikke meget til at slå benene væk under validatoren Tjek for stavefejl i koden – og har i fået det hele med? Er der angivet det rigtige tegnsæt og gemt i samme format? Tjek om alle tags er blevet lukket Fil og mappenavne – lav et konsistent system uden æ, ø, å og mellemrum Helst kun små bogstaver Spørg hinanden  friske øjne på koden

4 Er din puter genstridig? ’Domænet ikke tilgængeligt?’  sysadm For at reloade browseren: F5 For at force-reloade browseren: shift+refresh Prøv evt. at lukke browser helt eller erstatte f.eks. billedfilen med en anden Prøv at slette de gemte filer fra hukommelsen (f.eks. hvis man gerne vil se et link ’ubesøgt’) i internetindstillinger. Genstart? Ser i lyset, så fortæl det endelig til mig

5 CSS-fordele Adskiller layout (css) fra indhold (html) Fuldstændig kontrol over udseendet af et site Kan tilknyttes mange sider på én gang Man skal kun rette ét sted Layoutet ændres med et snuptag Kan definere layout til flere medier, f.eks. skærm og print

6 CSS og html, hvordan? CSS skrives også i notepad Gemmes med ”.css” extension Tilknyttes html-dokument(erne) i tagget : Rikkes hjemmeside Bemærk, tagget er tomt og sluttes igen med det samme

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

8 Flere fluer med ét smæk… Man kan både definere flere selectorer og egenskaber/værdier på én gang: h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: #FF0000; background-color: orange; }

9 Kommentarer Man kan skrive kommentarer som hjælp til sig selv eller andre, når koden skal forstås /*definition af overskrifterne*/ ell. ”udkommentere” for at teste /* h1 { font-family: Georgia, "Times New Roman", serif; color: #FF0000; background-color: orange; } */

10 Hvad kan man med CSS? Man kan tilføje css-definitioner på html-tags Pseudo-klasser class og id ’Hjemmelavede’ selectorer her kommer jeres id-attributter til deres ret

11 Html-tags h1 { font-family: Georgia, "Times New Roman", serif; color: #FF0000; background-color: orange; }

12 Pseudo-klasser Skrives ikke i html-koden Udføres ’direkte’ af browseren Oftest i forbindelse med, men kan bruges på stort set alle tags a:link a:visited a:hover a:active F.eks. a:hover { background-color: #6677FF; }

13 ’Hjemmelavede’ selectorer Figurerer i html-koden som ’id’ og ’class’- attributter

14 id i html Må kun optræde én gang pr html-dokument, men gerne på alle siderne, f.eks. forside cv fritid Kan også være attribut til almindelige tags, f.eks. …

15 id i CSS Man kan så definere layout for hovedmenu- id’et i css-koden: #hovedmenu { font-style: bold; color: #000000; background-color: #FFFFFF; } Disse definitioner gælder kun indenfor hovedmenuen

16 class i html Som id, men må gerne figurere flere gange i html-koden F.eks. vil du i en tekst have fremhævet alle navne med fed, grøn tekst: Den nyeste tekst er skrevet af Per Udesen med forord af Lars Djuraas, som også har læst korrektur.

17 class i CSS class skal skrives med punktum.navn { font-style: bold; color: #00FF00; }

18 En parentes: & Gode til at styre layout med og er container-tags, dvs. de har ingen funktion i sig selv For at tilføje funktion kombineres de med ’id’ eller ’class’

19 vs Kan bruges i alle situationer, men egner sig bedst til store spænd. Altså over flere elementer. Laver dog et linieskift, hvis den placeres inde i tekster. Kan kun bruges i mindre spænd og ikke udover en,,, eller andre tags, der laver linieskift. Man kan altså placere inde i, men ikke omvendt

20 Specificering Man kan yderligere definere layout for specifikke kombinationer af tags og class/id. F.eks. links i hovedmenuen skal være røde, men links i h1-overskriften skal være gule: #hovedmenu a { color: #FF0000; } h1 a { color: #FFFF00; } Den mest specifikke selector-kombination ’vinder’, dvs. det er det layout, der kommer til syne i browserens vindue