Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012

Innehåll Historisk återblick om css. Håkon Lie Vanlig elementreferens Id-attribut – visas som # i css Klass-attribut – visas som. i css Efter lektionen finns det tre sätt att stilsätta ett objekt i en html-sida.

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) Detta kallas inline 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... Så här gör man nästan alltid!

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! Man kan sätta id på alla taggar.

Klassnamn Saab mil Pris: 3000 kr.carinfo { border-width: 1px; border-color: #000; padding: 5px; } Kan användas på mer än ett element Man kan sätta klassnamn på alla taggar Man kan sätta flera klasser om man separerar med mellanslag:

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: Orienterande om CSS: Sheets Sheets