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

En presentation över ämnet: "Webbteknik lektion 4 Det handlar mer om stilmallar Per K, 2012."— Presentationens avskrift:

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 elementreferens p { 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äller divar och alla “block level elements” padding margintop/left width height top/right

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

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:

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

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 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 {} }

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

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

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-taggen list-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 -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; }