webbteknik lektion 4
DESCRIPTION
Webbteknik lektion 4. Det handlar mer om stilmallar Per K, 2012. Innehåll. Repetition av referenser, positionering, boxmodel, flera referenser per definition Mer om pseudoklasser Medietyper Responsiv design, även retinaproblemet Runda hörn Menyer, dropdown, sliding doors Bakgrundsbilder. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/1.jpg)
Webbteknik lektion 4
Det handlar mer om stilmallarPer K, 2012
![Page 2: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/2.jpg)
Innehåll
Repetition av referenser, positionering, boxmodel, flera referenser per definition
Mer om pseudoklasser Medietyper Responsiv design, även retinaproblemet Runda hörn Menyer, dropdown, sliding doors Bakgrundsbilder
![Page 3: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/3.jpg)
Repetition
Enkel elementreferensp { font-family: Georgia, serif; }
ID refererar man till med #-tecken#content { width: 600px; }
Klassnamn har en punkt före.newsitem { width: 600px; }
Nästlad referens, (egentligen indirekt )Ex. en h1:a i en div med id=“head”#head h1 { color: red; }
![Page 4: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/4.jpg)
Flera referenser
Man kan lägga flera referenser före en definition: (separera med komma)
h1, p, ul, td { här kommer stilinfo } Eller på olika rader separerat med
komma:.grid, .grid-right { float: none; }
![Page 5: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/5.jpg)
Pseudoklasser, ex. A-taggen
A-taggarnas pseudoklasser ska skrivas i ordning:
a:link { color: blue; }a:active { color: red; }a:visited { color: purple; }a:hover { color: red; text-decoration: underline; }
![Page 6: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/6.jpg)
Fler pseudoklasser
:first-letter, ex p:first-letter :first-line :first-child :before, ex: blockquote:before{content:
”/””} :after
![Page 7: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/7.jpg)
Nu är det slut på olika sätt att referera från css till html!
Enkel elementreferens Klassreferens Id-referens Pseudoklasser Indirekt nästlad elementreferens Direkt nästlad elementreferens
![Page 8: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/8.jpg)
Boxmodellen – gäller divar och alla “block level elements”
padding
margintop/left
width
height
top/right
![Page 9: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/9.jpg)
position: relative Position: absolute Float: left (eller right) Clear: both (eller left, right men oftast
both) Z-index
Positionering
![Page 10: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/10.jpg)
Medietyper
En XHTML-sida kan ha olika CSS-filer för olika medier!
Definieras med attributet “media” i link-taggen, t.ex. ‘media=”screen”’
Då blir det så här:<link rel = ”…” type = ”…” href = ”...” media=”screen” />
![Page 11: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/11.jpg)
Responsiv design (css3)
En sida anpassas efter olika skärmstorlekar, dator, läsplatta eller mobiltelefon
@media screen and (max-width: 240px) { body {}
.widget-title { font-size: 14px; }} (observera slutparentesen man lägger alla
ändringar mellan start och slutparentes)
![Page 12: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/12.jpg)
Responsiv design (css3)
Man hanterar storlekarna stegvis:
@media screen and (max-width: 650px) { }@media screen and (max-width: 480px) { }@media screen and (max-width: 320px) { }@media screen and (max-width: 240px) { }
![Page 13: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/13.jpg)
Responsiv design (css3)
Man hanterar retina, högupplösta skärmar också:
@media only screen and (-moz-min-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (-webkit-min-device-pixel-
ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { body {}}
![Page 14: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/14.jpg)
Responsiv design (css3)
En sida anpassas efter olika skärmstorlekar, dator, läsplatta eller mobiltelefon
@media screen and (max-width: 240px) { body {}
.widget-title, .widget-title-home h3 { font-size: 14px;
}} (OBS! Detta är en slutparentes man lägger
alla ändringar mellan start och slutparentes)
![Page 15: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/15.jpg)
Runda hörn (css3)
.info-box {-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;display: block;margin: 20px 0;padding: 15px;text-align: left;
}
![Page 16: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/16.jpg)
Menyer
Görs ofta som ul-li-listor Stylas och det som är bra att kunna är
detta:display: block; sätts på li eller a-taggenlist-style: none; sätts på ul-taggen
![Page 17: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/17.jpg)
Menyer
Bakgrundsbilder kan vara bra att ha, tex. på a-taggen:background: url(css-nav.gif) #fff bottom left repeat-x; (“shorthand”)
![Page 18: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/18.jpg)
Menyer
Bakgrundsbilder kan vara bra att ha, tex. på a-taggen:background: url(css-nav.gif) #fff bottom left repeat-x; (“shorthand”)
Styla upp li-taggen med float:left; Jag skulle även styla upp a-taggen med
float left.
![Page 19: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/19.jpg)
Menyer
Det som bestämmer om det är en horisontell eller vertikal meny blir då bredden och höjden på behållaren, div:en, som omsluter ul-li-listan.
![Page 20: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/20.jpg)
Menyer – lite lyx
Sliding doors. Flytta runt bakgrundsbilden som t.ex.
Apple gör.
![Page 21: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/21.jpg)
Sliding doors
Ren CSS-lösning för snygga menyer Fixar bakgrunden på menyflikar med
varierande bredd Ett grundkrav: Varje <li>-tagg måste
innehålla en annan tagg (en meny med länkar uppfyller det kravet)
![Page 22: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/22.jpg)
Bilder
Tänk på semantiken! Bakgrundsbilder hör till css:en Innehållsbilder hör till html:sidan Innehållsbilder måste he an alt-text
![Page 23: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/23.jpg)
Bakgrund/bakgr.bilder – vanlig css-kod
body {background-color:#b0c4de;} #head {background-color:#b0c4de;} background-image:url('img_tree.png');
background-repeat:no-repeat;background-position:right top;
Shorthand: body {background:#ffffff url('img_tree.png') no-repeat right top;}
![Page 24: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/24.jpg)
Fonter och typografering
Nya typsnitt som fungerar på webben:Google font api
![Page 25: Webbteknik lektion 4](https://reader034.vdocuments.site/reader034/viewer/2022042616/56813253550346895d98d3eb/html5/thumbnails/25.jpg)
CSS-reset – vad är det
Jo, det är en nollställning för att få alla webbläsare att visa samma sak.html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline;}