Embed Size (px)
Citation preview
F03 – Stilmallar Föreläsning 3, HT2013 Stilmallar
Kurser: Webbteknisk introduktion 1IK415 Johan Leitet
F03 – Stilmallar Dagens agenda
• CSS, Stilmallar • Lokala, interna, externa • Mediatyper • Selektorer
- Taggselektorer - Klasselektorer - ID-selektorer
• Egenskapsarv • Pseudo-klasser och –element • Kombinatorer • Specificitet • Ramverk • Preprocessors
Stilmallar
Stilmallar på vår sida
o Lokala stilar (inline styles) o Inbäddade stilmallar (embedded styles) o Externa stilmallar (external styles)
• Webbläsarens inbyggda stilmall • Användarspecifika ändringar • Våra, utvecklarens, stilmallar:
Dessa kan vi påverka
Länka in CSS-regler
<p style="color:#6C9; text-align:center"> Centrerad, blåaktig text </p>
<head> …
<style type="text/css"> p { color: red; } </style> … </head>
<head> <title>Sida med stilmallar</title>
<link rel="stylesheet" type="text/css" href="basic.css" /> … </head>
Lokala stilmallar Inline styles
Inbäddade stilmallar Embedded styles
Externa stilmallar External styles
Media
Mediatyper <body> <head> <link rel="stylesheet" media="print" href="print.css" /> <title>Våra produkter</title> </head> …
Stilmallen "print.css" kommer bara att laddas då dokumentet skrivs ut. Vi har bland andra tillgång till: all, handheld, print, projection, speech, tv, screen
default
Syntax selektor { egenskap: värde; } selektor { egenskap: värde; egenskap: värde; egenskap: värde; }
h1 { color: #CDF; background-color: #9FF; }
Testrubrik
Skrivs antingen mellan <style></style> eller i en inlänkad css-fil
Exempel:
"regel"
“Hämta alla h1-element och ändra färgen till #CDF och bakgrundsfärgen till #9FF”
Selektorer
selektor { egenskap: värde; } selektor { egenskap: värde; egenskap: värde; egenskap: värde; }
taggselektorer klassvis
via ID
Taggselektor h1 { egenskap: värde; }
h1 em { egenskap: värde; }
<p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong>… </p>
p em strong { egenskap: värde; }
Klasselektor
.avatar { egenskap: värde; }
<p class="avatar">…</p> … <p class="avatar">…</p> … <div class="avatar">…</div> … <p class="avatar">…</p>
p.avatar { egenskap: värde; }
<p class="avatar">…</p> … <p class="avatar">…</p> … <div class="avatar">…</div> … <p class="avatar">…</p>
.
Klasselektor
.avatar { egenskap: värde; } .active { egenskap: värde; }
<p class="avatar">…</p> … <p class="avatar active">…</p> … <div class="avatar active">…</div> … <p class="avatar">…</p>
.
ID-selektor
#content { egenskap: värde; }
<div id="content"> … </div> … <div id="footer">…</div>
#
På en och samma sida får det aldrig förekomma att två id-attribut har samma värde!
Egenskapsarv (property inheritance) Vissa egenskaper, satta på en förälder ärvs ned till dess barnnoder.
p { color: red; }
<p> Detta är ett <em><strong>exempel</strong></em> på <em>egenskapsarv</em>. </p>
Detta är ett exempel på egenskapsarv.
Alla egenskaper ärvs dock inte ned.
Referens för HTML och CSS
h"ps://developer.mozilla.org/
Pseudoklasser
a:link { egenskap: värde; } a:visited { egenskap: värde; } a:focus { egenskap: värde; } a:hover { egenskap: värde; } a:active { egenskap: värde; }
orörd
besökt
fokus
muspekare över länken
aktiv, precis klickad
div p:first-child { egenskap: värde; }
Alla p-taggar som är förstabarn och har en förfader i form av div
<div> <p>Jag är första barn.</p> <ul> <li><p>Jag också!</p></li> </ul> <p>Inte jag :(</p> </div> <p>Inte jag heller :(</p>
Pseudoelement p:first-letter { font-size: 2em; }
Första bokstaven är större <p>Första bokstaven är större</p>
p:first-line { font-weight: bold; } Första textraden som webbläsaren rendrerar blir fetmarkerad
<p>Första textraden som webbläsaren rendrerar blir fetmarkerad</p>
Första textraden som webbläsaren rendrerar blir fetmarkerad I CSS2 finns även :before och :after
som kan användas för att dynamiskt lägga in innehåll före eller efter ett element.
Kombinatorer
li + li { color: red; } <ul> <li>Ett</li> <li>Två</li> <li>Tre</li> </ul>
• Ett • Två • Tre
"Direkt syskon-väljare" (A+B)
<p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong>… </p>
p em strong { egenskap: värde; }
Ättling (A B)
<p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong>… </p>
p > strong { egenskap: värde; }
Barn (A>B)
Gruppering av selektorer Önskas liknande egenskaper på flera element så grupperar man dessa:
h1,h2,h3 { font-family: verdana, san-serif; color: #6CF; } h2 { text-decoration: underline; }
Rubriknivå 1 Rubriknivå 2 Rubriknivå 3
Grupperingen sker genom att
separera med ,
p.red strong.hidden, #content p:first-line { font-family: verdana, san-serif; color: #6CF; }
Det går bra att både gruppera och
kombinera selektorerna
Läsbar CSS Personliga stilar för att skriva CSS: #content p { font-size: 1.1em; color: #4D83A4; margin-left: 10px; }
#content { float: left; font-size: 1.6em; } #content p { color: #4D83A4; font-size: 1.1em; } #content p:first-letter { font-size: 1.7em; }
#content { font-size : 1.6em; float : left; margin-right: left; }
Kommentarer
/* Layout Using: Two columns floating layout Total width: 250px */ #content { margin-right: 250px; width: 600px; float: left; } /* Main Menu */ ol li { float: left; }
Kommentarerna
känns igen från t.ex.
C#, PHP etc.
// stöds inte!
Specificity Olika selektorer har olika "vikt". Ju högre vikt,
desto högre prioritet.
h"p://coding.smashingmagazine.com/2007/07/27/css-‐specificity-‐things-‐you-‐should-‐know/
p#firstptagg { color: yellow; } p.content { color: green; } p { color: red; } p { color: blue; }
id-elektorer (vikt 100) har högst prioritet följt av klasselektorer (vikt 10) och lägst prioritet har övriga selektorer (vikt 1)
101 11
1 1+senast angiven
Rekommenderad läsning
Ordningen spelar roll <head> …
<link rel="stylesheet" href="basic.css" /> <style> h3 { text-align: right; font-size: 20px; } p { color: blue; } </style> </head> <body> <h3 style="font-size: 10px">Rubrik</h3> <p class="intro">Lite text…</p> </body>
h3 { color: red; text-align: left; font-size: 8px; } p.intro { color: silver; }
Rubrik Lite text...
Rubrik Lite text...
10px
h3 { color: red; text-align: right; font-size: 10px; } p.intro { color: silver; }
Effektiv stilmall: basic.css
Vad händer om man byter plats på <style> och <link>?
Vad? Typsnitt/Text Storlekar, avstånd, typsnitt
Grafik Färger, ramar, skuggor, effekter, bakgrundsbilder/sprites
Layout Boxar, positionering, layoutmodeller
Animationer Transformationer, transitioner
CSS1 -> CSS2 -> CSS3
h"p://www.w3.org/Style/CSS/current-‐work
• Selektorer • Multi-column layout • Media Queries • Color • Text • Fonts • Grid Layout • …
CSS3 h"p://www.paulrhayes.com/experiments/cube-‐3d/
h"p://beta.theexpressiveweb.com
h"p://caniuse.com/
Webbläsarspecifika prefix
#someid { -webkit-transition: opacity 13s; -moz-transition: opacity 13s; -o-transition: opacity 13s; -ms-transition: opacity 13s; transition: opacity 13s; }
Reset CSS * {margin:0; padding:0}
Att använda * är inget man rekommenderar då det tar hårt på webbläsaren att gå igenom samtliga element på webbsidan och nollställa dess marginaler och padding. Bättre är då att specificera exakt vilka element som ska nollställas. Enklast är att använda något av alla de nollställningsstilmallar som finns att hitta på nätet.
CSS Global Styles Re
set av Kyle Neath
CSS Global Reset av Chris.an Montoya
CSS Reset Rel
oaded av Eric
Meyer
Ramverk
• Ökad produktivitet • Du undviker vanliga misstag • Du arbetar in en standard för namngivning • Förenklar samarbete • Du slipper tänka på webbläsarkompabilitet • Du får ren och välstrukturerad kod
Fördelar • Tar tid att lära sig • Riskerar att ärva fel och buggar • Du mister genuin kunskap om CSS • Källkod som innehåller mycket onödig kod • Du riskerar att fastna i gamla hjulspår
Nackdelar
Källa: h6p://www.smashingmagazine.com/2007/09/21/css-‐frameworks-‐css-‐reset-‐design-‐from-‐scratch/
Preprocessors
lesscss.org
sass-‐lang.com
learnboost.github.io/stylus/
• Variabler • Nästling • Mixins • Arv • Operatorer • ….
h6p://net.tutsplus.com/tutorials/html-‐css-‐techniques/sass-‐vs-‐less-‐vs-‐stylus-‐a-‐preprocessor-‐shootout/
