CSS del 1 Kvarnbrink

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

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

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

Uppdelning Struktur HTML 4.01 XHTML UtseendeCSS Beteende JavaScript (ECMAscript)

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

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

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

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

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

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

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!

Klassnamn Saab mil Pris: 3000 kr.carinfo { border-width: 1px; border-color: #000; padding: 5px; } Kan användas på mer än ett element

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;

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;

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)

Resurser W3Schools CSS-skola: sp sp Orienterande om CSS: Style_Sheets Style_Sheets