F03 Stilmallar. Föreläsning 3, HT2014 Stilmallar. Kurser: Webbteknisk introduktion 1IK415. Johan Leitet

Transkript

1 Föreläsning 3, HT2014 Stilmallar F03 Stilmallar Kurser: Webbteknisk introduktion 1IK415 Johan Leitet

2 F03 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Mediatyper Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Ramverk Preprocessors

3 Stilmallar

4 Stilmallar på vår sida Webbläsarens inbyggda stilmall Användarspecifika ändringar Våra, utvecklarens, stilmallar: o Lokala stilar (inline styles) o Inbäddade stilmallar (embedded styles) o Externa stilmallar (external styles) Dessa kan vi påverka

5 Länka in CSS-regler Lokala stilmallar Inline styles <p style="color:#6c9; text-align:center"> Centrerad, blåaktig text </p> Inbäddade stilmallar Embedded styles Externa stilmallar External styles <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>

6 Media

7 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

8 Syntax selektor { egenskap: värde; selektor { egenskap: värde; egenskap: värde; egenskap: värde; "regel" Exempel: h1 { color: #CDF; background-color: #9FF; Testrubrik Skrivs antingen mellan <style></style> eller i en inlänkad css-fil Hämta alla h1-element och ändra färgen till #CDF och bakgrundsfärgen till #9FF

9 Selektorer via ID taggselektorer klassvis selektor { egenskap: värde; selektor { egenskap: värde; egenskap: värde; egenskap: värde;

10 Taggselektor h1 { egenskap: värde; h1 em { egenskap: värde; p em strong { egenskap: värde; <p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong> </p>

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

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

13 ID-selektor # <div id="content"> #content { egenskap: värde; </div> <div id="footer"> </div> På en och samma sida får det aldrig förekomma att två id-attribut har samma värde!

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

15 Referens för HTML och CSS h"ps://developer.mozilla.org/

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

17 Pseudoelement p:first-letter { font-size: 2em; <p>första bokstaven är större</p> Första bokstaven är större p:first-line { font-weight: bold; <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. Första textraden som webbläsaren rendrerar blir fetmarkerad

18 Kombinatorer Ättling (A B) p em strong { egenskap: värde; "Direkt syskon-väljare" (A+B) li + li { color: red; <ul> <li>ett</li> <li>två</li> <li>tre</li> </ul> <p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong> </p> Ett Två Tre Barn (A>B) p > strong { egenskap: värde; <p> Detta är ett <em><strong>exempel</strong></em>. Ytterligare <strong>text</strong> </p>

19 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; Grupperingen sker genom att separera med, Rubriknivå 1 Rubriknivå 2 Rubriknivå 3 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

20 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;

21 Kommentarer /* Layout Using: Two columns floating layout Total width: 250px */ Kommentarerna känns igen från t.ex. C#, PHP etc. // stöds inte! #content { margin-right: 250px; width: 600px; float: left; /* Main Menu */ ol li { float: left;

22 Specificity Olika selektorer har olika "vikt". Ju högre vikt, desto högre prioritet. p#firstptagg { color: yellow; p.content { color: green; p { color: red; p { color: blue; senast angiven id-elektorer (vikt 100) har högst prioritet följt av klasselektorer (vikt 10) och lägst prioritet har övriga selektorer (vikt 1) Rekommenderad läsning h"p://coding.smashingmagazine.com/2007/07/27/css- specificity- things- you- should- know/

23 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; basic.css Rubrik Lite text... Lite text... Effektiv stilmall: Rubrik h3 { color: red; text-align: right; font-size: 10px; 10px p.intro { color: silver; p.intro { color: silver; Vad händer om man byter plats på <style> och <link>?

24 Vad? Typsnitt/Text Storlekar, avstånd, typsnitt Grafik Färger, ramar, skuggor, effekter, bakgrundsbilder/sprites Layout Boxar, positionering, layoutmodeller Animationer Transformationer, transitioner

25 CSS1 -> CSS2 -> CSS3 h"p:// work Selektorer Multi-column layout Media Queries Color Text Fonts Grid Layout

26 CSS3 h"p:// 3d/ h"p://beta.theexpressiveweb.com h"p://caniuse.com/

27 Webbläsarspecifika prefix #someid { -webkit-transition: opacity 13s; -moz-transition: opacity 13s; -o-transition: opacity 13s; -ms-transition: opacity 13s; transition: opacity 13s;

28 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 Reset Reloaded av Eric Meyer CSS Global Reset av Chris.an Montoya CSS Global Styles Reset av Kyle Neath

29 Ramverk Fördelar Nackdelar Ö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 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 Källa: h6p:// frameworks- css- reset- design- from- scratch/

30 Preprocessors lesscss.org learnboost.github.io/stylus/ Variabler Nästling Mixins Arv Operatorer. sass- lang.com gem install sass h6p://net.tutsplus.com/tutorials/html- css- techniques/sass- vs- less- vs- stylus- a- preprocessor- shootout/

31 Demo CSS - Inlänkning johan.leitet.se

32 Lokala stilar Fördelar: Enkelt och smidigt Nackdelar: Mycket svårt att underhålla Blandar upp innehåll och presentation Alla stilmallar finns inte på samma ställe Återupprepning av kod <p style="color:#6c9; text-align:center"> Centrerad, blåaktig text </p> Undvik för allt annat än testsyfte, och vissa specialfall Centrerad, blåaktig text

33 Interna stilmallar <head> <style type="text/css"> p { color: red; </style> </head> "text/css" default. Behöver inte anges Använd enbart för sidspecifika avvikelser, om än då

34 Externa stilmallar Fördelar: Lätt att ändra stilmall för flera sidor samtidigt Du får ett enhetligt utseende på sajten <head> <title>sida med stilmallar</title> <link rel="stylesheet" type="text/css" href="basic.css" /> </head> Behöver inte anges i HTML5 Filändelse.css Använd denna metod uteslutande

35 @import <head> <style url( style.css ); </style> </head> Eller i en url( style.css url( style-layout.css );

36 Demo CSS - Pseudoklasser johan.leitet.se

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

38 Källa: h"ps://developer.mozilla.org/en- US/docs/Web/CSS/Pseudo- classes

39 Demo CSS Typsnitt och johan.leitet.se

40 Text serif sans-serif Källa: Smashing Magazine (

41 Font Typsnitt: h1 { font-family: "Helvetica", "Arial", sans-serif; Storlek: h1 { font-size: 1.5em; Allmän fontfamilj: serif sans-serif cursive fantasy monospace Relativa storlekar: em, 120%, smaller, larger... 1em ofta lika med 16px Absoluta storlekar: px, pt Källa: Smashing Magazine (

42 em vs. px Default i webbläsarna: 1em == 12pt == 16px == 100% målstorlek / kontextstorlek = faktor body { font-size: 100%; /* 16px */... h2 { font-size: 1.25em; /* 20px/16px = 1.25 */

43 Kursiv text: Font h1 { font-style: italic; /* normal, oblique */ Fet text: h1 { font-weight: bold; /* normal, , lighter */ TEXT MED VERSALA SMÅ BOKSTÄVER: h1 { font-variant: small-caps; /* normal */ font: h1 { font: style variant weight size/line-height family; h1 { font: italic bold 0.8em/110% "Georgia", serif;

44 Text Radavstånd: h1 { line-height: 120%; /* normal, %, px, pt */ Text-justering h1 { text-align: right; /* left, justify, center.. */ Textdekoration h1 { text-decoration: underline; /* line-through...*/ Texttransformering h1 { text-transform: uppercase; /* none, capitalize, lowercase */ Inte radbryta blanksteg: h1 { white-space: nowrap; /* normal, pre */ letter-spacing word-spacing, text-indent...

45 Georgia, Arial Exempel Ljus bakgrund Lorem ipsum dolor sit!! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam voluptua. Rubrikstorlek 18-29px ~2 * brödtextstorlek Brödtext 12-14px ~1/2 * rubrikstorlek Linjehöjd ~1.5 * brödtextstorlek Bredd ~25 * linjehöjden Källa: Smashing Magazine ( Georgia, Arial, Verdana Lucida Grande

46 Fonter och text

47 { font-family: Delicious; src: url('delicious-roman.otf'); p { font-family: Delicious, sans-serif

48 Format EOT Embedded Open Type TTF TrueType Fonts OTF OpenType Fonts WOFF Web Open Font Family (IE9+)

49 Google web fonts api

50 Text-effekter Text-shadow h1 { text-shadow: #6374AB 20px -12px 2px; Glowing

51 Flerkolumnslayout

52 Multiple Columns #content { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; text-align: justify; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus, diam ac venenatis egestas, lacus tortor posuere dolor, placerat interdum quam ante ac neque. Donec faucibus ligula in erat laoreet tristique blandit est dictum. Nulla rhoncus fringilla arcu, in sollicitudin nunc congue non. Maecenas sed erat eget sapien pellentesque fermentum. In porta, neque sed feugiat pharetra, sem dolor faucibus neque, ac porttitor nibh quam nec velit. Pellentesque fermentum sagittis libero, quis sodales lacus convallis sit amet. Duis ultrices leo ut mi ullamcorper id scelerisque purus gravida. Cras arcu urna, bibendum sit amet rhoncus nec, accumsan eget leo. Vivamus interdum, lectus vitae imperdiet aliquet, sem sapien elementum sem, sit amet eleifend augue urna quis nisl. Fusce quam sapien, ornare non vehicula sit amet, vehicula in turpis. Nunc non porttitor eros. Donec consectetur enim id lectus fermentum iaculis. Vivamus pulvinar malesuada turpis, sed cursus ante convallis eget. Aenean pretium nisi sed ante congue lobortis. Duis sagittis, tellus at euismod molestie, elit purus placerat urna, ac mattis tellus nunc nec arcu. Quisque magna sapien, aliquam ac gravida quis, placerat et nisi. Maecenas mollis pulvinar ipsum, egestas pellentesque nisi blandit a. Praesent elementum semper dolor. Aliquam rhoncus viverra facilisis. Integer at sem sed nisi aliquet molestie a non nulla. Cras ultricies magna at nisl tristique eget lobortis sapien fringilla. Nunc nisl felis, interdum ac volutpat vitae, semper ac enim. Donec ante massa, fringilla sit amet

53 @leitet johan.leitet.se Demo CSS Färger

54 Färg Det finns 17 fördefinierade färger (enligt standarden): = Navy = # = rgb(0, 0, 128) Black # (0,0,0) Green # (0,128,0) Silver #C0C0C0 (192,192,192) Lime #00FF00 (0,255,0) Gray # (128,128,128) Olive # (128,128,0) White #FFFFFF (255,255,255) Orange #FFA500 (255,165,0) Maroon #80000 (128,0,0) Yellow #FFFF00 (255,255,0) Red #FF0000 (255,0,0) Navy # (0,0,128) Purple # (128,0,128) Blue #0000FF (0,0,255) Fuchsia #FF00FF (255,0,255) Teal # (0,128,128) Aqua #00FFFF (0,255,255)

55 Förgrund/bakgrund Förgrundsfärg: p { color: navy; a { color: #000080; div { color: rgb(241, 23, 87); #top { color: #6C3; /* Samma som #66CC33 */.aside { color: #FFF; /* Vitt */ a:hover { color: #000; /* Svart */ Bakgrundsfärg: p { background-color: #9FC; a { background-color: transparent;

56 Färger

57 Färger rgb rgba rgb + alpha hsl Hue Saturation Lightness hsla hsl + alpha

58 Alpha-värden background-color: rgba(255, 155, 111, 0.5);

59 Opacity opacity: 0.4;

60 Gradienter Linjär gradient Radial gradient It's a mess!

61 Demo CSS Ramar och johan.leitet.se

62 Borders div { border-style: dashed; border-color: #0C9; border-width: 5px; div { border-bottom-style: solid; border-bottom-color: #0C9; border-bottom-width: 5px; Exempel div { border: 5px dashed #0C9; Exempel div { border-bottom: 5px solid #0C9; none, dashed, dotted, double, groove, ridge, solid, inset, outset

63 Bakgrunder och ramar

64 Border-radius #box1 { width: 200px; height: 100px; background: #97B48F; #box2 { width: 100px; height: 100px; background: #7D1616; border-radius: 15px; border-radius: 50px;

65 Border-radius

66 #box1 { width: 200px; height: 100px; background: #97B48F; Box shadow -moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px; box-shadow: #333 3px 3px 4px; h"p:// css3- background /#the- box- shadow

67 Demo CSS johan.leitet.se

68 Bakgrundsbilder Händelser v32 Händelser v32 <h1 class="note">händelser v32</h1> h1.note { background-image: url(note.png); background-repeat: no-repeat; /* repeat, repeat-x, repeat-y */ background-position: top left; /* right, bottom, center */ text-indent: 60px; Adress relativ css-filens plassering p { background: #9FC url(note.png) no-repeat top left; color image repeat position

69 Border-images

70 Backgrounds background-size: width height; %, contain, cover background-repeat: round space; background-origin: padding-box border-box content-box;

71 Multiple backgrounds #box1 { background-image: url(fish.png), url(picture.jpg); background-repeat: no-repeat, repeat; background-position: 440px 180px, 0 0;

72 Demo CSS johan.leitet.se

73 Boxar h1 De"a är en box med text p div margin padding De"a är en box med text border width?

74 Boxens bredd? De"a är en box med text 400px 90px 10px width: 400px div { width: 400px; height: 40px;

75 Margin, padding Padding: div { padding-top: 10px; padding-right: 5px; padding-bottom: 20px; padding-left: 4px; Margin: div { margin-top: 10px; h1 { margin-left: auto; margin-right: auto; width:50%; div { padding: 10px 5px 20px 4px; div { margin: 10px 5px 20px 4px; h1 div

76 Overflow div { width: 200px; height: 100px; overflow: visible; div { width: 200px; height: 100px; overflow: hidden; default Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum div { width: 200px; height: 100px; overflow: scroll; /* auto */ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

77 Synlighet #two { display: none; Före <div id="one"> <div id="two"> <div id="three"> Efter <div id="one"> <div id="three"> #two { visibility: hidden; <div id="one"> <div id="two"> <div id="three"> <div id="one"> <div id="three">

78 block/inline block inline <a class="menu">.menu { display: block; <a class="menu"> Fler värden finns, exempelvis list-item, table.menu { display: inline;

79 Listor circle disc square ul { border: 1px solid black; border-bottom: none; width: 200px; margin:0; padding:0; li { list-style-type: none; border-bottom: 1px solid black; li a { display: block; padding: 10px; background-color: #9C9; color: #EFE; li a:hover{ color: #9C9; background-color: #EFE;

80 F09 CSS, Layout Föreläsning 9, HT2012 CSS, Layout Kurser: Webbteknisk introduktion 1IK415 Johan Leitet

81 F09 CSS, Layout Dagens agenda Layout med CSS Struktur Float/clear Positionering - Absolut - Relativ - Fixerad

82 Layout med CSS, del 1 top navigaxon content sidebar footer

83 header container navigation content footer

84 En bra början <body> <div id="container"> <div id="top"> <h1>våra produkter</h1> </div> <div id="navigation"> <ul> <li><a href="#">start</a></li> <li><a href="#">produkter</a></li> </ul> </div> <div id="content"> <p>här kommer innehållet</p> </div> <div id="sidebar"> <p>kolumn</p> </div> <div id="footer"> <p> Ellen Nu</p> </div> </div> </body> top navigaxon content sidebar footer * Vi kommer senare att lägga till en "wrapper" kring content

85 Float

86 Float #redblock { float: none; width: 200px; #redblock { float: left; width: 200px; default Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non. #redblock { float: right; width: 200px; Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non.

87 Float #redblock { float: left; width: 200px; Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non. #redblock { float: left; width: 200px; #blueblock { width: 200px; Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus

88 Float #redblock { float: left; width: 200px; #blueblock { float: left; width: 200px; Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus #outerdiv{ overflow: auto; Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus

89 Float #redblock { float: left; width: 200px; #blueblock { float: left; width: 200px; #outerdiv{ overflow: auto; width: 300px; Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus

90 Clear p.redtext { clear: none; default Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et orilla congolium sic ad nauseum. Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et orilla congolium sic ad nauseum. p.redtext { clear: left; Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et orilla congolium sic ad nauseum. Epsum factori non deposit quid pro quo hic escorol. Olypian quarrels et orilla congolium sic ad nauseum. right och both finns också

91 Att tänka på vid float Elementet tas ur det naturliga flödet Sätt alltid en bredd på elementet som floatas Det är bara efterföljande element som påverkas Det är bara en box innehåll som påverkas av ett floatat element om inte boxen själv är floatad

92 Positionering posi.on: absolute relaxve fixed staxc default div { position: static;

93 Absolut positionering bottom right #positionthis { position: absolute; top: 250px; left: 10%; 250px #positionthis 10% av bredden

94 Absolut positionering Barn Xll 1 position:absolute; Positionering sker gentemot det första föräldraelement som inte är positionerat "static" 1 Barn Xll 2 posixon:absolute; 2 float:le\; margin:40px; posixon:absolute; top:40px; le\:300px;

95 Relativ positionering #positionthis { position: relative; top: 5px; left: -25px; Observera att vid relativ positionering så reserverar fortfarande elementet den plats som det hade innan positioneringen 5px Syskon 1 Positionerat element Positionerat element Syskon 2 25px

96 Fixerad positionering #positionthis { position: fixed; top: 50%; right: 0; width: 30px; height: 100px; margin-top: -50px; Fixerad positionering går inte hand i hand med mobila enheter och du bör testa din sida på många olika enheter om du vill använda den. Fixerad positionering stöds inte heller av IE6

97 Z-index z-index:3 Element 2 Element 3 Element 1 #positionthis { z-index: 550; z-index:1 z-index:0

98 Föreläsning 10, HT2012 Mer CSS F10 Mer CSS Kurser: Webbteknisk introduktion 1IK415 Johan Leitet

99 F10 Mer CSS Dagens agenda Stila formulär CSS-genererat innehåll Mediatyper Utskrift Negativa marginaler Sprites Gridbaserade layouter Ramverk

100 Formulär Hel ok! <br />

101 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;

102 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; Stöds först från och med IE8 content: url(pin.png);

103 CSS-genererat innehåll h"p://nicolasgallagher.com/pure- css- gui- icons/demo/#non h"p://css- tricks.com/9516- pseudoelement- roundup/

104 Media

105 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

106 Flera mediatyper samtidigt Alla enheter <body> <head> <link rel="stylesheet" href="basic.css" /> Bara för skärm <link rel="stylesheet" media="screen" href="screen.css" /> <link rel="stylesheet" media="print" href="print.css" /> </head> Bara för utskrift 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?

107 @media-direktivet <body> <head> <link rel="stylesheet" href="basic.css" /> </head> p { color: red; #content { print p { color:black;

108 Tänk på vid utskrift #mainnav { display: none;

109 Länkar och utskrift Hur göra med länkar vid print #content a:after { content: " (" attr(href) ")";

110 Marginaler margin:5px 10px 30px 10px; alternativt: margin-top:5px; margin-right:10px margin-bottom:30px; margin-left:10px;

111 Negativa marginaler margin-right:-10px; margin-bottom:-10px; margin-left:-10px; margin-top:-10px;

112 body Layout med CSS, del 2 div #top start sida 1 div #content div #container div #navigaxon div #wrapper Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum mi quis ligula prexum sed rutrum tortor posuere. Vivamus aliquet velit a mauris vesxbulum commodo. EXam cursus suscipit lorem, vel mads metus facilisis ac. Proin gravida lacinia aliquet. Mauris arcu sem, tempor id gravida quis, lacinia non mauris. EXam ac ante ligula, a Xncidunt odio. VesXbulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent trisxque euismod ipsum, mads venenaxs odio condimentum ac. div #sidebar div #footer

113 Layouter med CSS en bra grund

114 Exempel på klassiska layouter

115 Negativa marginaler Problem: ningen i HTMLkoden Lösning: <div id="wrapper"> <div id="content"> <p> </p> </div> </div> + negativa marginaler

116 Lösningen 1 float:left width:150px #wrapper width:100% float:left Pellentesque habitant morbi trisxque senectus et netus et malesuada fames ac turpis egestas. VesXbulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris

117 Lösningen 2 float:left width:150px margin-right:-150px #wrapper width:100% float:left Pellentesque habitant morbi trisxque senectus et netus et malesuada fames ac turpis egestas. VesXbulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris

118 float:left width:150px margin-right:-150px Lösningen #wrapper width:100% float:left Pellentesque habitant morbi trisxque senectus et netus et malesuada fames ac turpis egestas. VesXbulum tortor quam, margin-left:150px; feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris 3

119 float:left width:150px margin-right:-150px Lösningen #wrapper width:100% float:left Pellentesque habitant morbi trisxque senectus et netus et malesuada fames ac turpis egestas. VesXbulum tortor quam, margin-left:150px; feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris 4 width:160px; float:right;

120 Lösningen #wrapper width:100% float:left 5 float:left width:150px margin-right:-150px Pellentesque habitant morbi trisxque senectus et margin-left:150px; netus et malesuada fames ac margin-right:160px; turpis egestas. VesXbulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris width:160px; float:right;

121 Lösningen #wrapper width:100% float:left margin-right:-180px 6 float:left width:150px margin-right:-150px Pellentesque habitant morbi trisxque senectus et margin-left:150px; netus et malesuada fames ac margin-right:160px; turpis egestas. VesXbulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris width:160px; float:right;

122 Lösningen 7 NavigaXon Pellentesque habitant morbi trisxque senectus et netus et malesuada fames ac turpis egestas. VesXbulum 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

123 Lösningen 7 NavigaXon Pellentesque habitant morbi trisxque senectus et netus et malesuada fames ac turpis egestas. VesXbulum 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

124 min/max width/height min-width max-width egenskaper min- width min- height max- height min- height #container { max-width: 1480px; min-width: 960px; Stöds först från och med IE7

125 Tables Table layout is dead, long live table layout! tables.html

126 Sprites

127 CSS Sprites

128 CSS Sprites socialsprite.png #fbicon #fbicon:hover Se demo

129 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 Nackdelar 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.

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

131 Gridbaserade layouter

132 Ramverk Fördelar Nackdelar Ö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 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 Källa: h6p:// frameworks- css- reset- design- from- scratch/

133 Föreläsning 11, HT2012 CSS3 F11 CSS3 Kurser: Webbteknisk introduktion 1IK415 Johan Leitet

134 F11 CSS3 Dagens agenda Vad är CSS3, är det redo att användas? Webbläsarprefix Selektorer Färger Bakgrunder och ramar Fonter och texter Flerkolumnslayouter Transformationer Transitioner Media Queries

135 Vad är CSS3? h"p:// work Selektorer Multi-column layout Media Queries Color Text Fonts Grid Layout

136 Kan jag använda idag? N J h"p://msdn.microso\.com/en- us/library/cc351024(v=vs.85).aspx Knappt stöd i IE6 eller 7, men det finns JS-bibliotek som kan hjälpa till. css3pie.com,

137 Webbläsarspecifika prefix #someid { -webkit-transition: opacity 13s; -moz-transition: opacity 13s; -o-transition: opacity 13s; -ms-transition: opacity 13s; transition: opacity 13s; h"p://caniuse.com/

138 Selektorer

139 Nya selektorer Univeral selector (*) Type selector (h1, p, div) ID selector, Class selector Combinators (>, +, ~,,) Link pseudo-classes (:link) User action pseudo-classes (:hover, :focus, :active) :before, :after pseudo-element Target pseudo-class Negation pseudo-class UI-element states pseudo-class Attribute selector Structural pseudo-classes

140 Selektorer Pseudoklassen :target #section1:target { <div id="section1"> Lorem ipsum </div> Pseudoklassen :not(x).left:not(video) { <div> <p class="left"> </p> <video class="left"> </video> <img class="left" /> </div>

141 Selektorer UI-element states pseudo-class: :checked { :disabled { :enabled { :checked:after { content: "checked"; <form action=""> <input type="checkbox" name="g[]" value="2" /><br /> <input type="checkbox" name="g[]" value="2" /> </form>

142 Selektorer Attributselektorer: E[foo] element E med ett attribut foo E[foo="bar"] element E med ett attribut foo och värdet exakt "bar" E[foo~="bar"] element E med ett attribut foo som innehåller en listning av värden separerade med blanksteg där ett är "bar" E[foo^="bar"] element E med ett attribut foo vars värde börjar med "bar" E[foo$="bar"] element E med ett attribut foo vars värde slutar med "bar" E[foo*="bar"] element E med ett attribut foo som innehåller "bar" a[href^=" { <div> <a href=" <a href="page2.html">sidan 2</a> </div>

143 Structural pseudo-classes Selektorer E:nth-child(An+B) Elements E:s vart A:te barn med offset B li:nth-child(3n+4) { Välj var tredje li-element. Börja på nummer 4. Produkt Pris Ar.kelnummer Sony PS KS2343 tbody tr:nth-child(odd) { background: #B7DAF0; Vajo LG LK3255 Dell HS SL4322 LNU LN3242 PAN KL3211 Se även: :nth-last-child(n), :nth-of-type(n), nth-last-of-type(n), :root, :last-child, :first-child, :firstof-type, last-of-type, :only-child, :only-of-type, :empty

144 Layout i CSS3 Grid Layout Flexible Box Layout

145 Transformationer/Transitioner

146 Transformations translate rotate scale skew box1 { transform: translate(100px, 100px); box2 { transform: rotate(45deg); box3 { transform: scale(.75); box4 { transform: skew(15deg); box5 { transform: rotate(10deg), scale(1.5); matrix

147 Transformations box1 { transform-origin: 50% 50%; box2 { transform-origin: left top; box3 { transform-origin: center center; box4 { transform-origin: center bottom;

148 Transitions En transition animerar de egenskaper på ett element som ändrar sig. box1, box2, box3 { transition-property: all; transition-duration: 2s; transition-timing-function: ease; // linear, ease-in, ease-out, ease-in-out transition-delay: 0.3s; box1, box2, box3 { transition: transform 2s ease-in 0.3s;

149 Media queries

150 Media Queries <link rel="stylesheet" media="print and (color)" href=" " print and (color) { /* CSS specifikt för färgutskrift här */ Grupper med "," screen and (min-width:481px), screen and (orientation:landscape) { /* > 481px eller liggande */

151 Media Queries Media feature max/min Värde width Ja längd Bredd på aktuell visningsyta height Ja längd Höjd på aktuell visningsyta device- width Ja längd Enhetens totala visningsyta device- height Ja längd Enhetens totala visningsyta orienta.on Nej portrait landscape Stående eller liggande aspect- raxo Ja raxo Ex: 16/9 device- aspect- raxo Ja raxo Ex: 16/9 color Ja heltal color- index Ja heltal monochrome Ja heltal resoluxon Ja upplösning Ex: 300dpi scan Nej progressive interlaced grid Nej heltal h"p:// mediaqueries/

152 "if all you have is a hammer, everything looks like a nail" - Abraham Maslow, The Psychology of Science, 1966