View
113
Download
2
Category
Preview:
Citation preview
Dag 2: HTML & CSS
Mål för idag• Förstå vad en webbläsare gör
• Kunna bygga en enkel HTML-sida
• Förstå klasser och id:n
• Kunna style:a HTML-sidan med CSS
• Förstå selectors
• Vad en CSS-reset är
• Kunna göra ett par enkla CSS-layouter
Webbläsare är olika
• Olika webbläsare på dator och tablet/telefon
• Olika webbläsare på olika operativsystem
• Olika versioner av webbläsare stödjer olika funktioner
Hur hanterar vi det?
• Testa i olika webbläsare (installera alla de stora)
• Försök följa standarder, specifikationer…
• Använd en “reset”!
Google is your friend!
HTML
filnamn.html<!doctype html><html>
<head><title>Testsajt!</title><meta charset="utf-8">
</head><body>
<h1>Hej!</h1><p>
Här kommer en <a href="http://google.com">Länk till Google</a>.
</p></body>
</html>
filnamn.html
<!doctype html><html><head><title>Testsajt!</title><meta charset="utf-8"></head><body><h1>Hej!</h1><p>Här kommer en <a href="http://google.com">Länk till Google</a>.</p></body></html>
filnamn.html<!doctype html><html>
<head><title>Testsajt!</title><meta charset="utf-8">
</head><body>
<h1>Hej!</h1><p>
Här kommer en <a href="http://google.com">Länk till Google</a>.
</p></body>
</html>
Klasser och ID:n
• Klass: <div class="quote">...</div>
• Id: <div id="emil">...</div>
• Ett element kan ha flera klasser
• Flera element kan ha samma klass
• Klasser vanligast, “man vet aldrig när man ska använda något igen”
• Klass: <div class="quote important">...</div>
Finns massor med taggar, Googla istället!
CSS
style.cssbody {
background: #EEEEEE;font: 12pt/1.4 "Helvetica Neue", "Helvetica", serif;max-width: 600px;margin: 0 auto;
}h1 {
color: #FF9999;}a {
color: #FF3333;}p {
border-bottom: 1px solid #FF9999;padding-bottom: 5px;
}
style.cssbody {
background: #EEEEEE;font: 12pt/1.4 "Helvetica Neue", "Helvetica", serif;max-width: 600px;margin: 0 auto;
}h1 {
color: #FF9999;}a {
color: #FF3333;}p {
border-bottom: 1px solid #FF9999;padding-bottom: 5px;
}
Box model
style.cssbody {
background: #EEEEEE;font: 12pt/1.4 "Helvetica Neue", "Helvetica", serif;max-width: 600px;margin: 0 auto;
}h1 {
color: #FF9999;}a {
color: #FF3333;}p {
border-bottom: 1px solid #FF9999;padding-bottom: 5px;
}
style.css
body{background: #EEEEEE;font: 12pt/1.4 "Helvetica Neue", "Helvetica", serif;max-width: 600px;margin: 0 auto;
}h1{color: #FF9999}a{color: #FF3333}p{
border-bottom: 1px solid #FF9999;padding-bottom: 5px;
}
Hur koppla ihop?
<!doctype html><html>
<head><title>Testsajt!</title><meta charset="utf-8"><link rel="stylesheet"
href="style.css"></head>…
De olika delarna
selector {property: value;property: value value;property: ”value”;property: value;
}
Selectors
tag { … } body { … } <body>...</body>
.class { … } .quote { … } <div class="quote">...
#id { … } #emil { … } <img id="emil" src="...">
Kombinera selectors
img#emil { … } img.mugshot { … }
.quote p { … } p a { … }
a, p { … } .pic, .quote { … }
”CSS-reset”
Normalize.css
Hur gör man ”layout”?
• Finns massor av olika metoder
• Beror på vilka webbläsare man måste stödja: http://caniuse.com/#search=layout
• Mitt tips: ”display: table”
HTML för tabell
<table><tr><td>Etta</td><td>Tvåa</td><td>Trea</td></tr><tr><td>Etta</td><td>Tvåa</td><td>Trea</td></tr><tr><td>Etta</td><td>Tvåa</td><td>Trea</td></tr></table>
Visas såhär…
Etta Tvåa Trea
Etta Tvåa Trea
Etta Tvåa Trea
En rad + högre höjd
Etta Tvåa Trea
Ändra texten lite…Navigation Collaboratively administrate
empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
Sidebar
Problem: Mobilen…Navigation
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
Sidebar
Som en tabell…
<table><tr>
<td>Etta</td><td>Tvåa</td><td>Trea</td>
</tr></table>
Med klasser
<div class="container"><div class="row">
<div class="column">Etta</div><div class="column">Tvåa</div><div class="column">Trea</div>
</div></div>
.container { display: table; width: 100%;
}.row { display: table-row; }.column { display: table-cell; }
<div class="container"><div class="row">
<div class="column">Etta</div><div class="column">Tvåa</div><div class="column">Trea</div>
</div></div>
Bara kolumner när det finns plats…
@media only screen and (min-width: 321px) {.container {
display: table;width: 100%;
}.row { display: table-row; }.column { display: table-cell; }
}
<div class="header">Sidhuvud
</div><div class="container">
<div class="row"><div class="column">Etta</div><div class="column">Tvåa</div><div class="column">Trea</div>
</div></div><div class="footer">
Sidfot</div>
Centrerad layouthtml, body, .container {
height: 100%;margin: 0;
}.container {
display: table;width: 100%;
}.row { display: table-row; }.column {
display: table-cell;vertical-align: middle;
}.wrapper {
border: 1px solid black;margin: 0 auto;width: 200px;
}
<div class="container"><div class="row">
<div class="column"><div class="wrapper">
<h1>Hej!</h1><p>... på dig</p>
</div></div>
</div></div>
Recommended