CSS del 1 Samuel Kvarnbrink 2006-03-21
I början…
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 Utseende CSS Beteende JavaScript (ECMAscript)
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
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!
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
Globalt med separat fil <html> <head> <link rel=”stylesheet” type=”text/css” href=”/style.css” /> </head> <body> ... </body> </html>
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; }
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
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!
Kan användas på mer än ett element Klassnamn <div class=”carinfo”> Saab 99<br /> 10 000 mil<br /> Pris: 3000 kr </div> .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: http://www.w3schools.com/css/default.a sp Orienterande om CSS: http://en.wikipedia.org/wiki/Cascading_ Style_Sheets