Upload
ignacia-price
View
35
Download
0
Embed Size (px)
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 Presentation
Citation preview
Webbteknik lektion 4
Det handlar mer om stilmallarPer 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 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; }
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:<link rel = ”…” type = ”…” href = ”...” media=”screen” />
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)
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) { }
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 {}}
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)
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-taggenlist-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 <li>-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;}