Stilark "Cascading Style Sheets" CSS /* Eksempel på stilark */ h1 { font-size:18pt; text-align: center; color: blue; } Vær oppmerksom på at enkelte nettlesere kan henge litt etter med implementering av standardene! INF1040-CSS-1
Boks-modellen Et XHTML-dokument er satt sammen av elementer i bokser Blokkelementer (div, p, ul, ol, table, br, hr ) Den naturlige layout for slike bokser er ovenfra og nedover "Inline"-elementer (span, img, em, ) Den naturlige layout for slike bokser er fra venstre mot høyre, ovenfra og nedover Boksene kan være nøstet Naturlig layout kan påvirkes med stiler Plasseringen av boksene på skjermen kan være absolutt eller relativ Dette er en forenklet beskrivelse. Det finnes mange om og men, og mange egenskaper/verdier som kan påvirke utleggingen! INF1040-CSS-2
Stilark Skiller beskrivelsen av utseendet av en nettside fra selve XHTML-markeringene Beskriver utseendet på en nettside på en enkel måte Gir god kontroll over utseendet Gir mulighet for å håndtere utseendet på et helt nettsted under ett Standardisert av W3C CSS1 lansert desember 1996» Ca 50 egenskaper for enkel formatering, fonter og farger CSS2 lansert mai 1998» Ytterligere ca 70 egenskaper for bl.a. nummerering, sideskift se spesifikasjonene på http://www.w3.org/tr/rec-css2/ og on-line-skolen på http://www.w3schools.com/css/default.asp Se eventuelt også http://www.webmonkey.com/reference/stylesheet_guide/ INF1040-CSS-3
Stiler og stilark En stil er en regel ( rule ) som gir nettleseren instruksjoner og hint om hvordan nettsiden skal presenteres Et stilark ( style sheet ) inneholder et antall slike regler Stiler kan angis "Inline": Som verdi til attributtet style i en markering <h1 style="font-size:18pt; text-align: center; color: blue; "> "Embedded": I et internt stilark i nettsidehodet <head> <title>beskrivelse INF1040</title> <style type = "text/css"> h1 {font-size:18pt; text-align: center; color: blue; } </style> </head> "Linked": I et eksternt stilark ( se neste lysark) INF1040-CSS-4
på filen example.css: Linket stilark med henvisning /* Eksempel på linket stilark */ h1 { font-size:18pt; text-align: center; color: blue; } <html> <head> <title>beskrivelse INF1040</title> <link rel="stylesheet" type="text/css" href="example.css"/> </head> <body> <h1> Innhold INF1040</h1> <p> </p> </body> </html> En fordel med det linkede stilarket er at det kan henvises til fra flere nettsider. Dette kan brukes til å gi et helhetlig preg på nettstedet! INF1040-CSS-5
Import av stilark @import-regelen i begynnelsen av stilarket importerer stilregler inn i stilarket Eksempel på bruk: @import url("filnavn.css") Flere importregler kan listes opp i begynnelsen av stilarket Importregler kan brukes både i "embedded" og i "linked" INF1040-CSS-6
CSS-deklarasjoner selector {property1: value1; property2: value2; ; } Eksempel: Selektor ("selector") angir hva deklarasjonen har virkning for h1 { text-align: center; } Deklarasjon ("declaration") Egenskap ("property") Verdi ("value") INF1040-CSS-7
CSS ("Cascading Style Sheets") Stiler presedens Hvis det ikke er angitt en nødvendig stil for et element, arves den fra det overordnede elementet Hvis stiler overlapper, gjelder følgende prioriteringer (kan endres ved hjelp av "important"): 1. style-attributtet i elementet 2. internt stilark 3. linket stilark 4. nettsurferens stilark (som regel etablert ved å konfigurere nettleseren) 5. nettleserens standard ("default") stilark INF1040-CSS-8
div og span to nyttige XHTML-markeringer XHTML-markeringer uten semantisk innhold Brukes fortrinnsvis for å sette stilark-regler på utvalgte deler av teksten div Blokkelement (som p and h1) Kan inneholde andre blokkelementer, som div, p, ul, ol og table span "Inline"-element (som a og img) INF1040-CSS-9
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>beskrivelse INF1040</title> <link rel="stylesheet" type="text/css" href="example.css"/> </head> <body> <h1> Innhold INF1040</h1> <div> I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer <ul> <li>tekst</li> <li>tall</li> <li>lyd</li> <li>bilder</li> </ul> og hva dette innebærer for <span class="emph">lagring</span>, <span class="emph"> overføring</span> og <span class="emph"> fremvisning</span>. </div> <hr /> <address>oppdatert 27. august 2004 av gerhard@ifi.uio.no</address> </body> </html> Eksempel: Revidert XHTMLtekst INF1040-CSS-10
Cascading Style Sheet stilarket på filen example.css: body { font-family: Arial, sans-serif; font-size:medium; } h1 { text-align: center; color: blue; border: solid blue; } ul { background: yellow; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; list-style-type: square; } li { color: black; background: white; margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; }.emph {font-style:italic;} INF1040-CSS-11
Universal Selector Type Selectors Descendant Selectors Child Selectors Adjacent-Sibling Selectors Attribute Selectors Mange typer selektorer Class Selectors ID Selectors Pseudo-Class Selectors Pseudo-Element Selectors Vi skal bare se på de som er markert med blå tekst INF1040-CSS-12
Universal-, type- og id-selektor Universal-selektoren * treffer alle elementtyper Eksempel: Sett all tekststørrelse til 12 punkter: * {font-size: 12pt;} Type-selektoren elementtype treffer alle elementer av denne typen Eksempel: Alle tekster i div-elementer skal være med rød skrift: div {color: red;} Id-selektoren #ident treffer det ene elementet med denne identifikatoren (se eksempel på lysark CSS-25 og CSS-28) #id217 {border-style:inset} INF1040-CSS-13
Klasse-selektor Et element kan tilordnes en klasse med attributtet class: <elementtypenavn class="klassenavn"> Eksempel: <span class="emph"> (jf. lysark CSS-10) Klasse-selektoren treffer elementer med angitt klasse Alle elementer i angitt klasse: *.klassenavn, evt..klassenavn Eksempel:.emph {font-style:italic;} Alle elementer med gitt elementtypenavn i angitt klasse: elementtypenavn.klassenavn Eksempel: span.emph {font-style:italic;} INF1040-CSS-14
Elementtyper og klasser er ortogonale elementtype *.klassenavn.klassenavn elementtypenavn.klassenavn elementtypenavn elementklasse INF1040-CSS-15
Egenskaper og verdier selektor {egenskap:verdi;} Hvilke egenskaper? font-size, font-weight, font-style, background-color, text-align, color, border-style, Hvilke verdier brukes? absolutte mål, relative mål, standardnavn, RGB-verdier, Vi skal se på noen typiske eksempler. For full oversikt over mulige egenskaper (properties) og verdier (values), se http://www.w3schools.com/css/css_reference.asp INF1040-CSS-16
CSS måleenheter Brukes for å angi spesifikke lengder og høyder CSS støtter flere lengeenheter: px pixels skjermpunkter pt points fontstørrelser cm centimeter in inch tomme em høyden på gjeldende font Relative mål % - prosent av gjeldende størrelse #em, der # er et tall larger, smaller Vær forsiktig med å bruke absolutte mål du vet for eksempel ikke størrelsen på skjermen, og heller ikke hvor store bokstaver brukeren foretrekker! INF1040-CSS-17
Fonter font-family Ordnet liste av fontnavn nettleseren bruker den første som er tilgjengelig Hensiktsmessig å avslutte med et generisk fontnavn Sett fontnavn med mellomrom i anførselstegn: "Arial Black" div.arial {font-family: Arial, Helvetica, sans-serif;} font-size Verdier: larger, smaller, eller spesifikk høyde div.big {font-size: 5em; } font-style Verdier: normal eller italic div.emph { font-style: italic; } font-weight Verdier: normal, lighter, bold, eller bolder div.bolder { font-weight: bolder; } INF1040-CSS-18
Fargeverdier og hva de brukes til Fargeverdier kan angis på tre måter Navngitte farger: red, blue, green, Heksadesimal RGB-verdi: #FFCC00, #00FF00 Desimale RGB verdier: rgb(123, 123, 123) Se http://www.w3schools.com/css/css_colornames.asp Bruk av fargeverdi Farge på selve innholdet i elementet span.green { color: #00FF00; } Bakgrunnsfarge div.highlight { background-color: #FFCC00; } INF1040-CSS-19
Tekst Linjehøyde Verdier: normal, number, length, percentage div.wellspaced {line-height: 150%; } Tekstjustering Verdier: left, right, center, justify div {text-align: justify; } Vertikal justering Verdier: top, middle, bottom, sub, super td.heading {vertical-align: top; } Tekstdekorasjon Verdier: none, underline, overline, line-through span.underline {text-decoration: underline;} INF1040-CSS-20
Marger, kanter og polstring marg polstring Brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst polstring marg Kant ("border") kant Avgrensningen av boksen Kan enten være uten utstrekning (og dermed usynlig), eller en linje med valgt utseende, tykkelse og farge Marg ("margin") Mellomrom mellom kanten på dette og andre elementer Egenskaper: margin-top, margin-right, margin-bottom, margin-left To nabomarginer slås i bestemte tilfeller sammen til én Polstring ("padding") Mellomrommet mellom elementinnholdet og kanten på boksen Egenskaper: padding-top, padding-right, padding-bottom, padding-left INF1040-CSS-21
En mal for et nettsted INF1040-CSS-22
Strukturen på et nettsted relativ URL Hjemmeside index.html underside underside absolutt URL fremmed nettside Linker innen eget nettsted bør være relative underside Linker til fremmede sider må være absolutte Det bør alltid være en link tilbake til hjemmesiden INF1040-CSS-23
XHTML-bokser eller tabellelementer? En layout som dette ble tidligere laget ved hjelp av tabeller. Vi skal istedenfor posisjonere XHTML-bokser: Ingen misbruk av tabeller slipper å gå surr i layout-tabeller og vanlige tabeller Nettleseren arbeider raskere med oppbyggingen "Caching" av stilarket senker mengden av overførte data Men ikke alle nettlesere håndterer utlegging av XHTML-bokser korrekt ennå! INF1040-CSS-24
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>layout-demo</title> </head> <div style="width:150px; height:100px; float:left; background-color:yellow"></div> <div style="margin-left:160px; width:auto; height:100px; backgroundcolor:red;"></div> <hr style="clear:left"/> <div style="width:150px; height:10px; float:left;background-color:blue"></div> <div style="margin-left:160px; width:auto; background-color:green;"> <br /> <br /> </div> <hr style="clear:left"/> <address>oppdatert 16. september 2005 av <a href="mailto:noen@ifi.uio.no">noen@ifi.uio.no</a></add ress> </body> Layout med fire bokser INF1040-CSS-25
/* Et eksternt stilark Forslag til standardoppsett for nettstedsider */ /* Logo øverst til venstre */ div.logo {width:150px; height:100px; border:none; float:left;} /* Blokk for temaoverskrift til høyre for logo - margin-left hindrer overlapp */ div.temablokk {margin-left:160px; width:auto; height:100px;} div.temaoverskrift{font-size:3em; color:blue; text-align:center;padding-top:0.5em;} /* Navigasjonsblokk med knapper til venstre under logo */ div.navigblokk {width:140px; border:none; padding-top:1.0em; float:left;} div.knapp {width:130px; border-style:outset; border-width:thick; background-color:green; text-align:center; margin-bottom:0.4em; } #klikketknapp {border-style:inset; } a.knappetekst {text-decoration: none; color:white;font-family:arial, sans-serif; font-weight:bold; font-size:1.5em;} /* Innholdsblokk i restfeltet - margin-left hindrer overlapp med navigasjonsblokken */ div.innholdsblokk {margin-left:160px; width:auto; border:none; } /* Sett standard stil for hr slik at etterfølgende blokker tvinges nedenfor */ hr {clear:left;} body {background-color:white} ul {list-style-type:square} /* Laget av Gerhard Skagestein 16. september 2005 */ Mal stilarket INF1040-CSS-26
Mal side 1: Nettsidehode <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>en tittel</title> <link rel ="stylesheet" type = "text/css" href = "stiler.css"/> </head> INF1040-CSS-27
Mal side 2: Logo og temaoverskrift <body> <!-- logo bør være 130 x 100 piksler --> <!-- klikk på logo fører til index.html --> <div class="logo"> <a href="index.html"><img class="logo" src="logo.gif" width="130" height="100" alt= "til startsiden" /></a> </div> <! Blokk for temaoverskrift --> <div class="temablokk"> <div class="temaoverskrift">temaoverskrift</div> </div> <!-- Denne hr tvinger etterfølgende blokker under de foregående --> <hr /> INF1040-CSS-28
Mal side 3: Navigasjonsknapper <!-- sett opp navigasjonsblokk med knapperad til venstre i bildet --> <div class="navigblokk"> <!-- sett id= klikketknapp" på knappen som linker til sin egen side --> <div id="klikketknapp" class="knapp"><a class="knappetekst" href="side1.html" >Side1</a></div> <div class="knapp"><a class="knappetekst" href="side2.html"> Side2</a></div> <div class="knapp"><a class="knappetekst" href="side3.html"> Side3</a></div> </div> INF1040-CSS-29
Mal side 4: Innholdsblokk <div class="innholdsblokk"> <h1>hovedoverskrift</h1> <div>brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst <ul> <li>listeelement</li> <li>listeelement</li> <li>listeelement</li> <li>listeelement</li> </ul> brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst brødtekst. </div> </div> INF1040-CSS-30
Mal side 5: Avslutning <!-- Denne hr tvinger etterfølgende blokker under de foregående --> <hr /> <!-- Publiser ALDRI e-post-adresser i klartekst --> <address>oppdatert 1. september 2004 av <a href="mailto:noen@ifi.uio.no">noen@ifi.uio.no</a></address> </body> </html> INF1040-CSS-31
Blir ikke nettsiden som forventet? Du kan ha gjort en feil: Husk at nettleserne neglisjerer det de ikke forstår. En enkel liten trykkfeil kan være nok (for eksempel : heigth istedenfor height) Nettleseren kan ha gjort en feil: CSS 2 er en relativt ny standard, og enkelte nettlesere skjønner ikke alt, eller gjør feil. Og husk: nettleserne neglisjerer det de ikke forstår. Det kan lønne seg å validere stilarket: Prøv http://jigsaw.w3.org/css-validator/ INF1040-CSS-32