Webbteknik lektion 4

1. Webbteknik lektion 4 Det handlar mer om stilmallar Per K, 2012

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

3. 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; }

4. 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; }

5. 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; }

6. Fler pseudoklasser • :first-letter, ex p:first-letter • :first-line • :first-child • :before, ex: blockquote:before{content: ”/””} • :after

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

8. Boxmodellen – gällerdivarochalla “block level elements” top/right top/left margin padding height width

9. Positionering • position: relative • Position: absolute • Float: left (eller right) • Clear: both (eller left, right men oftast both) • Z-index

10. 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” />

11. Responsiv design (css3) • En sidaanpassasefterolikaskärmstorlekar, dator, läsplattaellermobiltelefon @media screen and (max-width: 240px) { body {} .widget-title { font-size: 14px; } } (observera slutparentesen man lägger alla ändringar mellan start och slutparentes)

12. 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) { }

13. Responsiv design (css3) • Man hanterar retina, högupplösta skärmar också: @media onlyscreen and (-moz-min-device-pixel-ratio:1.5), onlyscreen and (-o-min-device-pixel-ratio:3/2), onlyscreen and (-webkit-min-device-pixel-ratio:1.5), onlyscreen and (min-device-pixel-ratio:1.5) { body {} }

14. Responsiv design (css3) • En sidaanpassasefterolikaskärmstorlekar, dator, läsplattaellermobiltelefon @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)

15. Rundahö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; }

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

17. Menyer • Bakgrundsbilder kan vara bra att ha, tex. på a-taggen:background: url(css-nav.gif) #fff bottom left repeat-x; (“shorthand”)

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

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

20. Menyer – lite lyx • Sliding doors. • Flytta runt bakgrundsbilden som t.ex. Apple gör.

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

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

23. 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;}

24. Fonter och typografering Nya typsnitt som fungerar på webben: • Google font api

25. 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; }