HUMIT1731 Hypermedier Introduksjon til CSS Uke 37

HUMIT1731 uke37 Kåre A. Andersen 2 CSS = Cascading Style Sheets. På norsk snakker vi om ”stilark” En teknikk utviklet av World Wide Web Consortium (W3C ) for å kunne skille form og innhold i html-dokumenter

HUMIT1731 uke37 Kåre A. Andersen 3 CSS-syntaks h1 {color : red} sier vi er en regel for hvordan h1- elementet skal vises i nettleseren Generelt: selektor {egenskap: verdi; egenskap: verdi;} Selektor-delen – plassert foran en krøllparentes - refererer normalt til ett eller flere elementer som stilregelen skal anvendes på Innholdet i krøllparentesen kalles deklarasjonsdelen og består av ett eller flere egenskap-/verdi-par. Egenskap og verdi skilles med kolon (:) og flere slike par med semikolon (;)

HUMIT1731 uke37 Kåre A. Andersen 4 Flere egenskaper for samme element Flere egenskaper kan spesifiseres i forhold til et element: h1 {color : red} h1 {font-family : serif} eller altså lettere slik: h1 {color : red; font-family : serif}

HUMIT1731 uke37 Kåre A. Andersen 5 Flere elementer samme stil Enten: p {font-size: 12pt} ul {font-size: 12pt} ol {font-size: 12pt} eller elementene ramses opp med komma mellom hvert: p, ul, ol {font-size: 12pt}

HUMIT1731 uke37 Kåre A. Andersen 6 Foreldre-barn-relasjoner I forrige eksempel definerte vi samme stil for både ol- og ul-elementet. Anta man ønsket å ha ulik stil på listeelementene (li) i de to listetypene. Siden li er barn av ol og ul, kan vi sette opp reglene slik: ol li {list-style-type: decimal} ul li {list-style-type: square} (altså uten komma mellom elementnavnene)

HUMIT1731 uke37 Kåre A. Andersen 7 Anvende CSS på XHTML Stilene kan legges direkte til elementer Deklareres innledningsvis i dokumentet Eller plasseres i en eller flere eksterne filer.

HUMIT1731 uke37 Kåre A. Andersen 8 Angivelse av stil direkte til et element Vha. -og -elementene kan du f.eks. anvende en stil på deler av et dokument: på hele seksjoner, på tekst uten avsnittsmerker (inline text): Overskrift Et blått avsnitt med litt grønn skrift midt inne i den løpende tekst

HUMIT1731 uke37 Kåre A. Andersen 9 Stilarkdefinisjoner i - elementet h1 {color : red; font-family: sans-serif} ol li {list-style-type: decimal} ul li {list-style-type: square; color : blue}

HUMIT1731 uke37 Kåre A. Andersen 10 Stilark på ekstern fil I head-elementet legger vi følgende setning: rel-attributtet sier at selve css-fila er relativ til XHTML-dokumentet href-attributtet viser til css-fila og type-attributtet viser at dette er en tekst/css-fil

HUMIT1731 uke37 Kåre A. Andersen 11 Stilark på ekstern fil CSS-eksempel

HUMIT1731 uke37 Kåre A. Andersen 12 Ulike medieformer, ulike CSS- filer For visning på skjerm: For utskrift

HUMIT1731 uke37 Kåre A. Andersen 13 Hva betyr så ”cascade” i CSS? Cascade (”strømme over”) refererer til at man kan ha flere stiler knyttet til et XHTML-dokument – og hvor den stilen som er definert nærmest taggen ”vinner” ved overlapp: ekstern ”embedded”/intern ”inline”

HUMIT1731 uke37 Kåre A. Andersen 14 Stilark og nettleser I tillegg er det slik at nettleseren opererer med et ”default” stilark som brukes for de elementene som ikke er angitt i andre stilark Det vil imidlertid være mulig å endre på nettleserens stilark Sum: web-sidas stiler går foran brukerens definisjoner og som igjen har forrang i forhold til nettleserens interne stilark Vil man at en definisjon uansett skal vinne, markerer man dette med” ! important”: h1 {color : red; font-family: sans-serif ! important}

HUMIT1731 uke37 Kåre A. Andersen 15 Arv Vi snakker om foreldre og barn om en tag som er inneholdt i en annen. er et naturlig barn av og vil i eks. under også være barn av : p {color:blue} Et element som er omsluttet av et annet, sies å være barn av dette

HUMIT1731 uke37 Kåre A. Andersen 16 Arv Et element som er omsluttet av et annet, sies å være barn av dette, men i dette tilfellet gjelder rødfargen kun første p-tag og dennes barn … Resultatet blir slik i nettleseren:

HUMIT1731 uke37 Kåre A. Andersen 17 Arv

HUMIT1731 uke37 Kåre A. Andersen 18 class Ofte ønsker vi flere ulike stiler til samme element p.blue {color : blue} p.red {color : red} p.black {color : black} Advarsel! Vokt dem for hunden! Hilsen vaktselskapet

HUMIT1731 uke37 Kåre A. Andersen 19 class Over har vi definert klasser for elementet p. Det betyr at de bare kan anvendes for p. Ønsker vi å bruke en stil på flere elementer skriver vi slik:.svart_sentrert {color:black; text-align=”center”} Svart og sentret overskrift Dette avsnittet vil også bli sentrert

HUMIT1731 uke37 Kåre A. Andersen 20 ID Vha class kan vi altså tilordne stiler til alle forekomster av et element, eller til et hvilket som helst element Hvis vi derimot vil knytte en stil til en spesiell forekomst av et element, kan vi bruke id-selektoren, slik: # spesial {color: red} Viktig!

HUMIT1731 uke37 Kåre A. Andersen 21 Boks-modellen i CSS

HUMIT1731 uke37 Kåre A. Andersen 22 Posisjonering static ingen posisjonering. div {position:static} relative relativ plassering i forhold til gjeldende ”vindu” eks: div {position:relative; left:10px; top:50px} absolute plasseres i forhold til nettleservinduets øverste venstre hjørne eks:div {position:absolute; top:50%; left:50%} fixed elementets posisjon kalkuleres på samme måte som med absolute, men i tillegg vil den alltid ligge fast i vinduet, selv om brukeren scroller i dokumentet. eks:div {position:fixed; left:0px; top:0px; width:100%; background-color:yellow}

HUMIT1731 uke37 Kåre A. Andersen 23 Posisjonering top Verdier: ex, em, px, cm, mm, pc, in, pt, %, auto eller inherit. left right bottom width height.

HUMIT1731 uke37 Kåre A. Andersen 24 mer… z-index z-index bestemmer rekkefølgen elementet blir plassert (oppå hverandre med høyest verdi øverst) visibility Kan ha verdiene: visible, hidden, collapse eller inherit overflow visible elementet utvider seg for å vise hele innholdet hidden innhold som er utover elementets bredde og høyde vises ikke. scroll elementet skal ha scrollbar. auto elementet får scrollbar dersom det er behov for det. inherit arver egenskapen fra foreldre-elementet Les mer: CSS1 ( og CSS2 (

HUMIT1731 uke37 Kåre A. Andersen 25 Posisjonering Vi har tidligere posisjonert tekst og bilder vha. tabeller: ger/html2/tabeller.htm#tabellayout ger/html2/tabeller.htm#tabellayout Nå ønsker vi å oppnå det samme vha. CSS og posisjonering: th09/uke37/imgpos.htm th09/uke37/imgpos.htm

HUMIT1731 uke37 Kåre A. Andersen 26 Posisjonering (eks.) Ad Flekkefjord

HUMIT1731 uke37 Kåre A. Andersen 27 Posisjonering (eks.) Flekkefjord by

HUMIT1731 uke37 Kåre A. Andersen 28 Posisjonering (eks. forts.) Meny Tur i byen Tur på museet Andre severdigheter Hoteller Avisen Agder

HUMIT1731 uke37 Kåre A. Andersen 29 Posisjonering (eks. forts.) <img style="border:0;width:88px;height:31px" src=" alt="Valid XHTML 1.0 Strict" /> <img style="border:0;width:88px;height:31px" src=" alt="Valid CSS!" />

HUMIT1731 uke37 Kåre A. Andersen 30 Eksempel Venstre kolonne til navigering Høyre kolonne til innhold Fast plass til tekstlogo Bunntekst med div. copyright-info

HUMIT1731 uke37 Kåre A. Andersen 31 Stil for body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; margin: 0px; }

HUMIT1731 uke37 Kåre A. Andersen 32 Stil for venstre kolonne #venstrekol { float:left; width:100px; background-color:#eeeeee; color:#000066; height:400px; }

HUMIT1731 uke37 Kåre A. Andersen 33 Stil for høyre kolonne #hoyrekol { width:700px; }

HUMIT1731 uke37 Kåre A. Andersen 34 Stil for tekstlogo #logo {background-color:#eeeeee; color:#cc66cc; font-size:x-large; border-bottom:1px solid #000000; padding:inherit }

HUMIT1731 uke37 Kåre A. Andersen 35 Stil for innholdsboksen.innhold { padding:20px 0px 0px 150px; } Her har vi satt alle verdiene på én gang – i denne rekkefølgen: top, right, bottom, left.

HUMIT1731 uke37 Kåre A. Andersen 36 Stil for ”bunntekst”.fot{ font-size:xx-small; text-align:center; }

HUMIT1731 uke37 Kåre A. Andersen 37 Stil for navigering.navigering { text-decoration:none; margin:15px; display:block; } a.navigering:link{ color:#000066; background-color:#eeeeee; } a.navigering:visited{ color:#000000; background-color:#eeeeee; } a.navigering:hover{ color:#cc66cc; background-color:#eeeeee; }

HUMIT1731 uke37 Kåre A. Andersen 38 Resultatet i nettleser