HTML 2 & CSS

Dagens agenda

• Vad är CSS?!

• Varför ska vi använda CSS?!

• Hur använder vi CSS?!

• Vilka attribut finns det?!

• Praktisk genomgång

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

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.)

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 */

h1 {color: #000;}}selector

property

}value}

⎫ ⎬ ⎭

declaration

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 }

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

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”>

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

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)

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/

CSS 3

• Ej färdigutvecklat!

• Nya attribut:!

• Rundande hörn!

• Gradienter!

• Skuggor!

• Övergångar!

• Animationer!

• Omforma!

• CSS 3 - generatorer

http://www.creativebloq.com/css3/animation-with-css3-712437

Praktisk genomgång

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

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>

Till nästa föreläsning

Läs sidorna 108 - 200 i Användbarhetsboken – Strukturer och logisk indelning –