![Page 1: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/1.jpg)
CSSTNMK30 - Elektronisk publicering
![Page 2: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/2.jpg)
Dagens föreläsningCSS
Layout med CSS
![Page 3: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/3.jpg)
Vad är CSS?Cascading Style Sheets (CSS), ett språk som beskriver hur HTML element ska se ut.
Utseende
Layout
Presentation
(HTML beskriver enbart innehållet)
Lätt att byta utseende på en webbsida.
![Page 4: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/4.jpg)
CSS3Började utvecklas ihop med HTML5 av W3C.
Utveckling pågående men flesta (moderna) webbläsare stödjer de nya CSS3 egenskaperna.
Helt bakåtkompatibel.
Indelad i moduler.
![Page 5: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/5.jpg)
CSS3Exempel på (nya) CSS3 egenskaper:
Animationer och transitions
Gradienter: background: linear-gradient(direction, color-stop1, color-stop2, ...);
#grad {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
![Page 6: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/6.jpg)
CSS3Skuggor: text-shadow, eller box-shadow
Reflektioner
Rundade hörn (border-radius)
“Kantbilder”, dvs en bild som linje (border-image)
Multipla bakgrundsbilder (background-image)
Kolumnbaserad layout (grid layout)
![Page 7: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/7.jpg)
CSS syntaxCSS skrivs med gemener
Bindestreck används
Selector = HTML-elementet som ska påverkas
selector { property: value; property: value; }
p { font-family: sans-serif; width: 100%; }
h1 { font-size: 24px; }
![Page 8: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/8.jpg)
CSS kommentarerKommentarer skrivs med /*Kommentaren*/.
Kommentarer går över flera rader.
![Page 9: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/9.jpg)
Var skriva CSS?Inline: i koden i HTML-dokumentet:<h1 style=“text-style: italic;”>Rubrik</h1>
Inlinekoden har prioritet över andra stilregler.
Embedded: i <head> i HTML-dokumentet via <style>-elementet<style type="text/css"> h1 {color: red;} </style>
![Page 10: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/10.jpg)
Var skriva CSS?Extern .css fil: via <link> elementet:<link href="style.css" media="screen" rel="stylesheet" type=“text/css"/>
Semantisk separation, dvs innehåll vs utseende.
Mer flexibelt: CSS kan återanvändas av flera HTML.
HTML kan länka till olika (och flera) CSS.
![Page 11: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/11.jpg)
Länka till CSS<link href=“styles.css" rel="stylesheet" type=“text/css">
link behöver inte avslutas.
href är URLen till stylesheetet.
rel talar om relationen mellan HTML-dokumentet och det länkade dokumentet. Måste anges.
type=“text/css” är inte nödvändigt i HTML5.
<link href=“styles.css" rel="stylesheet">
![Page 12: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/12.jpg)
CascadingEgenskaperna som CSS specificerar “faller i kaskader”, dvs de ärvs och skrivs över i prioritetsordning:
Webbläsarens default-stilmallar
Externa CSS-filer
Interna inbäddade stilar
Inline-stilregler
När flera regler definieras för samma element är det den med högst prioritet som används.
![Page 13: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/13.jpg)
Färger i CSSFör text, ramar etc: color
För bakgrund: background-color
Färgnamn, hexadecimalkod och RGB (+alpha)
Färgnamn: cadetblue;
Hex: #5f9ea0;
RGB: rgb(95,158,160);
RGB + alpha: rgba(95,158,160,0.3);
![Page 14: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/14.jpg)
Färger i CSSHSL: hsl(182,25%,50%);
HSL + alpha: hsla(182,25%,50%,0.3);
Additiv färg
Magenta
Grön
Röd
Gul
Blå
Cyan
Vit
Blå
Gul
Magenta
Röd
Cyan
Grön
Svart
Subtraktiv färg
![Page 15: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/15.jpg)
Mått och enheter%: procent
in: inch, cm: centimeter, mm: millimeter
pt: punkt (1 pt =1/72 inch)
pc: pica (1 pc =12 punkter)
px: pixel (en bildpunkt i skärmen)
![Page 16: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/16.jpg)
Mått och enheterem: 1em = nuvarande fontstorlek, 2em = 2 x fontstorlek osv.
ex: 1 ex = x-höjd av en font (x-höjd≈ höjden på en gemen bokstav)
vw och vh: 1vw = 1/100 av fönsterbredden respektive fönsterhöjden på browsern
![Page 17: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/17.jpg)
CSS font och textCSS font CSS text
font-family text-align
font-size text-decoration
font-style text-indent
font-variant text-transform
font-weight line-height
font word-spacing
@font-face letter-spacing
![Page 18: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/18.jpg)
id och id-selectorAnvänd ett id i HTML-koden för att kunna ge ett (och endast ett) HTML-element annat utseende.
I CSS används #id.<p>Här är ett stycket vanlig text.</p>
<p id=“markering”>Här är ett stycke annorlunda text.</p>
<p>Här är ett stycket vanlig text.</p>
p { color: black; }
#markering { color: red; }
![Page 19: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/19.jpg)
class och class-selectorAnvänd en klass i HTML-koden för att kunna ge flera HTML-element annat utseende.
I CSS används .klassnamn.<p>Här är ett stycket vanlig text.</p>
<p class=“markering”>Här är ett stycke annorlunda text.</p>
<p>Här är ett stycket vanlig text.</p>
<p class=“markering”>Här är mer annorlunda text.</p>
<p>Här är ett stycket vanlig text.</p>
p { color: black; }
.markering { color: red; }
![Page 20: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/20.jpg)
class och class-selectorAnvänd en klass i HTML-koden för att kunna ge flera HTML-element annat utseende.
I CSS används .klassnamn.Kan kombineras med id och andra klasser.
![Page 21: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/21.jpg)
pseudo-classAnvänds för att definiera ett speciell tillstånd av ett HTML-element. Till exempel:
Mouse over
Besökta länkar
Kan kombineras med CSS-klasser.selector:pseudo-class { property:value; }
selector.class:pseudo-class { property:value; }
a:visited { color: red; }
a.listlinks:visited { color: red; }
![Page 22: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/22.jpg)
Andra CSS-selectorsContext-selector:
Sätta stil på nästlade element
Tillämpar CSS-egenskaper bara i element som befinner sig inuti ett annat element
Separeras med mellanslagyttreSelector inreSelector { property:value; }
.menylista li { color: red; font-weight: bold; }
![Page 23: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/23.jpg)
Webblayout med CSSTNMK30 - Elektronisk publicering
![Page 24: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/24.jpg)
LayoutDela upp sidan i sektioner : - Styla element separat från HTML- Avancerade/komplexa-webbsidor
<div>-behållare för innehåll och andra HTML-element - Blockelement, radbrytning före och efter
<span>-behållare för text- Inlineelement, ingen radbrytning före/efter
Viktiga HTML egenskaper för layout: id och class
![Page 25: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/25.jpg)
Boxmodellwidth = margin + border + padding + width…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Visible width = margin + border + padding + width
width
height
marginborder
padding
![Page 26: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/26.jpg)
Semantisk layoutAnvänd div <div id=”header”>
<div id=”nav”>
<div id=”footer”>
<div id=”section”>
<div id=”article”>
<div id=”sidebar”>
![Page 27: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/27.jpg)
Semantisk layout HTML5Semantiska element iHTML5
<header>
<nav>
<footer>
<section>
<article>
<aside>
![Page 28: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/28.jpg)
DokumentflödeBlock element - radbrytning
Inline element - flytande i ordning
width: bestämmer bredden på block- och bild-element.
h1
h1
h2
p text a
textimg
text
![Page 29: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/29.jpg)
Flytande elementLyfts från dokumentets normala flöde och flyttas till vänster/höger.
Underliggande text justerasrunt elementet.
h1
h1
h2
p text a
text
textimgtext
text
img
![Page 30: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/30.jpg)
Positionposition: static - default positionen
position: relative - förskjutet från den statiska positionen
position: absolute - fast inom ett elementet
position: fixed - fast position inom hela webbrowsern
Position bestämmer även top-, bottom-, left-, right-positionen av ett element.
![Page 31: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/31.jpg)
ValideringValidera alltid koden
http://jigsaw.w3.org/css-validator/
Testa i olika webbläsare
![Page 32: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/32.jpg)
Att tänka på - CSSSeparera innehåll från utseende.
Undvik att definiera CSS-information i HTML-dokumentet.
Ange semantiska namn till id och klasser för att bättre förstå koden och komma ihåg vad den gör.
Ange alltid en generisk typsnittsfamilj efter de specifika för att garantera dig sidan kommer att se ungefär samma i olika operativsystem.
Använd CSS-context-selectors istället för att upprepa användning av klassattribut.
Validera CSS för att se till att syntaxen är korrekt.
![Page 33: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/33.jpg)
Inför laborationernaSkriv upp er på labblistorna om ni inte redan har gjort det.
Gå igenom W3schools tutorial för HTML och CSS:http://www.w3schools.com/html/default.asp http://www.w3schools.com/css/
Gå igenom föreläsningsexemplen (och kolla lektionerna)
![Page 34: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/34.jpg)
Länkar till materialKolla på kurswebbsidan
CSS tutorial: http://www.w3schools.com/css/
CSS, wikipedia: http://en.wikipedia.org/wiki/Cascading_Style_Sheets
CSS Selectors: http://www.w3schools.com/cssref/css_selectors.asp
CSS positioning i 10 steg: http://www.barelyfitz.com/screencast/html-training/css/positioning/
![Page 35: CSS - Linköping Universityweber.itn.liu.se/~nikro27/tnmk30-2017/fo2.pdf · 2016. 11. 8. · Använd CSS-context-selectors istället för att upprepa användning av klassattribut](https://reader036.vdocuments.pub/reader036/viewer/2022081616/5febd019ee4a9f56c23409d7/html5/thumbnails/35.jpg)
Dev toolsAnvänd: Chrome, Firefox, Safari
Elements/Inspect: Inspektera DOM och CSS-regler
Console: skriv ut, command line
Sources/Debugger: debugging
Network/Timelines: vilka resurser har laddats och hur lång tid