2. Dagens agenda
• Vad är CSS?!
• Varför ska vi använda CSS?!
• Hur använder vi CSS?!
• Vilka attribut finns det?!
• Praktisk genomgång
3. Vad är CSS?
• CSS står för Cascading Style Sheet!
• Introducerades 1994 i webbläsaren Argo!
• Styr utseendet på HTML- & XML-dokument!
• Ett annat kodspråk än HTML!
• CSS 3 är under utveckling (föregångare: CSS 2.1)!
• Filändelse är .css!
• LESS & SASS
4. Varför använda CSS?
• Förändra hela webbplatsens utseende på ett ställe!
• Hålla isär innehåll och utseende, designern behöver inte ”pilla” i
programmerarnas kod och vice versa!
• Förändra webbplatsens utseende och struktur efter enhet!
• Olika CSS:er till respektive enhet (mobil, dator, skrivare o.s.v.)
5. Hur gör man?
• Jättelätt: 3 saker krävs för att skriva CSS-kod!
• Selektor - kopplar ihop HTML-elment med CSS!
• Finns tre olika (typ, id eller class)!
• Attribut - anger egenskap!
• Värde & eventuellt även enhet; anger egenskapens mängd, typ
eller funktion!
• /* kommentar */
selector
}
h1 {color: #000;}
}
property
value } ⎫
⎬
⎭
declaration
6. Hur gör man?
• Det går att använda flera selektorer för att påverka flera element
samtidigt!
• Det går att använda flera attribut och värden för en selektor!
• Längre kod längre laddtid
h2, h1 {
color: #FFF;
background-color: #000
}
7. 3 typer av CSS
• Inline - i taggen!
• Högst i hierarkin !
• Påverkar bara den aktuella taggen!
• Embedded - i head!
• Vinner över externt!
• Påverkar hela HTML-dokumentet!
• Externt CSS-dokument - i egen fil!
• Lägst i hierarkin!
• Påverkar alla HTML-dokument!
• Länkas in i head
8.
9.
10.
11. Id och klasser
• Använd som selektorer!
• Döp HTML-element, tänk på att använda logisk benämning!
• id är unikt och klasser är återkommande!
• I CSS: id = # class = .!
• Ett element kan ha flera klasser och id:s!
• <div class=”blog title first-page”>
12.
13. Avancerade selektorer
• p, i {attribut: värde enhet;}!
• p i {attribut: värde enhet;}!
• p > i {attribut: värde enhet;}!
• p + i {attribut: värde enhet}!
• a:hover {attribut: värde enhet;}!
• div:not(#footer) {attribut: värde enhet;}!
• * {attribut: värde enhet;}!
• ul li:first-child {margin: 0px;}!
• li:nth-child(2) {background-color: blue}
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
14. Attribut: värde & enheter
• color = förgrundsfärg anges i rgb(255, 255, 255) eller Hexadecimal
(#3f3f3f3f)!
• h1 {color: #000000;}!
• background-color = bakgrundsfärg!
• body {background-color: rgb(255, 0, 0);}!
• font-family = font stack = typsnittsfamilj!
• p {font-family: ”Times New Roman”, Georgia, Serif}!
• Fnuttar används vid mellanrum i namnet!
• font-size = storlek på text!
• p {font-size: 16px;} anges med pixlar (px), em eller punkter (pt)
15. Attribut: värde & enheter
• width = elementens bredd anges i pixlar (px)!
• p {width: 150px;}!
• line-height = radavstånd, anges i procent!
• body {line-height: 150%;}!
• border = ram ange både storlek, färg och typ!
• div {border: 1px solid #000000;}!
• float = svävande eller flytande objekt!
• img {float: left eller right}
http://meiert.com/en/indices/css-properties/
18. Rätt svar
1. #header!
2. .post!
3. h1 / .heading / h1.heading / content heading!
4. body {background-color: #färgkod}!
5. address {font-size: 16px}!
6. Glömt att länk in CSS:en
19. Sammanfattning
• Vad är CSS?!
• Vilka tre sätt kan ni implementera CSS på?!
• Vad innebär följande CSS-kod:!
• a img {border-style: none;}!
• Stämmer följande uttryck:!
• Hashtag, # används för att påverka <div id=”menu”>
och punkt, . används för att påverka <h2>
20. Till nästa föreläsning
Läs sidorna 108 - 200 i Användbarhetsboken
– Strukturer och logisk indelning –
