Föreläsning om CSS
0 likes578 views
Föreläsning om CSS på Medieteknik, Malmö Högskola. Kurserna Webbproduktion och Webbpublicering.
Föreläsning om CSS
- 1. CSS
- 2. RECAP!
- 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
- 5. css-Regel
- 6. css-Regel
- 7. Vanliga Attribut • color: förgrundsfärg • background: bakgrundsfärg eller bild • font-family: typsnittsfamilj • font-size: storlek på text • font-weight: typsnittstjocklek • font-style: typsnittsstil (kursiverat)
- 8. h1 - tagg
- 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
- 11. Element Id Klass
- 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
- 14. 1. 2. 3.
- 15. Exempel
- 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.
- 20. Specificity Exempel <p class=”info”> Frozen yoghurt är inte <em id=“ice-cream”>mjukglass</em>. </p> p.info #ice-cream { color: red; } p em { color: blue; } #ice-cream { color: green; }
- 21. Layout
- 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
- 23. Wrapper • Centrerar innehåll • <div id=”wrapper”> • margin: 0 auto
- 24. Attributet: Display • Avgör hur elementet ska bete sig • display: inline • display: block • display: inline-block
- 25. Positionering • Float: left, right, both • Clearfix: left, right, both • Position: absolute, fixed, relative, static
- 26. Box Model