Introduktion til CSS Godt i gang med CSS

201 – V1 – Introduktion til CSS Hvad er stylesheet?

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…

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

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…

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…

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.

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>

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

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>

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>

Læs grundigt mere om CSS inde på W3Schools.com – Benyt følgende link: 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