Ladda ner presentationen
Presentation laddar. Vänta.
1
CSS del 1 Samuel Kvarnbrink
2
I början…
3
I början… Bakgrunden var det enda man kunde byta färg på
Allt var satt i Times Texten flödade över hela webbläsarfönstrets bredd
6
I början… Kreativa webbskapare upptäckte att man kunde styra upp layouten med tabeller Netscape tryckte ur sig nya markuptaggar i hejdundrande fart Microsoft ville inte vara sämre… Webbsidorna blev en enda sörja av innehåll och utseende
7
Ljusning Håkon Wium Lie utarbetade 1994 ett förslag till språk enbart för att styra utseende CSS-standarden publicerades i dec 1996 Microsoft (av alla) högg direkt, Internet Explorer 4.0 var först med användbart CSS-stöd
8
Uppdelning Struktur HTML 4.01 XHTML Utseende CSS Beteende JavaScript
(ECMAscript)
9
CSS CSS-information kan inkluderas på tre sätt:
i varje html-tagg, med “style”-attributet inom <style>-taggar i <head>- sektionen globalt genom att länka till en separat css-fil
10
Lokalt (i taggar) Ska normalt undvikas!
<span style=”color: red”>Se upp!</span> <div style=”float: left”>...</div> <br style=”clear: all” /> Ska normalt undvikas!
11
Används i vissa specialfall
Lokalt för hela filen <html> <head> <style type=”text/css”> body { background-color: blue; color: white; } h1 { color: orange; } </style> <body> ... </body> </html> Används i vissa specialfall
12
Globalt med separat fil
<html> <head> <link rel=”stylesheet” type=”text/css” href=”/style.css” /> </head> <body> ... </body> </html>
13
Syntax Egenskap Värde Taggnamn body { background-color: #ddf;
font-family: verdana, arial, sans-serif; margin-left: 30px; margin-top: 20px; } p { margin-bottom: 20px; }
14
Gäller för alla <blockquote>-taggar i hela dokumentet
Taggnamn <blockquote> Ett rött och fett citat! </blockquote> blockquote { font-weight: bold; font-family: arial; color: red; } Gäller för alla <blockquote>-taggar i hela dokumentet
15
OBS: Varje ID måste vara unikt!
ID-attributet <div id=”content”> Den här texten ska bli blå! </div> #content { font-weight: bold; font-family: arial; color: blue; } OBS: Varje ID måste vara unikt!
16
Kan användas på mer än ett element
Klassnamn <div class=”carinfo”> Saab 99<br /> mil<br /> Pris: 3000 kr </div> .carinfo { border-width: 1px; border-color: #000; padding: 5px; } Kan användas på mer än ett element
17
Vanliga textattribut font-weight: fet eller vanlig stil font-weight: bold; font-style: kursiv eller vanlig stil font-style: italic; text-decoration: t.ex. understruken text text-decoration: underline; color: anger textfärg color: #fff;
18
Vanliga textattribut font-family anger vilket typsnitt som ska användas Typsnitten anges som en lista Ange alltid en generisk familj på slutet! font-family: helvetica, arial, sans-serif;
19
Färger Kan anges på fyra sätt: Färgnamn: blue, red, purple, orange…
1-byte hexadecimalt: #FFF, #006, #0A0 2-byte hex: #FFFFFF, #000066, #00AA00 Decimalt: rgb(255,255,255), rgb(0,0,0)
20
Resurser W3Schools CSS-skola: sp Orienterande om CSS: Style_Sheets
Liknande presentationer
