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

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

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

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

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

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

Boxmodellen – gäller divar och alla “block level elements” padding margintop/left width height top/right

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

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:

Responsiv design (css3) En sida anpassas efter olika skärmstorlekar, dator, läsplatta eller screen and (max-width: 240px) { body {}.widget-title { font-size: 14px; } } (observera slutparentesen man lägger alla ändringar mellan start och slutparentes)

Responsiv design (css3) Man hanterar storlekarna screen and (max-width: 650px) { screen and (max-width: 480px) { screen and (max-width: 320px) { screen and (max-width: 240px) { }

Responsiv design (css3) Man hanterar retina, högupplösta skärmar 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 {} }

Responsiv design (css3) En sida anpassas efter olika skärmstorlekar, dator, läsplatta eller 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)

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

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

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

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.

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.

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

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)

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

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

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

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