Ladda ner presentationen
Presentation laddar. Vänta.
Publicerades avLisa Lundgren
1
CSS del 2 Kvarnbrink 2 06-03-23
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 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
5
Enkel elementreferens h1 { font-size: 30pt; color: green; } Kurts bilskrot Välkommen!... Länkar
6
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; }
7
Indirekt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content.nyhet a:hover { text-decoration: underline; font-weight: bold; color: red; }
8
Indirekt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content a:hover { text-decoration: underline; font-weight: bold; color: red; }
9
Direkt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content > a:hover { text-decoration: underline; font-weight: bold; color: red; } Ingen matchning
10
Direkt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer....nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }
11
Direkt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content >.nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }
12
Boxmodellen padding margintop/left width height top/right
13
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 Positionering
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 http://www.w3schools.com/css/css_clas sification.asp http://www.w3schools.com/css/css_clas sification.asp
Liknande presentationer
© 2024 SlidePlayer.se Inc.
All rights reserved.