Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.

En presentation över ämnet: "Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012."— Presentationens avskrift:

1 Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012

2 Innehåll Historisk återblick om css. Håkon Lie 1994. 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.

3 I början…

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

5

6

7 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

8 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

9 Uppdelning Struktur HTML 4.01 XHTML UtseendeCSS Beteende JavaScript (ECMAscript)

10 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

11 Lokalt (i taggar) Detta kallas inline Se upp!... Ska normalt undvikas!

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

13 Globalt med separat fil... Så här gör man nästan alltid!

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

15 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

16 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.

17 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 Man kan sätta klassnamn på alla taggar Man kan sätta flera klasser om man separerar med mellanslag:

18 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;

19 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;

20 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)

21 Resurser W3Schools CSS-skola: http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp Orienterande om CSS: http://en.wikipedia.org/wiki/Cascading_Style_ Sheets http://en.wikipedia.org/wiki/Cascading_Style_ Sheets