Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Lene Hoff 18.7.2007 Lærestoffet er utviklet for faget LN515D XML Teknologi 1. Resymé: I denne leksjonen skal vi ta for oss CSS (Cascading StyleSheet). Dette er en standard som brukes for å sette stiler/formateringer på et XHTML/XML-dokument. Vi kommer til å ta for oss oppbygningen av et CSSdokument, sette stilsetting på tekst og legge inn luft mellom tekstblokker. Innhold 1.1. INNLEDNING... 1 1.2. GRUNNLEGGENDE OPPBYGNING... 2 1.3. LENKE CSS-FILEN TIL ET DOKUMENT... 4 1.4. DISPLAY-EGENSKAPER... 4 1.5. FLERE SYNTAKSREGLER FOR SELEKTOR... 5 1.6. ARV I CSS... 7 1.7. VERDIER... 8 1.8. FARGE OG SKRIFT... 9 1.8.1. Farge... 9 1.8.2. Skrift... 10 1.9. SPACE-EGENSKAPER... 12 1.9.1. Margin... 12 1.9.2. Border... 15 1.9.3. Padding... 16 1.9.4. Size... 17 1.10. POSISJONERING... 17 1.11. SETTE INN BILDER... 18 1.1. Innledning I denne leksjonen skal vi legge til stiler på XML-dokumenter. Til dette skal vi brukes CSS (Cascading Style Sheet). Leksjonen tar for seg oppbygningen av et CSS-dokument, hvordan det kan knyttes opp mot et XML-dokument og gjennomgang av en rekke egenskaper til CSS. Ved bruk av CSS kan man skille stilen fra semantikken og strukturen til XHTML- og XMLdokumenter. Dette gjør man ved å legge stil-informasjoner i en CSS-fil og så lage en lenke til denne filen i XHTML/XML-dokumentet. Når det gjelder XML-dokumenter kan man også bruke en teknologi som heter XSL (Extensible Style Language) for å legge på stiler. Dette er mye mer avansert enn CSS med flere muligheter og vi vil komme tilbake til det senere i kurset. Fordelen med CSS er at det er støttet av de fleste nettlesere, men vær klar over at noen nettlesere har sin egen måte å vise dem på. En del av dere har kanskje vært borti CSS tidligere i tilknytning til HTML-filer. Tidligere ble formateringer lagt rett inn i HTML-filen, men World Wide Web Consortium (W3C) anbefaler Opphavsrett: Forfatter og Stiftelsen TISIP
nå å skille formateringene ut i en egen CSS-fil. Dermed er oppgaven til CSS å fortelle nettlesere hvordan dataene i et HTML/XHTML/XML-dokument skal vises. I HTML/XHTML har vi som kjent et fastsatt sett med elementer som brukes, og nettleseren som viser dokumentet vet hvordan de enkelte elementene skal vises frem. Dette gjelder ikke for XML. Nettleseren aner ikke hva et navn-element vil si eller hvordan det skal vises. Av den grunn er det enda viktigere å få knyttet stilark til XML-dokumenter. Det er viktig å være klar over at CSS er case-insensitivt og skiller ikke mellom store og små bokstaver. I læreboken er alt skrevet med små bokstaver, dette for å gjøre det likt som i XHTML/XML-dokumenter (XML er case-sensitivt). I denne leksjonen vil de ulike egenskapene til CSS få et standardoppsett hvor det står navn på egenskapen, mulig verdier og defaultverdi. For enkelte egenskaper er det veldig mange ulike verdier, og det vil derfor være noen steder hvor ikke alle verdiene settes opp. Da tas bare de vanligste verdiene med. 1.2. Grunnleggende oppbygning CSS-stilarket består av et sett med regler. Reglene spesifiseres for de ulike elementene i XHTML/XML-dokumentet og er bygd opp på følgende måte: Regel (Rule) Selector Deklarasjon navn { color: red; font-size: 15pt Deklarasjonsblokk Egenskap Verdi I eksemplet over er reglen vist med rød skrift og består av en selector som refererer til det elementet reglen gjelder for. Her setter vi formateringer til elementet navn. Videre har vi en deklarasjonsblokk med selve formateringene. Deklarasjonsblokken starter med { før selve deklarasjonene kommer og slutter med. En deklarasjon består av en egenskap (f.eks. color) og den tilhørende verdien med kolon som skiller mellom dem. Her sier vi at teksten til navnelementet skal være rød og ha 15 pt som skriftstørrelse. Det kan være alt fra ingen til mange deklarasjoner i en deklarasjonsblokk. De ulike deklarasjonene skilles fra hverandre med semikolon (;). Det er valgfritt om en vil bruke semikolon etter den siste deklarasjonen. I figuren over har vi en regel som gjelder for et element. Men regelen kan også brukes på flere elementer og vil da se slik ut: adresse, postnr { color: blue; Det går også an å legge til kommentarer i CSS-filer. Kommentarer starter med /* og slutter med */. Her er et eksempel: /* Her kan en for eksempel skrive relevante kommentarer til programmet */ side 2 av 20
Eksempel Vi skal nå se på et eksempel som vil bli brukt gjennom hele leksjonen. Det tar for seg en konkurranse i roing med flere lag, og to deltagere på hvert lag. Vi skal legge til et stilark på for å formatere teksten i dokumentet. Her er XML-dokumentet (konkurranse.xml): <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href="konkurranse.css"?> <konkurranse> <gren>roing</gren> <dato>26-08-2004</dato> <arrangør> <klubb>ski Roklubb</klubb> <kontakt> <navn>anders Moen</navn> <telefon>454 34 333</telefon> </kontakt> </arrangør> <lag id="10"> <klubb>sandes Roklubb</klubb> <deltager> <navn>marius Olsen</navn> <alder>23</alder> </deltager> <deltager> <navn>torgeir Tvett</navn> <alder>22</alder> </deltager> </lag> <!--Flere lag--> </konkurranse> Vi har lagt til et enkelt stilark, konkurranse.css: gren{ font-size: 20pt; font-weight: bold; dato{ display: block; arrangør{ display: block; lag{ deltager{ font-style: italic; side 3 av 20
Når vi åpner konkurranse.xml i en nettleser vil det se ut som: Hvis du ikke får opp formateringene som vist her, kan det skyldes at du har skrevet en feil i selve CSS-filen. Det blir ikke vist noen feilmeldinger når du skriver feil. Det eneste som skjer når nettleseren ikke skjønner hva som står i CSS-filen (fordi du har skrevet feil), er at regelen ignoreres. De vanligste feilene er feil med store og små bokstaver, feil bruk av semikolon, ;, og kolon, :, bruker parentes () istedenfor klamme {, eller feil med selve CSS-lenken i dokumentet. Sjekk derfor dette først hvis du får problemer. I fortsettelsen tas det utgangspunkt i dette eksemplet med stilark. 1.3. Lenke CSS-filen til et dokument På linje 2 i eksemplet over hadde vi en prosessorinstruksjon til stilarket konkurranse.css: <?xml-stylesheet type="text/css" href="konkurranse.css"?> Denne linjen skal stå i prologen, altså før selve rotelementet. Som vi husker fra forrige leksjon betydde xml-stylesheet at et stilark skulle kobles til XML-dokumentet. Dette kan enten være et CSS-dokument eller et XSLT-dokument, noe som angis av attributtet type. Her har type-attributtet verdien text/css. Det siste attributtet, href, angir filnavnet til stilarket. I eksemplet står det bare et filnavn, noe som betyr at CSS-filen må ligge i samme mappe som XML-dokumentet. Hvis stilarket ligger i en annen mappe må du spesifisere hvilken mappe dette er, da med enten en relativ eller en absolutt URL. 1.4. Display-egenskaper For å bestemme hvordan teksten i de ulike elementene skal vises kan blant annet displayegenskapen brukes: display block, inline, none (med flere) inline Egenskapen kontrollerer hvordan nettleseren viser en elementtekst. Gis egenskapen verdien block, vil det settes inn et linjeskift før og etter elementteksten. Det kan sammenlignes med p-elementet i XHTML. Verdien inline gir all teksten på en og en linje, som vil skje hvis egenskapen ikke benyttes. For å skjule hele elementteksten kan verdien none brukes. side 4 av 20
1.5. Flere syntaksregler for selektor Over så vi at en selektor var det som står foran selve reglen. Her vises selektoren navn: navn { color: blue; I dette kapitlet skal vi se nærmere på en del andre syntakser i forbindelse med selektorer. Vær oppmerksom på at det kan forekomme forskjeller ved bruk av ulike nettleserne. Under vil konkurranse-eksemplet beskrevet i kap 1.2 benyttes. Universal selektor Vi har en selektor som kalles universal selektor, nemlig; *. Denne kan brukes alene, eller foran andre selektorer. Her er benytter vi selektoren til å sette all tekst til blå: * { color: blue; Da vil skriftfargen på hele dokumentet endres til blå. Etterkommer selektor Etterkommer (decendant) selektor er en selektor hvor du kan angi nærmere hvor et element er plassert i dokumentet. Vi kan tenke oss at tekstfargen til deltagerens navn skal skrives med rødt. Nå finnes det flere navn-elementer i XML-dokumentet. Både navn for en deltager og navn på kontaktperson for arrangør. Derfor må vi bruke vår etterkommer selektor for å bare fargelegge teksten til deltagerens navn. Da skrives foreldreelementet og barneelementet på følgende form: foreldre barn { Her vil barn være et barnelement av foreldre, og det må ikke være et direkte barneelement av foreldre. Deltageren kan dermed få ny farge slik: lag navn { color: blue; Isteden for lag kunne du også skrevet deltager her. I nettleseren vil dette se ut som: Barneselektor Dersom vi ønsker å sette en stil på en bestemt elementtype som er direkte barn av et annet element brukes > symbolet: foreldre > barn { Istedenfor linjen i eksemplet over kunne vi da skrevet: deltager > navn { color: blue; Nå får vi samme resultat som nettleservinduet over viser. side 5 av 20
Søskenselektor En annen selektor er nærliggende søskenelement (adjacent sibling) selektor. Denne selektor skrives på formen: element1 + element2 { Her vil element1 og element2 være søskenelementer, med det menes at de har samme foreldreelement og element1 blir umiddelbart fulgt av element2. Følgende illustrerer dette: <p>norske <b>marit Bjørgen</b> var den store helten i <i>val di Fiemme</i> da hun vant gull. Les mer <a href= http://www.vg.no/sport/ski/vm_nordisk_03/ >her</a>.</p> Her er det tre ulike elementer innenfor det samme p-elementet, og det er søskenelementene b-, i-, og a-elementene. Da kan vi si at: - Elementene b og i er nærliggende søskenelement - Elementene i og a er nærliggende søskenelement - Elementene b og a er ikke nærliggende søskenelement Et eksempel hvor barneselektor er nyttig er blant annet ved overskrifter. Vi setter ofte inn ekstra mellomrom før og etter overskrift elementer. Men dette kan bli litt mye i tilfeller hvor XHTML s h2 element umiddelbart følger etter et h1 element og vi vil redusere dette mellomrommet: h1 + h2 { margin-top: -3mm; Vi vil senere i leksjonen komme nærmere inn på selve egenskapen i dette eksemplet. Attributtselektor Det finnes også attributtselektorer for å velge de elementene med et bestemt attributt eller verdi på et attributt. Vil her ta med to av dem som er ført opp i boken, og kun disse to inngår i pensum: - Selektor hvor et bestemt attributt må matche. Altså en CSS-regel for de elementene som har et bestemt attributt: selektor [attributt] { egenskap: verdi; Eksempel hvor vi vil at alle lag som har registrert id i lag-elementet skal vises med rødt: lag [id] { color: red; - Selektor hvor en bestemt verdi til et bestemt attributt må matche: selektor [attributt= verdi ] { egenskap: verdi; Eksempel her er at alle mobilnr til en person skal skrives med grønt. Da kan vi tenke oss at vi har et telefon-element og et attributt som heter type. Attributtet kan blant annet ha verdien mobil: telefon [type= mobil ] { color: green; Hvis du vil lese mer om ulike selektorer, kan du gå inn på følgende hjemmeside: http://www.westciv.com/style_master/academy/css_tutorial/selectors/index.html. side 6 av 20
1.6. Arv i CSS Når en lager stilark kan et stilark lenkes til et annet stilark. En kan også lenke flere stilark til samme dokument. Da kan det hende at flere stilark for det samme XML-dokumentet spesifiserer stiler til samme element. En må derfor ha regler for hvilke stiler som gjelder foran andre. Det viktigste er at spesifikke regler gjelder foran generelle regler. Med oppretting av CSS-stilark brukes en funksjon som kalles arv. Det vil si at egenskaper som tilegnes et gitt element, arves til alle underliggende elementer (barneelementer). Dette kan illustreres ved å sette lag-elementet i konkurranse-eksemplet til skriftstørrelsen 14 pt: lag { font-size: 14pt; Nå vil alle barnelementer til lag-elementet, som f.eks. alder-elementet, få skriftstørrelse 14pt og dette kalles arv. Dersom en ønsker at alder-elementene ikke skal ha skriftstørrelse 14pt, men kanskje 12pt, må dette spesifiseres for dette spesifikke elementet: alder { font-size: 12pt; Dermed vil alder-elementet ha en annen skriftstørrelse enn resten av barneelementene til lag. Dette illustrerer at spesifikke regler gjelder foran mer generelle regler. De fleste egenskaper arves, men ikke alle. Her er noen av egenskapene som ikke arves: - Display - Background - Vertical align side 7 av 20
1.7. Verdier Av eksemplet over ser en at benevnelsen pt spesifiserer skriftstørrelsen. Det er flere måter å spesifisere verdien til egenskapene. Før vi går inn på de ulike typer egenskaper i CSS må en kjenne til noen ulike benevnelser og hva disse betyr. Normalt deler en spesifiserte verdier inn i absolutte og relative verdier. - Absolutte verdier. Her settes en bestemt verdi uavhengig av hvilke verdier som gjelder for resten av dokumentet. En behøver altså ikke å beregnes noen verdier ut i fra de andre elementenes verdi. Eksempel på dette kan være å sette en bestemt farge. Sier vi at teksten skal være blå er det ikke noen tvil rundt fargevalget. Andre eksempler kan være absolutte verdier på lengdeenheter. Det er da viktig å være klar over hva resten av systemet bruker, så det ikke oppstår noen rare størrelser på enkelte elementer. Her er en liste over ulike enheter: in: inches cm: centimeter mm: millimeter pt: points (i CSS2 er dette lik 1/72 av en in) pc: picas (1 pi = 12 pt) px: pixel - Relative verdier. Spesifiserer en verdi i forhold til andre verdier. Et eksempel her kan være at en type skrift skal være 15% større enn en annen. Et annet eksempel er verdier hvor vi kan skrive bolder (tykkere). Da vil teksten bli et hakk tykkere enn den verdien som allerede finnes. Under er det gitt noen enheter som er relative: em: skriftstørrelsen til den relevante skriften der 1em er skriftstørrelsen som foreldreelementet har. Denne kan endres relativt ved å skrive henholdsvis 2em (større) eller 0.5em (mindre). ex: brukes på samme måte som em, men gjelder for høyden - Verdiene kan være både heltall og desimaltall. Ønskes desimaltall må punktum (.) brukes som separator, f.eks. 12.5 - Prosent kan også brukes i flere tilfeller. Dette vil være en relativ verdi som må beregnes i forhold til verdien denne egenskapen ellers ville hatt. I dette kurset bruker vi som regel benevnelsen points (pt) bak størrelser på skrift. Hvis ingen benevnelsen føres opp brukes pixler (px) i CSS. Det vil vises som en mindre størrelse på skriften. side 8 av 20
1.8. Farge og skrift Vi vil nå se på 2 typer egenskaper som gjelder i CSS. Det er farge på tekst og bakgrunn, og ulike skrifttyper og størrelser. 1.8.1. Farge Det er to typer fargegiving vi skal se på, nemlig farge på tekst og farge på bakgrunnen. Her er spesifikasjonene for hver av dem: color angis som navn på farge, RGB- eller heksadesimalt tall avhengig av nettleser background angis som navn på farge, RGB- eller heksadesimalt tall, transparent transparent Selve fargen kan angis på flere måter. Mange farger er navngitte og kan brukes direkte med navn. Eksempel på dette så vi over da vi gav teksten fargen blå (blue). Alternativt kan vi benytte RGB-verdier eller heksadesimale verdier, hvor det angis en verdi for hver av fargene rød, grønn og blå. Hvis du ikke har brukt dette før kan du lese om det i læreboka 1 side 534. Eksempel på heksadesimal verdi er #FF0000 (rød, husk å bruk # foran verdi), og for RGBverdi; rgb(50,50,150). Tabell 12.1 læreboka viser noen eksempler på farge med RGBverdier og Heksadesimale verdier. Vi kan nå gjøre bakgrunnsfargen i eksemplet over til gul og teksten til blå: konkurranse{ color: #0000FF; background: yellow I nettleserne: Internet Explorer Opera 1 "XML Primer Plus" av Nicholas Chase (2003). side 9 av 20
Her ser du et typisk eksempel på at nettlesere behandler egenskapene ulikt. I Internet Explorer ble det ikke helt slik vi hadde tenkt. For å få hele bakgrunnen til å bli gul kan vi sette display:block sammen med resten av egenskapene over: konkurranse{ display: block; color: #0000FF; background: yellow Nå vil Internet Explorer bli mer likt Opera, men du vil fortsatt få en hvit kant rundt. 1.8.2. Skrift Det er flere egenskaper som justerer selve skriften. Fra tekstbehandlingsprogram vet du at det kan angis skrifttype, størrelse, stil og tykkelse. Dette er også mulig i CSS. Her er spesifikasjonene for dem: font-family serif, sans-serif, cursive, fantasy, monospace eller navn på skrifttype som f.eks Times New Roman Times New Roman (som regel) font-size i punkter (pt), piksler (px) eller en av verdiene: small, large, x-large, xx-small eller medium 12pt font-weight bold, normal eller bolder, lighter. Tallverdier fra 100-900 normal font-style italic, normal, oblique normal Det er flere måter å bruke disse egenskapene på (med unntak av font-style). For størrelse (font-size) og tykkelse (font-weight) er det mulig å bruke både relative og absolutte verdier. Vi kan endre på tre a v reglene i vårt stilark. Vi vil angi at lagene skal skrives med skriftty pe sans-serif og i størrelse medium. Videre har vi fra tidligere deltagerne i italic. Her skal det utvides slik at deltagerens navn også blir i bold. Reglene som er endret vises her: side 10 av 20
lag{ font-family: sans-serif; font-size: medium; deltager{ font-style: italic; navn{ font-weight: bolder; Alle disse egenskapene er enkle å endre. Vær klar over at for font-family må alle verdier lengre enn et ord, slik som Times New Roman, ha hermetegn rundt seg: Times New Roman ;). Sentrere tekst For å sentrere tekst brukes en egenskap som heter text-align. Den spesifiserer hvordan teksten fra et element skal plasseres i horisontal retning: gren{ font-size: 20pt; font-weight: bold; text-align: center; I nettleseren: text-align left, right, center, justify, string left Vi kan sette grenen det konkurreres i, i senter på skjermen: Bruk tid på å prøve deg frem med disse egenskapene hvis du ikke er kjent med dem. side 11 av 20
1.9. Space-egenskaper Når nettleseren viser et XML-dokument, plasseres teksten fra de ulike elementene over en eller flere sider. Teksten på hver side er organisert i nøstede bokser. Man kan si at hver paragraf er en boks og at hver linje i paragrafen er en boks. Så vi har altså flere bokser som igjen er delt inn i mindre bokser. Elementet ligger i en boks. Den totale bredde er lik bredde av elementet, bredde til padding, bredde til border og bredde til margin. Det samme med høyde. Margin Border Padding Elementet La oss se på en del egenskaper til en boks: Margin - setter en transparent kant rundt boksen Border - angir en synlig ramme (kan fjernes) Padding - legger til et tomt område utenfor et elements innhold og innenfor en synlig ramme (border) Size - angir høyde og bredde (både innholdsområde og tomme områder) Relative og absolute positioning - angir plassering av et element på en side 1.9.1. Margin Margin er mellomrommet mellom et elements bounding box 2 og et nærliggende elements bounding box. Den består av fem egenskaper margin, margin-top, margin-bottom, margin-left, margin-right px, em eller % 0 Som du ser kan denne egenskapen både ha en absolutt verdi eller en relativ verdi (em). 2 Bounding box består altså av mellomrommet mellom elementteksten, padding og border. side 12 av 20
Vi kan legge til egenskapen margin-left til lag-elementet for å flytte teksten noe mot høyre: lag{ I nettleseren: font-family: sans-serif; font-size: medium; margin-left: 12px; Eventuelt kan vi bruke en relativ verdi: lag{ font-family: sans-serif; font-size: medium; margin-left: 2em; Over gav vi bare verdi til en av sidene. Det er også gang ved å bruke egenskapen margin: lag{ font-family: sans-serif; font-size: medium; margin: 20px; Nå vil alle margene få den samme størrelsen: mulig å gi en verdi til alle sidene på en side 13 av 20
I noen tilfeller vil du ha ulik størrelse på margene og kan skrive: lag{ font-family: sans-serif; font-size: medium; margin: 20px 12px; Her er det angitt to verdier for egenskapen margin. I disse tilfeller er det spesielle regler for hvilke marger som får de ulike verdiene: - Når en verdi er satt; verdien gjelder for alle margene - Når to verdier er satt; verdien til den første gjelder for topp og bunn, mens den andre verdien gjelder for høyre og venstre marg - Når tre verdier er satt; første verdi gjelde for topp, den andre verdien gjelder for høyre og venstre marg, mens den siste verdien gjelder for bunn - Når fire verdier er satt; gjelder de i rekkefølgen: topp, høyre, bunn og venstre Disse reglene gjelder også for egenskapene padding og border (med flere). Det er viktig å vite hva man gjør når margin brukes. Hvis vi nå legger til en marg for deltagerinformasjonen i tillegg vil du få dobbelt med marg: lag{ font-family: sans-serif; font-size: medium; margin: 20px; deltager{ font-style: italic; margin: 14px; Nå har vi lagt til marg rundt hele lag-elementet og hele deltager-elementet. Det gjør at deltagernavnene får for eksempel 34px med venstremarg: side 14 av 20
1.9.2. Border Border brukes til å sette en ramme rundt hele innholdet til et element. De ulike egenskapene vi har for border er: border-width px, em, pt eller en av verdiene thin, medium, thick medium border-style none, solid, dotted, dashed, hidden, double, groove, ridge, inset, outset none border-color angis som navn på farge, RGB- eller heksadesimalt tall samme som fargen til elementet border kan ha en verdi for hver av de tre egenskapene over 0 For å illustrere de ulike egenskapene har vi følgende XML-dokument (ramme.xml): <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="ramme.css"?> <test> <vitester>rammetype</vitester> </test> Videre har vi CSS-filen ramme.css: vitester { font-size:24px; border-style:solid Her har vi lagt inn en stil på border; border-style: solid. I det følgende skal vi endre på denne egenskapen for å se hvordan dette vil påvirke visningen av XML-dokumentet. { border-style: solid ser slik ut i nettleseren: { border-style: dotted ser slik ut i nettleseren: { border-style: inset ser slik ut i nettleseren: side 15 av 20
Ved å bruke egenskapen border-width kan vi endre på tykkelsen til rammen. Hvis vi videre kombinerer dette med border-color (fargen til borderen) og border-style, kan du blant annet få frem følgende eksempler: vitester { font-size: 24px; border-style: solid; border-width: thick; border-color: red; Hvis du vil øke tykkelsen, kan denne også angis i piksler: vitester { font-size: 24px; border-style: solid; border-width: 10px; border-color: red; Som med margin, kan også border settes til flere verdier på samme egenskap. Rekkefølgen vil være: border: border-width border-style border-color Eksemplet rett over kan derrmed skrives som: vitester { font-size: 24px; border: 10px solid red; 1.9.3. Padding Paddingfunksjonen gir mellomrom egenskaper: mellom elementteksten og rammen. Padding har følgende padding, padding-top, padding-bottom, padding-left, padding-right px, em eller % 0 Funksjonene til padding brukes på samme måte som for margin. Det er samme regler for hvordan egenskapene settes opp og verdier kan angis i px eller em. Vi fortsetter med eksemplet vist under border og vil ha mer luft mellom rammen og teksten. Da må vi tilføye en egenskap i selve reglen (vises med uthevet skrift): vitester { font-size: 24px; border-style: solid; border-width: thick; border-color: red; padding: 8px; side 16 av 20
Den siste linjen i eksemplet gir mer avstand rundt elementteksten. På samme måte som for margin kan paddingfunksjonen angi ulik størrelse for de ulike kantene. Dette kan du selv prøve ut. 1.9.4. Size Vi kan sette bredden og høyden ved å bruke egenskapene: width og height cm, in, auto eller % 0 Vi fortsetter med det samme eksempelet og legger til en bredde på 8 cm: vitester { font-size: 24px; border-style: solid; border-width: thick; border-color: red; padding: 8px; width: 8 cm; 1.10. Posisjonering Vi har til nå brukt margin, border og padding egenskaper for å bestemme avstand mellom de ulike elementene. Alternativt kan en posisjon for de ulike elementene settes, og vi kan da bruke følgende: - Relativ posisjon: Kan korrigere på posisjonen til en bestemt boks (da menes et element med padding, border og margin), uten at det går ut over posisjonen til de andre boksene som vises. - Absolutt posisjon: Her tas elementet ut av sekvensen av bokser og gir det en egen posisjon, uavhengig av hvordan andre bokser er plassert. Man kan lett få flere elementer som ligger oppå hverandre hvis man ikke er forsiktig. Fordelen er at boksen vil være plassert på samme plass uavhengig av hvordan brukeren forstørrer/forminsker vinduet eller scroller. - Fixed posisjon: Her får boksen sin egen posisjon som vil være fast uavhengig av hvordan brukeren scroller og hvordan innholdet endres. Dette kan typisk brukes ved logoer som skal være på samme posisjon på alle filer. Denne form for posisjonering brukes ikke så ofte. Som regel bruker man margin, border og padding for å bestemme posisjon. For å bruke disse posisjoneringene settes følgende egenskap: position static, relative, absolute, fixed static Verdien static vil si vanlig posisjon, mens de andre er forklart over. Egenskapen over setter bare hvilken type posisjonering som skal brukes. I tillegg må det også settes verdi på selve posisjonen: side 17 av 20
top, right, bottom, left lengdeverdi 0 Vi fortsetter nå med konkurranse-eksemplet før egenskapene margin ble brukt. Vi vil nå sette en absolutt posisjon på klubb-elementet til lag som skal spille: lag klubb{ text-align: center; position: absolute; left: 250px; I en nettleser ser dette ut som: Legg merke til at nå er klubb-elementet tatt ut av rekken av elementer, slik at teksten i deltager-elementene er flyttet opp. 1.11. Sette inn bilder Ofte vil man ha med bilder i visning av XML-dokumenter. Dette kan enten være et bakgrunnsbilde, eller et vanlig bilde som skal vises i sin helhet. background-image url, none none Først kan vi prøve å legge til et bakgrunnsbilde. Vi fortsetter å bruke konkurranse-eksemplet (tar bort gul bakgrunnsfarge). Der hadde vi et lag-element som gjelder for hvert lag som skal delta. Vi vil at dette bakgrunnsbilde (Leaf.bmp) skal legges som bakgrunn til selve teksten om laget: For å få til dette legger vi til en ny egenskap som bare gjelder for lag-elementet i CSS-filen: lag { font-family: sans-serif; font-size: medium; background-image:url(leaf.bmp) side 18 av 20
Hvis vi nå ser på dokum entet i nettleseren: Som du ser gjentar bildet seg slik at all teksten i lag-elementet har et bakgrunnsbilde. Nå kan vi istedenfor prøve å legge til bildet til høyre for teksten i lag-elementet. Den enkleste måten å gjøre det på er å sette inn et tomt element i XML-dokumentet, og legge til egenskaper i CSS-dokumentet. Vi legger til elementet image som første barneelement til lag-elementet i XML-dokumentet. Deretter oppdaterer vi CSS-filen med følgende regel: image{background-image: url(leaf.bmp); width:101px; height: 52px; Vi velger å fjerne bildet fra lag-elementet. Over ser du at vi angir en størrelse som bildet skal vises på. Dette er den nøyaktige størrelsen til bildet. I nettleseren vil dette bli: Som du ser blir bildet plassert ved siden av klubb-elementet for et lag fordi det ikke er angitt noe display:block for verken image- eller klubb-elementet. Vi vil istedenfor plassere bilde til høyre for hele lag-elementet. Teksten skal altså flyte på venstresiden av bilde. Da brukes denne egenskapen: float left, right side 19 av 20
Vi prøver dette i eksemplet over: image{ background-image: url(leaf.bmp); width:101px; height: 52px; float:right; Nå vil vi få det korrekt: Float-egenskapen brukes til å si at innholdet til et element skal flyte ved siden av et annet elementinnhold. Dette kan både være bilder eller tekstelementer. side 20 av 20