Introduktion til CSS Godt i gang med CSS. 201 – V1 – Introduktion til CSS Hvad er stylesheet?

Præsentationer af emnet: "Introduktion til CSS Godt i gang med CSS. 201 – V1 – Introduktion til CSS Hvad er stylesheet?"— Præsentationens transcript:

1 Introduktion til CSS Godt i gang med CSS

2 201 – V1 – Introduktion til CSS Hvad er stylesheet?

3 201 – V1 – Introduktion til CSS Hvad er stylesheet? Et stylesheet er en liste af regler for, hvilken form, bestemte HTML- elementer skal have. Som forklarende eksempel kan vi benytte markøren. Resultatet af at anvende denne er en fed sort 26 pkt. Times skrift. Se et eksempel på næste side…

4 Ordinær H1-markør H1-markør med stil H1-markør med stil Tilføjet style-attributten (Formregler) Ovenstående eksempel kaldes for inline, da den forefindes i markør linien

5 Dokumentorienteret stylesheet Her indsættes formreglerne i dokumentets (head) og en enkelt regel gælder dermed for hele dokumentet. Du indsætter style-markøren og en masse style-attributter Se eksempel 1 her… Eksterne Stylesheets I stedet for at indsætte formregler i (head) indsættes der en reference til et stylesheet, der er eksternt i forhold til websiden. Man indsætter link- markøren og rel, href & type attributterne. Se eksempel 2 her…

6 Importerede stylesheets Her importerer man formreglerne fra en fil. er dog den mest anvendte metode og importerede stylesheets virker kun i de nyeste webbrowsere. Se eksempel 3 her…

7 Gruppering af selektorer Ønsker du at bruge samme regler for to eller flere forskellige HTML-markører, skal de listes kommasepareret. Eksempel: Body, p, td {font-size: 14px; color: #000;} Kaskadeprincippet h1, h2, h3, h4, h5, h6 {color: navy; font-family: Arial;} h1, h2, {color: red;} Linie to, den der er nærmest teksten her, eller den der bliver læst sidst overrooler den anden. H1 & h2 vil altså i det her tilfælde være rød og fortsat ha’ font-family Arial.

8 Class attributten Af hensyn til evt. fremtidige ændringer i dit stylesheet, bør du primært arbejde med eksterne stylesheets og holde formatet på alle dine underlæggende sider. Her kommer Class attributten til gavn. Style.css.kanne {color: #000;}.farve {color: blue;} Forsiden.htmlkontakt.html<h1 class=”kanne”>1</h1><h1 class=”farve”>2</h1>

9 Class attributten Style.css.green {color: #000;}.red {color: #000;} Forsiden.htmlkontakt.html 1 1 2 2

10 Element id som selektor Ethvert html-element kan gives en ID-attribut. I relation til elementets stylesheet egenskaber kan et sådan element selekteres på fuldstændig samme måde som et element med class-attributten. Kun selektoren er anderledes = # Style.css H1#green {color: #000;} #red {color: #000;} Forsiden.htmlkontakt.html<h1 id=”green”>1</h1><div id=”red”>2</h1>

11 Pseudo-classes Link, visited & active er CSS-2 egenskaber der kaldes pseudo egenskaber, og som modsvares af selektorer der kaldes pseudo classes. Her er et godt eksempel. Style.css a.kanne:link {color: green}; a.kanne:visited {color: red}; a.kanne:active {color: yellow}; a.kanne:hover {color: blue}; Forsiden.htmlkontakt.html<a href=”ikast.dk” class=”Kanne”>link</a>

12 Læs grundigt mere om CSS inde på W3Schools.com – Benyt følgende link: http://www.w3schools.com/css/ Løs følgende opgave: Gå ind på ITs Learning og løs opgaven / 005 – CSS syntaks & attributter mm. Når du har løst opgaven, skal du hente din underviser så han kan bedømme din besvarelse af opgaven. Det er en multi-choice opgave. Løs efterfølgende opgave / 006 – Godt i gang med CSS