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

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?

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

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

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:

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

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

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

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

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

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

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

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

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

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

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. ion.asp ion.asp

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….

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

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