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

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

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

2 Innehåll Rep. Om referenser Indirekt nästling Direkt nästling Pseudoklasser Box-modellen Relativ och absolut positionering Float och clear och z-index Fonter – hur snyggt kan det bli?

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; } Också möjligt att vara mer specifik div.newsitem { width: 600px; } h1#page_title { color: black; }

4 Pseudoklasser Fungerar precis som vanliga CSS-klasser... men: Du kan inte själv tilldela dem! Är en sorts CSS-klasser som webbläsaren delar ut och tar bort automatiskt

5 Pseudoklasser a:link { color: blue; } a:active { color: red; } a:visited { color: purple; } a:hover { color: red; text-decoration: underline; } input:focus { border: 3px solid red; } p:first-letter { font-size: 24pt; } Partiellt stöd i Explorer, fullt stöd i övriga mer: http://www.w3.org/TR/REC-CSS2/selector.html#q15

6 Enkel elementreferens h1 { font-size: 30pt; color: green; } Grys kaffeshop Välkommen!... Länkar

7 Nästlad elementref. Kurts bilskrot Välkommen!... Länkar #header h1 { font-size: 30pt; color: green; } #content h1 { font-size: 30pt; color: green; } #sidebar h1 { font-size: 30pt; color: green; }

8 Indirekt nästlad elementref. Rubrik Lorem ipsum Läs #content.nyhet a:hover { text-decoration: underline; font-weight: bold; color: red; }

9 Indirekt nästlad elementref. #content a:hover { text-decoration: underline; font-weight: bold; color: red; } Rubrik Lorem ipsum Läs

10 Direkt nästlad elementref. (Nu blir det överkurs…) #content > a:hover { text-decoration: underline; font-weight: bold; color: red; } Ingen matchning Rubrik Lorem ipsum Läs

11 Direkt nästlad elementref. (Nu blir det överkurs…).nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; } Rubrik Lorem ipsum Läs

12 Direkt nästlad elementref. (Nu är det överkurs…) #content >.nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; } Rubrik Lorem ipsum Läs

13 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

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

15 Absolut positionering (position: absolute) flyttar elementet till en “egen värld” och placerar det relativt till föräldraelementet. Relativ positionering (position: relative) får ett element att anta en position relativ till det läge elementet annars skulle ha haft Används till småsaker som loggor och dylikt Används i menyer Positionering – absolut och relative

16 Det kan vara bra att veta vad som är referens. Normalt är det över högra hörnet i bodyn. Om man sätter posiotion: relative på en behållare, en div, så blir den referens till inneslutna objekt. Dessa kan då positioneras med position:absolute. Visa exempel med en logga. Positionering – absolut och relative

17 Flytande objekt Får ett element att flytta sig till vänster (float: left) eller höger (float: right) i det inneslutande elementet Bra för figursatta bilder, anfanger, och en del oväntade saker Kombinera alltid med clear Visa exempel med fem behållare, container, header, menu, content och footer. http://www.w3schools.com/css/css_classificat ion.asp http://www.w3schools.com/css/css_classificat ion.asp

18 Z-index Z-index bestämmer positionen i djupled Tänk lager i Photoshop! Ju högre Z-index, desto längre upp hamnar ett element Normalt har alla element Z-index noll Ta till detta när något försvinner….

19 Fonter och typografering Vanlig jobbet är: Font-family Font-size Text-decoration Color Line-height Sedan finns det lite nytt css3

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

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