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