CSS del 2 Kvarnbrink2 06-03-23.

En presentation över ämnet: "CSS del 2 Kvarnbrink2 06-03-23."— Presentationens avskrift:

1 CSS del 2 Kvarnbrink2

2 Mer elementreferens 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; }

3 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

4 Pseudoklasser Partiellt stöd i Explorer, fullt stöd i övriga
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:

5 Enkel elementreferens
<div id="header"> <h1>Kurts bilskrot</h1> </div> <div id="content"> <h1>Välkommen!</h1> ... <div id="sidebar"> <h1>Länkar</h1> h1 { font-size: 30pt; color: green; }

6 Nästlad elementref. #header h1 { font-size: 30pt;
color: green; } <div id="header"> <h1>Kurts bilskrot</h1> </div> <div id="content"> <h1>Välkommen!</h1> ... <div id="sidebar"> <h1>Länkar</h1> #content h1 { font-size: 30pt; color: green; } #sidebar h1 { font-size: 30pt; color: green; }

7 Indirekt nästlad elementref.
<div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> #content .nyhet a:hover { text-decoration: underline; font-weight: bold; color: red; }

8 Indirekt nästlad elementref.
<div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> #content a:hover { text-decoration: underline; font-weight: bold; color: red; }

9 Direkt nästlad elementref.
<div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> #content > a:hover { text-decoration: underline; font-weight: bold; color: red; } Ingen matchning

10 Direkt nästlad elementref.
<div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> .nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }

11 Direkt nästlad elementref.
<div id="content"> <div class="nyhet"> <h1>Man bet hund</h1> Lorem ipsum dolor... <a href="#">Läs mer...</a> </div> #content > .nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }

12 Boxmodellen top/right top/left margin padding height width

13 Positionering 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

14 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

15 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 sification.asp