1 / 20

CSS del 1

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

ramla
Download Presentation

CSS del 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS del 1 • Samuel Kvarnbrink • 2006-03-21

  2. I början…

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

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

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

  6. Uppdelning

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

  8. Lokalt (i taggar) <span style=”color: red”>Se upp!</span> <div style=”float: left”>...</div> <br style=”clear: all” /> Ska normalt undvikas!

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

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

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

  12. Taggnamn <blockquote> Ett rött och fett citat! </blockquote> blockquote { font-weight: bold; font-family: arial; color: red; } Gäller för alla <blockquote>-taggari hela dokumentet

  13. 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!

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

  15. Vanliga textattribut • font-weight: fet eller vanlig stilfont-weight: bold; • font-style: kursiv eller vanlig stilfont-style: italic; • text-decoration: t.ex. understruken texttext-decoration: underline; • color: anger textfärgcolor: #fff;

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

  17. 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)

  18. Resurser • W3Schools CSS-skola:http://www.w3schools.com/css/default.asp • Orienterande om CSS:http://en.wikipedia.org/wiki/Cascading_Style_Sheets

More Related