CSS del 1 Kvarnbrink 2 2006-03-21. 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.

En presentation över ämnet: "CSS del 1 Kvarnbrink 2 2006-03-21. 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."— Presentationens avskrift:

1 CSS del 1 Kvarnbrink 2 2006-03-21

2 I början…

3 Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets bredd

4

5

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 UtseendeCSS Beteende JavaScript (ECMAscript)

9 CSS CSS-information kan inkluderas på tre sätt:  i varje html-tagg, med “style”-attributet  inom -taggar i - sektionen  globalt genom att länka till en separat css-fil

10 Lokalt (i taggar) Se upp!... Ska normalt undvikas!

11 Lokalt för hela filen body { background-color: blue; color: white; } h1 { color: orange; }... Används i vissa specialfall

12 Globalt med separat fil <link rel=”stylesheet” type=”text/css” href=”/style.css” />...

13 Syntax body { background-color: #ddf; font-family: verdana, arial, sans-serif; margin-left: 30px; margin-top: 20px; } p { margin-bottom: 20px; } Taggnamn EgenskapVärde

14 Taggnamn Ett rött och fett citat! blockquote { font-weight: bold; font-family: arial; color: red; } Gäller för alla -taggar i hela dokumentet

15 ID-attributet Den här texten ska bli blå! #content { font-weight: bold; font-family: arial; color: blue; } OBS: Varje ID måste vara unikt!

16 Klassnamn Saab 99 10 000 mil Pris: 3000 kr.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: http://www.w3schools.com/css/default.a sp http://www.w3schools.com/css/default.a sp Orienterande om CSS: http://en.wikipedia.org/wiki/Cascading_ Style_Sheets http://en.wikipedia.org/wiki/Cascading_ Style_Sheets