![Page 1: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/1.jpg)
F10 – Mer CSS
Dagens agenda
• Stila formulär
• CSS-genererat innehåll
• Mediatyper
• Utskrift
• Negativa marginaler
• Sprites
• Gridbaserade layouter
• Ramverk
![Page 2: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/2.jpg)
Formulär
<br />
![Page 3: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/3.jpg)
Prydliga formulär
#cform { width: 500px;}
#cform label {
width:140px;
text-align:right;
display:block;
float:left;
padding-right:10px;
clear:left;
}
#cform input, #cform textarea, #cform select
{
width:300px;
margin-bottom:20px;
}
#cform textarea { height:100px; }
#cform .checkbox { width:auto; }
![Page 4: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/4.jpg)
CSS-genererat innehåll Vi har möjlighet att lägga till innehåll till vårt HTML-dokument med CSS. (Obs!
Hamnar inte i DOM)
#mainnav li:after {
content: "…";
}
#divtwo:before {
content:"";
height:5px;
width:5px;
background:red;
}
content: url(pin.png);
Stöds först från och
med IE8
![Page 5: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/5.jpg)
CSS-genererat innehåll
http://nicolasgallagher.com/pure-css-gui-icons/demo/#non
http://css-tricks.com/9516-pseudo-element-roundup/
![Page 6: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/6.jpg)
Media
![Page 7: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/7.jpg)
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
![Page 8: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/8.jpg)
Flera mediatyper samtidigt
<body>
<head>
<link rel="stylesheet" href="basic.css" />
<link rel="stylesheet" media="screen" href="screen.css" />
<link rel="stylesheet" media="print" href="print.css" />
…
</head>
…
Alla enheter
Vid utskrift kommer nu basic.css att
användas tillsammans med print.css
Användare vid en vanlig skärm kommer
att få basic.css att användas
tillsammans med screen.css
?
![Page 9: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/9.jpg)
@media-direktivet <body>
<head>
<link rel="stylesheet" href="basic.css" />
…
</head>
…
p {
color: red;
}
#content {
float:left;
}
@media print
p {
color:black;
}
@media screen
…
@media print
…
@media handheld
…
![Page 10: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/10.jpg)
Tänk på vid utskrift
http://alistapart.com
#mainnav {
display: none;
}
…
![Page 11: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/11.jpg)
Länkar och utskrift
Hur göra med länkar vid utskrift?
@media print
#content a:after {
content: " (" attr(href) ")";
}
![Page 12: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/12.jpg)
Marginaler
margin:5px 10px 30px 10px;
alternativt:
margin-top:5px;
margin-right:10px
margin-bottom:30px;
margin-left:10px;
![Page 13: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/13.jpg)
Negativa marginaler margin-right:-10px;
margin-left:-10px;
margin-bottom:-10px;
margin-top:-10px;
![Page 14: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/14.jpg)
Layout med CSS, del 2 body
div #container
• start • sida 1
div #wrapper
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum mi quis ligula pretium sed rutrum tortor posuere. Vivamus aliquet velit a mauris vestibulum commodo. Etiam cursus suscipit lorem, vel mattis metus facilisis ac. Proin gravida lacinia aliquet. Mauris arcu sem, tempor id gravida quis, lacinia non mauris. Etiam ac ante ligula, a tincidunt odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tristique euismod ipsum, mattis venenatis odio condimentum ac.
div #content
div #sidebar
div #footer
div #top
div #navigation
![Page 15: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/15.jpg)
Layouter med CSS – en bra grund
![Page 16: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/16.jpg)
Exempel på klassiska layouter
![Page 17: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/17.jpg)
Negativa marginaler
Problem:
ordningen i HTML-
koden
<div id="wrapper">
<div id="content">
<p>…</p>
</div>
</div>
+
negativa marginaler
Lösning:
![Page 18: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/18.jpg)
Lösningen 1
float:left
width:150px
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
![Page 19: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/19.jpg)
Lösningen 2
float:left
width:150px
margin-right:-150px
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
![Page 20: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/20.jpg)
Lösningen 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
margin-left:150px;
float:left
width:150px
margin-right:-150px
![Page 21: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/21.jpg)
Lösningen 4
width:160px;
float:right;
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
margin-left:150px;
float:left
width:150px
margin-right:-150px
![Page 22: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/22.jpg)
Lösningen 5
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
margin-left:150px;
margin-right:160px;
float:left
width:150px
margin-right:-150px
width:160px;
float:right;
![Page 23: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/23.jpg)
Lösningen 6
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
#wrapper
width:100%
float:left
margin-right:-180px
margin-left:150px;
margin-right:160px;
float:left
width:150px
margin-right:-150px
width:160px;
float:right;
![Page 24: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/24.jpg)
Lösningen 7
Navigation
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
Sidebar
Se demo
#7
![Page 25: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/25.jpg)
Lösningen 7
Navigation
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
Sidebar
Se demo
#7
![Page 26: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/26.jpg)
min/max width/height
Stöds först från och
med IE7
egenskaper
min-width
min-height
max-height
min-height
min-width max-width
#container {
max-width: 1480px;
min-width: 960px;
}
![Page 27: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/27.jpg)
Sprites
![Page 28: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/28.jpg)
CSS Sprites
![Page 29: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/29.jpg)
CSS Sprites socialsprite.png
#fbIcon #fbIcon:hover
Se demo
![Page 30: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/30.jpg)
CSS Sprites
Fördelar
• Minskad totalstorlek på bilder
• Färre HTTP-anrop till servern
• Färre HTTP-anrop från klienten
• Vi riskerar inte ”flickering” • Ovana utvecklare riskerar att lägga bilder som
hör hemma i HTML-koden som CSS Sprites.
• Jobbigare att underhålla stora CSS Sprites
• Kan bli jobbigare CSS att koda.
Nackdelar
![Page 31: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/31.jpg)
Gridbaserade layouter Bygger på att man försöker arbeta
med kolumner i multipler om 3
eller 4.
Fokuserar på kolumner, men rader
kan användas i viss utsträckning
Ger ett proffsigare intryck och ofta
per automatik en snyggare och
behagligare sida att titta på.
Bygger på kolumner med
marginaler.
![Page 32: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/32.jpg)
Gridbaserade layouter
![Page 33: F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 · F10 – Mer CSS Dagens agenda • Stila formulär • CSS-genererat innehåll •](https://reader033.vdocuments.site/reader033/viewer/2022050210/5f5d0f5396492a22512f67ac/html5/thumbnails/33.jpg)
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: http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/