3. Vad är css?
• Stilmallsspråk (Cascading Style Sheets)
• Ger utseende till ett HTML-dokument
• Möjlighet till anpassning för olika enheter
• Versioner
CSS 1 - 1996
CSS 2 - 1998
CSS 2.1 - 2011
CSS 3 - 2012
4. benämningar: css
• Selektor: kopplar ihop element med attribut
• Attribut: egenskap - färg, typsnitt, storlek m.m
• Värde: vilket värde ska attributet få - gul, arial, 14px
10. Olika selektorer
• Element - reglerna appliceras på alla element av vald typ/tagg
• Id - reglerna appliceras på ett utvalt element
• Klass - reglerna appliceras på ett eller flera utvalda element
12. <div id=”ingress”>
<p>Frozen yoghurt är inte mjukglass.</p>
</div>
<div class=”info”>
<p>När räven skrattar är börsen tom.</p>
</div>
<h2>They talk about nothing in here</h2>Element
Id
Klass
13. Olika sätt att inkludera CSS
1. Externt CSS-dokument (med filändelsen .css)
• <link href=“sökväg” rel=“stylesheet” />
2. I sidhuvudet (<head>)
• <style></style>
3. Som attributet “style” i ett element
• <p style=“color: blue;”></p> - endast attributen
16. Arv
• De flest HTML-element ärver CSS-regler från föräldern
• Detta gäller inte alla element och inte alla attribut
• De övergripande CSS-reglerna bör således kopplas till en
övergripande selektor
• Minskar upprepning av regler
• Enklare att hantera CSS-dokumentet
Exempel
17. Pseudoklasser
• Kombineras med en selektor
• När ett element befinner sig i ett “tillstånd”
• selektor:hover - när muspekaren befinner sig över elementet
• selektor:first-child - första barnet
• selektor:nth-child(even/odd) - jämna/ojämna element
Exempel
18. Avancerade selektorer
• .info em { … }
• “alla em som finns inom elementet med klassen info,
oavsett nivå”
• .info > em { … }
• “alla em som finns direkt (första nivån) inom elementet
med klassen info”
• .info + p { … }
• “den första p som är ett syskon till elementet med
klassen info”
Exempel
19. Specificity
• Fler selektorer = viktigare regel
• Den viktigaste regeln är den som gäller
• Rangordningen för vikten av selektorer är följande:
(1) Id, (2) klass, (3) element.
22. Element - Div
• Grupperar andra element för att ge dessa en gemensam
färg och form
• Används för att skapa struktur och layout
• Är ett block-element
• Width och height i CSS