REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap Värde 2 Stilmallar direkt i HTML-dokument <style> <!-- body { font-family:verdana h1 { font-family:garamond; font-weight:bold --> </style> Inline-stilmallar <h1 style="font-family:futura"> Denna mall gäller före den här ovan</h1> 3 Inline Påverkar HTML-tagg <html> <body> <p style= font-family: Arial, sansserif; >some text</p> </body> </html> 4 Inbäddad i HEAD Påverkar ett HTML-dokument <html> <head> <style type= text/css > p {font-family: Arial, sans-serif; </style> </head> <body> <p>some text</p> </body> </html> 5 GLOBALA STILMALLAR Stilmall och HTML i olika dokument Flera dokument och samma stilmall Flera stilmallar till ett dokument <link rel="stylesheet" type="text/css" href="katlog/filnamn.css"> 6 1
OLIKA STILMALLAR FÖR OLIKA MEDIER <link rel="stylesheet" href= utskrift.css media= print > <link rel="stylesheet" href= skarm.css media= screen > ARV OCH KLASSER Barntaggar ärver egenskaper <p> ärver egenskaper från <body> Vid konflikt går barnet först! Important Olika formatering av en och samma tagg sker genom klasser p.standard { color:black;! Important p.warning { color:red; 7 8 TEXTFORMATERING CSS LÅDMODELL p { font-size:12pt; font-family:verdana, garamond, arial; font-style:italic; font-weight:bold; color:#33aadd; text-align:center; p { font: bold 12pt verdana, garamond, arial 9 kantlinje innehåll margin padding border TRouBLed : När man använder kortformen för att specificera margin, padding eller border för ett element börjar man med den övre sidan och går medsols: Top, Right, Bottom, Left. Ex.: h1 { margin: 1em 1em 0 1em; 10 EXEMPEL: SIDFORMATERING FÄRGER p{ padding:10pt; border:4pt solid #FF0000; margin-top:10%; margin-bottom:10%; margin-left:20%; margin-rigth:20%; I HTML/CSS kan en färg anges genom en kombination av tre grundfärger: röd, grön och blå RGB (Red, Green, Blue): Normal hexadecimal notation: #99CC33 Förkortad notation: #9C3 RGB-funktion: rgb(153, 204, 51) h1 {background-color: #CCFF33; Vissa färger kan också anges med en färgkonstant: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white och yellow 11 12 2
POSITIONERING MÅTT Ersätter tabeller! Static Absolute Relative Fixed Z-index p { position:relative; top:100pt; left:50pt; z-index:10; 13 Absoluta mått mm = millimeter cm = centimeter in = inch pt = point (72pt = 1inch) pc = pica (1pc = 12pt) px = pixel Relativa mått em = fyrkanten (emspace) ex = x-höjden % = procent 14 MÅTT CLASS body { font-size: 12pt; p { font-size: 1em; h1 { margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; 15 En klass är en grupp av element. Gruppen identifieras med ett klassnamn. Klass markeras med punkt (.). I stilmallen (CSS): div.menuitem {color: white; I HTML-dokumentet: <div class= menuitem >Introduktion</div> 16 ID En identifierare (ID) refererar till exakt ett element i ett dokument. Fungerar som en klass. ID markeras med staket (#). I stilmallen (CSS): #firstword {font-weight: bold; I HTML-dokumentet: <span id= firstword >Hören</span> Namnge klasser och ID efter funktion, inte efter utseende! CLASS CSS p.right {text-align: right P.center {text-align: center <p class= right > En högerjusterad text </p> <p class= center > En centrerad text </p> 17 18 3
CLASS SELEKTORSTILAR CSS:.blue {color: #082984.red {color: #de2131 <h1 class= red >Headline</h1> <p class= red >a summary</p> <p class= blue >some text</p> PSEUDOKLASSER CSS: a:link {color: #000 a:visited {color: #000 a:hover {color: #69f a:active {color: #000 <a href= nextpage.html >Next page</a> 19 20 DIV & SPAN Gör samma sak fast för olika delar av dokumentet Div Ändrar hela stycken Span Ändrar enstaka ord DIV & SPAN Div <div style= text-align: center; > <h2> Nyheter</h2> <p><a href= budget.html >Budget</a></p> <p><a href= investering.html >Investering</a></p> </div> Span <p>för ett antal år sedan <span style= font-style: italic; >jag minns inte hur länge sen exakt</span> var jag en fattig student </p> 21 22 RAMAR <div style= border-style: dotted; background-color: blue <p> Det blir en ram runt dessa element </p> <img src= bild.jpg alt= En bild i ett element med ram > </div> BAKGRUND background-color: #FFFFFF; background-image: url( tegel.png ); background-repeat: no-repeat; background-position: center; background-attachement: fixed; 23 24 4
FLYTANDE BILDER float Anger position i förhållande till text <img src: left.jpg style= {float: left /> <img src: right.jpg style= {float: right /> 25 5