1 / 16

CSS – CASCADING STYLE SHEETS

CSS – CASCADING STYLE SHEETS. Separera utseenden från struktur och innehåll. CSS 2 & CSS 3 http://www.w3.org/TR/CSS2/ http://www.css3.info/. CSS – CASCADING STYLE SHEETS. Anpassa stilmallar efter användare och plattform Exempel på specialanpassade befintliga kategorier:

mercury
Download Presentation

CSS – CASCADING STYLE SHEETS

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 – CASCADING STYLE SHEETS Separera utseenden från struktur och innehåll. CSS 2 & CSS 3 http://www.w3.org/TR/CSS2/ http://www.css3.info/

  2. CSS – CASCADING STYLE SHEETS • Anpassa stilmallar efter användare och plattform • Exempel på specialanpassade befintliga kategorier: • Aural – röst & ljudstyrd • Braille – punktskrift • Embossed – releiftext • Handheld – små portabla enheter • Print – för vanlig utskrift på papper • Projection - projektorer • Screen – för datormonitorer • Tv – för visning på TV-apparater http://www.w3.org/TR/CSS2/media.html

  3. CSS – KOPPLA MOT HTML Direkt i HTML dokumentet <head> <style> …din CSS kod </style> <head> Direkt i HTML taggarna <p style=”font-size: 150%”>Hej</p> Externa stillmallar <link rel=“stylesheet” href=“default.css" type="text/css” media=“screen, tv”> <link rel=“stylesheet” href=“print.css" type="text/css” media=“print”> <link rel=“stylesheet” href=“mobile.css" type="text/css” media=“handheld”>

  4. h1 { color: blue; } #logo { background-image: url(logo.gif);  } .newsItem { font-family: courier, sans-serif; } a:visited { color:red; font-weight: bold; } Referens till HTML element Referens till unikt ID Referens till en klass Egenskap Värde Referens till en pseudoklass CSS – SYNTAX http://www.howtocreate.co.uk/tutorials/css/syntax

  5. CSS – SYNTAX <div id="header"> <h1>Kurts bilskrot</h1> </div> <div id="content"> <h1>Välkommen!</h1> </div> <div id="sidebar"> <h1>Länkar</h1> </div> h1 { font-size: 30pt; color: green; }

  6. CSS – SYNTAX NÄSTLADE ELEMENT <div id="header"> <h1>FacePage</h1> </div> <div class=news"> <div> <h1>Bad news</h1> <img src=“pic.jpg”> </div> </div> <div id="sidebar"> <p>Zvoschh</p> <div> <p>Hej</p> </div> </div> #header h1 { color: green; } .news div img { max-height: 40px; } #sidebar p { color: green; }

  7. CSS – FÄRGER • Färger kan anges på fyra sätt: • Färgnamn: blue, red, purple, orange, olive… • 1-byte hexadecimalt: #FFF, #006, #0A0 • 2-byte hex: #FFFFFF, #000066, #00AA00 • Decimalt: rgb(255,255,255), rgb(0,0,0) http://ficml.org/jemimap/style/color/wheel.html

  8. CSS – TEXT fet eller vanlig stilfont-weight: bold; kursiv eller vanlig stilfont-style: italic; Understruken texttext-decoration: underline; Anger textfärgcolor: #fff; • font-family anger vilket typsnitt som ska användas • Typsnitten anges som en lista • Ange alltid en generisk familj på slutet! EX. • font-family: helvetica, arial, sans-serif;

  9. CSS – TEXT – FONT-SIZE Textstorlek – standardvärde 16px Dynamiska em en relativ textstorlek utgår från 16px = 1em % storleken sätts procentuellt 100% = 16px Statiska storlekar pt används främst för stilmallar för utskrift 16px = 12pt px sätter textstorleken statiskt exakt på pixelnivå EX. font-size: 1em; http://www.alistapart.com/articles/howtosizetextincss

  10. CSS – POSITIONERING Relative Placerar elementet relativt till föregående element. Static Placerar element som det vanligtvis hamnar utifrån HTML koden. Absolute På ett bestämt avstånd från det element som är en nivå ovanför. (parent) Fixed Placerar elementet utifrån från webbläsar fönstret http://www.quirksmode.org/css/position.html

  11. top/right top/left margin padding height width CSS – BOX MODELLEN <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie.css" /> <![endif]--> http://virtuelvis.com/archives/2004/02/css-ie-only

  12. CSS – BOX MODEL – IE problem WC3 standard total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right IE explorer total width = margin-left + width + margin-right http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

  13. CSS – HTML TAGG CSS HTML <h1>Rubrik 1</h1> h1 { font-size: 200%; Color: #cc0011; } + =

  14. CSS – KLASSER & ID CSS HTML #gallery { border: 2px solid black; padding: 20px; width: 130px; } .imageHolder { position: relative; float: left; width: 40px; height: 40px; background-color: Olive; border: 2px solid black; margin: 5px; } #galleryEnd { clear:both; } <div id="gallery"> <div class="imageHolder">1</div> <div class="imageHolder">2</div> <div class="imageHolder">3</div> <div class="imageHolder">4</div> <div class="imageHolder">5</div> <div class="imageHolder">6</div> <div class="imageHolder">7</div> <div class="imageHolder">8</div> <div class="imageHolder">9</div> <div class="imageHolder">10</div> <div id="galleryEnd"></div> </div> = +

  15. CSS – PLANERA • RITA UPP PÅ PAPPER & NAMNGE • ANVÄND ”DIV”-taggar för uppdelning & positionering • RELEVANT NAMNGIVNING • BEGRÄNSA ANTAL FÄRGER & TYPSNITT

  16. CSS – DEBUG <div id="heading"> <h1>Merry Christmas! <br />&<br /> A Happy New Year</h1> </div> • Syntax fel • Logiska fel .heading { position: absolute; margin-top: 50 px; margin-left: 95 px; widht: 370 px; text-align: center; color: white; font-family; "MS Serif“. "New York", serif; font-size: 140; }

More Related