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

Föreläsning 3, HT2014 Stilmallar F03 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 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

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>

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

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

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>

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 # <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!

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

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>

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

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 */ 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;

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; 101 11 1 1+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/

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

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

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://www.smashingmagazine.com/2007/09/21/css- frameworks- css- reset- design- from- scratch/

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/

Demo CSS - Inlänkning johan.leitet@lnu.se @leitet johan.leitet.se

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

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å

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

@import <head> <style type="text/css"> @import url( style.css ); </style> </head> Eller i en css-fil: @import url( style.css ); @import url( style-layout.css );

Demo CSS - Pseudoklasser johan.leitet@lnu.se @leitet johan.leitet.se

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>

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

Demo CSS Typsnitt och text johan.leitet@lnu.se @leitet johan.leitet.se

Text serif sans-serif Källa: Smashing Magazine (http://goo.gl/tkwpl1)

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 (http://goo.gl/tkwpl1)

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 */

Kursiv text: Font h1 { font-style: italic; /* normal, oblique */ Fet text: h1 { font-weight: bold; /* normal, 100-900, 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;

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

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 (http://goo.gl/tkwpl1) Georgia, Arial, Verdana Lucida Grande

Fonter och text

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

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

Google web fonts api

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

Flerkolumnslayout

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

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

Färg Det finns 17 fördefinierade färger (enligt standarden): = Navy = #000080 = rgb(0, 0, 128) 0 0 128 Black #000000 (0,0,0) Green #008000 (0,128,0) Silver #C0C0C0 (192,192,192) Lime #00FF00 (0,255,0) Gray #808080 (128,128,128) Olive #808000 (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 #000080 (0,0,128) Purple #800080 (128,0,128) Blue #0000FF (0,0,255) Fuchsia #FF00FF (255,0,255) Teal #008080 (0,128,128) Aqua #00FFFF (0,255,255)

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;

Färger

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

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

Opacity opacity: 0.4;

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

Demo CSS Ramar och skuggor johan.leitet@lnu.se @leitet johan.leitet.se

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

Bakgrunder och ramar

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

Border-radius

#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://www.w3.org/tr/2011/cr- css3- background- 20110215/#the- box- shadow

Demo CSS Bakgrundsbilder johan.leitet@lnu.se @leitet johan.leitet.se

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

Border-images

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

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

Demo CSS Boxmodellen johan.leitet@lnu.se @leitet johan.leitet.se

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

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

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

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.

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

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

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;

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

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

Layout med CSS, del 1 top navigaxon content sidebar footer

header container navigation content footer

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

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.

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

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

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

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å

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

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

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

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;

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

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

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

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

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

Formulär Hel ok! <br />

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;

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

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

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

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?

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

Tänk på vid utskrift #mainnav { display: none; http://alistapart.com

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

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

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

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

Layouter med CSS en bra grund

Exempel på klassiska layouter

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

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

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

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

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;

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;

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;

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

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

Tables Table layout is dead, long live table layout! http://www.w3.org/tr/css21/ tables.html

Sprites

CSS Sprites

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

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.

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.

Gridbaserade layouter

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://www.smashingmagazine.com/2007/09/21/css- frameworks- css- reset- design- from- scratch/

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

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

Vad är CSS3? h"p://www.w3.org/style/css/current- work Selektorer Multi-column layout Media Queries Color Text Fonts Grid Layout

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. http:// css3pie.com, http://modernizr.com

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/

Selektorer

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

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>

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>

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^="http://"] { <div> <a href="http://sunet.se">sunet</a> <a href="page2.html">sidan 2</a> </div>

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 PS032 1295 KS2343 tbody tr:nth-child(odd) { background: #B7DAF0; Vajo LG96 599 LK3255 Dell HS232 20199 SL4322 LNU 431 3421 LN3242 PAN 431 54322 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

Layout i CSS3 Grid Layout Flexible Box Layout

Transformationer/Transitioner

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

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

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;

Media queries

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

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://www.w3.org/tr/css3- mediaqueries/

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