föreläsning om css
TRANSCRIPT
CSS
RECAP!
Vad är css?• Stilmallsspråk (Cascading Style Sheets)
• Ger utseende till ett HTML-dokument
• Möjlighet till anpassning för olika enheter
• VersionerCSS 1 - 1996CSS 2 - 1998CSS 2.1 - 2011CSS 3 - 2012
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
css-Regel
css-Regel
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)
h1 - tagg
Attribut - exempel
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
Element
Id
Klass
<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
Olika sätt att inkludera CSS1. 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
1.
2.
3.
Exempel
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
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
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
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.
SpecificityExempel
<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; }
Layout
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
Wrapper• Centrerar innehåll
• <div id=”wrapper”>
• margin: 0 auto
Attributet: Display• Avgör hur elementet ska bete sig
• display: inline
• display: block
• display: inline-block
Positionering• Float: left, right, both
• Clearfix: left, right, both
• Position: absolute, fixed, relative, static
Box Model