CSS CSS er en forkortelse for Cascading Style Sheets. CSS er et sprog som bruges til at definere layout på fx HTML-dokumenter. HTML var oprindeligt tænkt som et rent struktur-markeringssprog, der eksempelvis markerede at her er en overskrift, her er et afsnit og her er et billede ved at benytte tags som <h1> </h1>, <p> </p> og <img>. Efterhånden som udviklingen af internettet tager fart, opstår der behov, blandt kreative webdesignere, for at kunne tilføje layout til HTML-dokumenterne. Nye og mere layout-venlige versioner af HTML ser dagens lys, og de forskellige browserfabrikanter (fx Microsoft) versionerer browserne, så de understøtter de nye versioner af HTML. Man presser layout-specifikationer ned i HTML, ved enten at udvide attributlisten for allerede eksisterende tags, fx <body text= bgcolor= > </body> eller ved at indføre helt nye og rene layout-tags, fx <font face= size= > </font>. Imidlertid blander man herved det oprindelige, rene stuktur-markeringssprog sammen med deciderede layout-specifikationer. Ideen om at adskille indhold/struktur fra præsentation/layout fører til etableringen af CSS som et rent layout-sprog. Herved kan HTML igen blive et rent struktur-markeringssprog, og i den p.t. nyeste version 4.01 af HTML er denne udvikling ved at slå igennem, idet mange layoutattributter og selvstændige layout-tags udgår til fordel for en ren CSS beskrivelse. CSS er virkelig en revolution indenfor web-design, og vi nævner her bl.a. følgende muligheder: Med CSS kan flere HTML-dokumenter layout-vedligeholdes via ét CSS-dokument Layout kan styres præcist helt ned til pixel-niveau. Mediedifferentieret layout, fx forskellig layout til skærm og printer. CSS regler Hvis man fx vil lave en hjemmeside, hvor baggrundsfarven er sort og tegnene hvide kunne man i gamle dage skrive: <body bgcolor= black text= white > </body>. I CSS skriver vi i stedet: body{ background-color: black; color: white; Ovenstående CSS-eksempel kaldes generelt for en regel. Den generelle opbygning er som vist: selector{ deklaration; deklaration; En CSS-regels syntaks hvor en deklaration igen består af egenskab:værdi. Selector Selectoren udpeger den eller de HTML-elementer i dokumentet for hvilke den deklarerede styling skal gælde. Hvis en gruppe af HTML-elementer skal layoutes på samme vis (dvs. udsættes for de samme deklarationer) kan man gruppere selectorerne adskilt af komma: h1,p{ background-color: yellow; color: red; Side 1
Vil man kun style ét element, forsynes dette med en id-attribut. Selectoren bliver attributtens værdi foranstillet et #. Vi iler med et eksempel: Eks. HTML: <p id= afsnit1 > </p> CSS: #afsnit1{ Nogle gang har man måske brug for at gruppere layout af et HTML-element i en række klasser. Vi kan fx forestille os at vi har brug for 2 slags afsnit (<p> </p>) i vores HTMLdokument, hvor teksten er henholdsvis højrestillet og centreret. Med CSS kan dette snildt lade sig gøre. HTML-elementerne forsynes med en class-attribut, hvis værdi er med til at opbygge selectoren i CSS. Et eksempel følger her: Eks. HTML: <p class= center >Denne tekst bliver centreret</p> <p class= hoejre >Denne tekst bliver højrestillet</p> CSS: p.center{ text-align: center; p.hojre{ text-align: right; Har man brug for at udvælge forskellige HTML-elementer og inddele dem i klasser, mere generelt, kan man forsyne disse HTML-elementer med class-attributten og i CSS skrive selectoren som class-attributtens værdi foranstillet et punktum. Et eksempel: Eks. HTML: <p class= omkrans >Denne tekst bliver rammet ind</p> <img src= hat.jpg class= omkrans > CSS:.omkrans{ border: 2px solid gold; Tip: I CSS kan man angive kommentarer, som ignoreres af browseren, som følger: /* Dette er en kommentar */ /* Dette er en kommentar der løber over to linjer */ Side 2
Links og pseudo-classes Behovet for at kunne style fx link-elementet: <a href= url >linktekst</a> i dets forskellige tilstande: ikke-besøgt link, besøgt link, aktivt link og mouse-over link, har ført til definitionen af 4 selectorer i CSS omhandlende links: a:link a:visited a:active a:hover Disse selectorer modsvarers IKKE af class= ude på link-elementet deraf navnet pseudoclasses. Vi bringer et eksempel: Eks. a:link{ color: black; a:visited{ color: yellow; a:active{ background-color: red; a:hover{ color: orange; font-style: italic; Det ubesøgte link viser linkteksten med sorte bogstaver, det besøgte link viser teksten med gule bogstaver, det aktive link viser teksten med rød baggrundsfarve og endelig vises link-teksten med orange bogstaver og skrå-skrift, hvis musen føres henover linket. CSS Øvelse 1 Lav en hjemmeside og eksperimenter med link-mulighederne via de omtalte pseudo-classer. Benyt eventuelt sandkassen på: www.akat.dk/datalogi/htmlcss/sandkassen.html Browseren og CSS - Boksmodellen og display-egenskaben Når browseren bearbejder et HTML-dokument sker det i 2 faser: 1. Først opbygges DOM-træet (se evt. HTML-noterne side 2, figur 2) 2. Dernæst starter renderings-fasen (visnings-fasen), hvor hvert eneste HTML-element/HTMLknude vises i en selvstændig BOKS. Er der knyttet style-anvisninger til dokumentet anvendes disse af browseren i denne renderings-fase ellers anvendes de på forhånd (=default) angivne style-anvisninger knyttet til de enkelte HTML-elementer. Boksmodellen En boks er i denne model en rektangulær (vinklerne er alle 90 o ) kasse, og HTML-elementer vises i bokse, som kan styles via CSS. HTML-elementets indhold typisk en tekst-knude kan man sætte bredde og højde på: width og height. Afstanden ud til en eventuel kant, kan sættes via padding-egenskaben. En kant kan angives via border-egenskaben. Endelig kan afstanden til omgivende bokse sættes via egenskaben margin. Vi iler med et eksempel: Side 3
Eks.:.box{ width: 300px; height: 200px; padding: 10px; border: 1px solid #000; margin: 15px; top left right bottom Eksemplet viser BOKS-modellen i CSS margin, border og padding kan sættes for hver af de 4 sider via angivelser af top, right, bottom og left henholdsvis. Hvis man kun vil sætte en venstre-margin kan man fx skrive: margin-left:15px; CSS Øvelse 2 Eksperimenter med boks-modellen for forskellige HTML-elementer. Start i sandkassen. Display-egenskaben Når et HTML-element renderes (vises) i sin egen selvstændige boks er der to muligheder for placeringen af denne BOKS, i forhold til de andre HTML-elementers bokse: inline dvs. at boksen placeres i et flow vandret, fra venstre mod højre, i den omgivende parent-boks. block dvs. at boksen placeres lodret, fra toppen og nedefter, i den omgivende parentboks. Faktisk er de fleste af HTML-elementerne, på forhånd (også kaldet default), forsynet med én af display-egenskaberne inline eller block man taler i den forbindelse også om inline- HTML-elementer og block-html-elementer. Studér omhyggeligt eksemplet på næste side: Side 4
Eks.: HTML-elementet <button> er, default, et inline-element, som nedenstående første eksempel viser: De 3 <button>-elementer flyder fra venstre mod højre i den omgivende parent-boks, som her er <body>-elementet. <html> <head> </head> <body> <button>knap 1</button> <button>knap 2</button> <button>knap 3</button> </body> </html> Nu indføjer vi en style-anvisning i dokumentets head-del, hvor vi ændrer værdien af button-elementets display-attribut til block. Nu flyder <button>elementerne fra toppen og nedefter i den omgivende parent-boks: <body> <html> <head> <style> button{ display: block; </style> </head> <body> <button>knap 1</button> <button>knap 2</button> <button>knap 3</button> </body> </html> Integration af CSS i HTML-dokumenter Der er 3 måder, hvorpå CSS kan integreres i et HTML-dokument (vi anvender eksemplet fra før med hvid tekst på sort baggrund). 1: styling direkte på HTML-element <html> <head> </head> <body style= background-color:black; color:white > </body> </html> Denne metode kan bestemt IKKE anbefales, idet vi atter har mudret HTML-strukturen til med En layout-attribut:style. Side 5
2: Style-tag i <head>-afsnit <html> <head> <style> body{ background-color:black; color:white; </style> </head> <body> </body> </html> Denne metode er lidt bedre end den foregående: Vi har indsat ét eneste style-element, hvorved stylingen af diverse tags nu er placeret ét sted i HTML-dokumentet. 3: Link til style-anvisninger (= et stylesheet) i en selvstændig, ren tekst fil af typen.css <html> <head> <link href= stil.css rel= stylesheet type= text/css > </head> <body> </body> </html> Filen stil.css indeholder præcis nedenstående klamamse: body{ background-color:black; color:white; Denne metode er klart at foretrække: Stylingen skrives i en selvstændig fil, og der linkes til denne CSS-fil via et <link>-tag i HTML-dokumentets <head>-afsnit. Dette kan gøres i hvert eneste HTML-dokument, der skal styles, og herved har man fået adskilt indhold og layout! Det er nu hylende enkelt at ændre udseendet af samtlige HTML-dokumenter i en applikation, idet man blot redigerer indholdet af én fil: stil.css. CSS Øvelse 3 Konstuer et HTML-dokument med en tilhørende CSS-fil. Start eventuelt først i sandkassen. Cascading style sheets Man kan linke til mere end ét style-sheet i et HTML-dokument. Rækkefølgen af disse links er afgørende, idet det senest angivne style-sheet overskriver eventuelle style-deklarationer fra de foranstående style-sheets. Vi viser et eksemel på næste side. Side 6
Eks.: <html> <head> <link href= stil.css rel= stylesheet type= text/css > <link href= min.css rel= stylesheet type= text/css > </head> <body> Her er noget tekst </body> </html> stil.css: body{ background-color: black; color: white; min.css: body{ color: yellow; HTML-dokumentet øverst, vises med sort baggrund (stammende fra stil.css), men med gule bogstaver (stammende fra min.css), idet den hvide font-farve i stil.css er blevet ændret i min.css. Eksemplet viser princippet i Cascading Style Sheets (CSS) CSS-sandkassen På adressen: http://www.akat.dk/datalogi/htmlcss/sandkassen.html findes en version 2 af sandkassen, hvor man i 2 adskilte tekst-felter kan indtaste henholdsvis HTML og CSS netop for at understrege det grundlæggende princip: adskillelse af indhold og layout. Figur 1 HTML-CSS-sandkassen set gennem googles browser: Chrome. Hjemmesiden vises i eget vindue. Side 7
CSS Øvelse 4 Lav en hjemmeside med 4 p-elementer /afsnit der, to og to laver text-transform til hhv. lowercase og uppercase. HTML-elementerne <span> </span> og <div> </div> De to fundamentale display-egenskaber inline og block har faktisk ført til definitionen af to ekstra HMTL-elementer (container-tags): <span> </span> og <div> </div>. span er inlineelementet medens div er block elementet, med de helt indlysende værdier: HTML-element span div CSS egenskab: værdi display: inline display: block Et span-element må kun indeholde tekst samt andre inline-elementer, og må ikke indeholde block-elementer. Elementet indeholder ingen strukturel, semantisk (=betydnings-mæssig) information, i modsætning til HTML-elementer generelt, og ændrer heller ikke, default, stylingen af det indhold container-taggen omslutter. Det man kan med et span-element, er at sætte en krog fast i fx den tekst, elementet omslutter, og så forsyne start-tagget med attributten class og/eller id for derefter at bruge CSS til at definere udseendet af denne klasse [eller interagere med elementet gennem JavaScript og DOM-træet, som vi skal se senere]. Et div-element kan indeholde hvad som helst, men indeholder ingen strukturel, semantisk information, og ændrer heller ikke, default, stylingen af det indhold container-taggen omslutter. div-elementet bruges ofte til at inddele en hjemmeside i forskellige sektioner, som hver især kan identificeres gennem class- og id-attributter. Man kan, for øvrigt, angive mere end én værdi for et HTML-elements class-attribut, når blot værdierne adskilles af mellemrum. Eks.: span- og div-elementer. HTML-dokument (udsnit): <span>denne tekst er omgivet af span-tags.</span> <span class="inverse">denne tekst er også spannet og inverteret rent farvemæssigt via classattributten 'inverse'</span> <div class="upper">dette er placeret inden i et div-element med class-attributten 'upper'</div> <div class="inverse upper">det er dette også men div-elementets class-attribut har vædierne 'inverse' og 'upper'</div> CSS Øvelse 5 Skriv inverse og upper-reglerne i CSS. Side 8
Positionering postion: static relative absolute fixed og float Browser-vindue (eng.: viewport) HTML-document A B 1 2 element 3 C Figur 2 HTML-dokumentet (grå) betragtes gennem browservinduet (største hvide felt) hvis HTMLdokumentet er større end vinduet ses typisk scrollbars på browservinduet. Vinduet viser 3 block-elementer (A, B og C) og det midterste indeholder 3 inline-elementer (1, 2 og 3). Vi vil se på udvalgte style-egenskaber ved det midterste af de 3 inline-elementer: element, i forskellige renderinger/visninger. position: static (default) Elementet er her renderet på baggrund af default-værdierne (de anførte 3 værdier er fra IE7): display : inline position: static z-index : 0 og den omgivende boks er B. Default renderes/displayes boksene inline (eller block), relativt til den omgivende boks. Default positioneres boksene static og med z-index sat til 0 dvs. at de placeres fast i forhold til hinanden og i samme (2-dimensionale) plan. z-index: Dette indeks angiver et HTML-elements placering i en retning vinkelret på skærmen. Jo højere z-værdien er, jo tættere er elementet på brugeren. Via denne egenskab er det muligt at placere elementer så de overlapper/dækker hinanden. z-index for et HTML-element virker kun hvis elementets position-egenskab er enten relative, absolute eller fixed (se eksempler senere i disse noter). Side 9
Position: relative Ændres et HTML-elements default-værdi for position fra static til relative, sker der intet! Først når man samtidig angiver værdier for left, top bottom eller right, top bottom flytter elementet sig som vist på figur 3: position: relative left : 30px top : 40px z-index : 0 Den omgivende boks (den stiplede boks på figur 3) er den boks elementet ville have haft i den normale, default rendering. Værdierne for left, right, top og bottom kan være både positive og negative. Positive værdier vil skubbe elementet i retning mod centret i den omgivende boks, og negative værdier vil skubbe det væk. 30px 40px Således vil en positiv værdi for top skubbe elementet nedad, medens en positiv værdi for bottom vil skubbe det opad. Negative værdier vil skubbe elementet den modsatte vej. [fx vil værdierne top: 40px og bottom: -40px resultere i samme lodrette positionering]. På samme vis vil positive værdier for left skubbe elementet mod højre medens positive værdier for right vil skubbe elementet mod venstre. Negative værdier vil skubbe elementet den modsatte vej. Figur 3 inline-elementet nr. 2 er blevet relativt positioneret, og forskudt 30px nedad samt 20px mod venstre: position: relative; left: 30px; top: 40px alt sammen regnet relativt til den oprindelige, default placering. Bemærk også at elementerne nr. 1 og 3 bliver liggende, som om element nr.2 stadig var på sin oprindelige (default) plads. Eks.: subscript sænket skrift - kan opnås gennem et span-element positioneret relativt. HTML-dokument (udsnit): CSS (udsnit): <p>vands specifikke varmekapacitet p{ c<span class= subscript >vand</span> font-size: 12pt; er 4180 J/(kg K) </p> span.subscript{ position: relative; top: 6px; font-size: 9pt; Side 10
Position: absolute Sættes et HTML-elements position-egenskab til værdien absolute, tages dette element fuldstændigt ud af den normale rendering af dokumentet. Dette vil typisk medføre at elementet nu overlapper en eller flere andre elementer og deres indhold, og/eller selv vil blive overlappet af atter andre elementer alt sammen afhængig af værdien af z-index. Det er helt op til forfatteren af CSS-reglerne at undgå sådanne situationer - hvis det ønskes. Figur 4 viser et eksempel hvor værdierne er: position: absolute left : 0px top : 0px z-index : 0 Den omgivende boks er her dokumentets html-element! Den omgivende boks/element er defineret som det nærmeste forældre-element hvis værdi for position er enten relative, absolute eller fixed altså alt andet end default-værdien static. Hvis sådan en forælder ikke findes er html-elementet den omgivende boks. I dette konkrete tilfælde er den nærmeste forælder i DOM-træet div-elementet B, men denne er default renderet og har position-værdien: static. Ændres denne værdi til fx relative (hvilket ikke flytter rundt på selve div-elementet B), vil vores absolut-positionerede element 2, nu orientere sig i forhold til denne nærmeste forælder/omgivende boks som vist på figur 5 herunder. Elementer der er positionerede absolut, scroller stadig sammen med dokumentet da de er blevet positionerede i forhold til selve dokumentet. Figur 4 Elementet er taget helt ud af renderingen af dokumentet, og den omgivende boks er her html-elementet! Figur 5 div-element B har nu fået sat position:relative og er nu nærmeste forælder/omgivende boks til element 2, som straks kvitterer ved at anbringe sig i øverste venstre hjørne på denne boks. Side 11
Position: fixed Sættes et HTML-elements position-egenskab til værdien fixed, tages dette element fuldstændigt ud af den normale rendering af dokumentet. Dette vil typisk medføre at elementet nu overlapper en eller flere andre elementer og deres indhold, og/eller selv vil blive overlappet af atter andre elementer alt sammen afhængig af værdien af z-index. Det er helt op til forfatteren af CSS-reglerne at undgå sådanne situationer - hvis det ønskes. Figur 5 viser et eksempel hvor værdierne er: position: fixed left : 0px top : 0px z-index : 0 Den omgivende boks er her browservinduet (viewport). Figur 6 Med position:fixed er elementet taget helt ud af den normale, default rendering, og er blevet fikseret i forhold til browservinduet. Det betyder at elementet IKKE scroller sammen med resten af dokumentet men virkelig er fikseret! I skærmbilledet til højre har vi scrollet helt til bunden af dokumentet, men det fikserede element ses stadig i positionen left: 0px; top: 0px i browservinduet. Denne fiksering af et element kan fx udnyttes i forbindelse med et navigationspanel til store dokumenter, hvor man kan have et fikseret link til menuen i toppen af en meget lang side (se figur 7) eller en hel navigation! Bemærk at IE 7+ kræver at en DOCTYPE-erklæring er på plads øverst i HTML-dokumentet for at position:fixed virker: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> Tilhørende CSS: Figur 7 Et meget langt/stort HTML-dokument vises i broweren. Al indholdet er puttet ind i et div-element med id:content. Navigationsfeltet er ligeledes etableret som et div-elelemnt med id:nav. Selv om der scrolles i dokumentet forbliver navigationsfeltet på plads i browservinduets øverste, venstre hjørne. Til højre ses den tilhørende CSS #content{ margin-left:40px; border-left: 1px solid gold; padding-left: 5px; #nav{ position:fixed; left:0; top:0; background:yellow; padding:5px; Side 12
float Sættes et HTML-elements float-egenskab til én af værdierne left eller right, tages dette element ud af den normale rendering af dokumentet. Figur 8 viser et eksempel med følgende værdi: float: right Den omgivende boks er her div-elementet B. Generelt er den omgivende boks det nærmeste blockelement der indeholder elementet. Floatningen foregår ved at elementet placeres så langt til den ønskede side, og så højt som muligt, i den omgivende boks. HTML-elementer der følger sekventielt efter i HTMLdokumentet, vil flyde rundt om det floatede element, hvis deres indhold tillader det - fx tekst. Figur 9 illustrerer eksemplet herunder: Figur 8 Elementet har fået sat egenskaben float:right og er røget til højre i den omgivende boks: B. Eks.: float HTML-dokument (udsnit): <div class= venstrebillede > <img src= billede.jpg > </div> <p> noget tekst </p> CSS: div.venstrebillede{ float:left; margin-right:15px; p{ text-align: justify; Figur 9 Via div-elementet og class-attributen venstrebillede har vi i CSS stylet billedet så det placeres til venstre. Endvidere har vi defineret en højre-margin på 15 billedpunkter. Det næste element (sekventielt) er et afsnit - <p>-element - hvis indhold er tekst, som flyder rundt om billedet. Teksten er der lavet lige marginer på. Side 13
Vi slutter dette afsnit om positionering med et banalt eksempel der illustrerer position: absolute i samarabejde med forskellige værdier for z-index. Eks.: Det samme billede er placeret i to forskellige div-elementer med id: lower og id: upper henholdsvis og stylet som vist: HTML-dokument (udsnit): CSS: #lower{ <div id="lower"> <img src="billede.jpg"> </div> <div id="upper"> <img src="billede.jpg"> </div> position:absolute; top: 10px; left: 10 px; z-index: 5; #upper{ position:absolute; top: 50px; left: 100 px; z-index: 10; Figur 10 To, absolut-positionerede, div-elementer indeholder det samme billede. Via forskellige værdier for top, left og z-index etableres et overlap (venstre billede). På billedet til højre har vi sat en opacity-egenskab på, så det bagvedliggende billede anes. Opacity (= opacitet: gennemskinnelighed): Den øverste div kan vi sætte egenskaben opacity på (se eksemplet her til højre samt det højre skræmbilledaftryk i figur 10). opacity: 0.70 [FireFox] Filter: alpha(opacity=70) [IE] En opacitet på 100% (=1) svarer til fuldstændig uigennemskinnelighed, og modsat svarer en opacitet på 0% til total gennemskinnelighed. Eks.: opacity: #upper{ position:absolute; top: 50px; left: 100 px; z-index: 10; opacity: 0.7; filter: alpha(opacity=70); Side 14
CSS-enheder og farveangivelser I CSS kan man anvende en række enheder. Vi har her opdelt dem i relative og absolutte enehder. Relativ CSS-enheder: em aktiv font størrelse ex x-højden af den aktive font px pixels (det mindste areal der kan renderes) % procent Absolutte CSS-enheder: mm millimeter cm centimeter in inches (= tommer) pt points (1 pt er det samme som 1/72 tomme) pc picas (1 pc er det samme som 12 pt) Farveangivelser: color-name aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow [angives uden citationstegn] rgb(tal,tal,tal) Styrken af rød, grøn og blå angivet som et helt tal mellem 0 og 255, fx rgb(0,255,127) rgb(p%,p%,p%) S tyrken af rød, grøn og blå i procent #rrggbb #xyz En hexadecimal angivelse af rød, grøn og blå. Fx #00FF7F #xxyyzz [de hexadecimale cifre gentages én gang]. Fx #0F8, som også kunne skrives som #00FF88 Udvalgte stylekoder og sammenskrivninger Baggrundsbillede: Man kan placere et baggrundsbillede på et html-element, fx body. Vi illustrerer med eksempler Background_color: yellow background-image: url(bjerg.jpg) background-repeat: repeat-x repeat-y no-repeat repeat (default) der kopierer billedet: vandret lodret ét billede både vandret og lodret background-attachment: fixed scroll (default) Bevirker at baggrundsbilledet ikke scroller med hhv. scroller med. background-position: xpos ypos browservinduets venstre- og øverste kant xpos og ypos angiver billedets position fra Sammenskrivning er mulig: Background [color] [image] [repeat] [attachment] [position] fx: background: url(hat.gif) no-repeat fixed center center Side 15
Eks.: baggrundsbillede m.m. HTML (uddrag): <button>billeder</button> <button>nyheder</button> <button>netværk</button> <div id="hat"></div> CSS: body{ background: white url(baggrund.jpg) repeat-x fixed; #hat{ background: url(hat.gif) no-repeat; position:absolute; bottom: 0; right: 40px; width: 360px; height: 360px; button{ background: rgb(127,127,127); color: white; CSS Øvelse 6 Eksperimentér på livet løs med diverse styles font: Font-egenskaben kontrollerer skrifttypen. Den generelle syntaks, i sammenskrevet form er: font: [style] [variant] [weight] [size] [family] Egenskab Værdier Forklaring style normal (deault), italic, oblique italic, oblique: skrå-skrift variant normal (default), small-caps small-caps: mindre store bogstaver weight normal (default), bold bold: fed skrift size (se generelle CSS-enheder p. 15) %, em og ex tillader skalering af font-size family fx: vedana sans-serif definerer en prioriteret liste af fonte Side 16
Figur 11 Browsere tillader skalering af font-size for bl.a. at hjælpe svagtseende. Derfor skal man være varsom med at sætte en absolut fontstørrelse (som netop ikke kan skaleres i browseren). tekst: Vi tager her blot et udpluk af tekst-egenskaber. Egenskab Værdier Forklaring color (se CSS-farver p. 15) Sætter tekst-farven text-align left (default), right, center, justify justify laver lige højre- og venstre-margen text-indent (se generelle CSS-enheder p. 15) Definerer indryk for første linje i et afsnit text-decoration none, underline, overline, line-through, blink text-transform none (default), capitalize, capitalize starter hvert ord uppercase, lowercase med et stort bogstav. uppercase transformerer teksten til store bogstaver. lowercase transformerer teksten til små bogstaver. letter-spacing normal (default), length length angiver afstanden mellem de enkelte bogstaver i CSS-enheder (se p. 15) CSS Øvelse 7 Eksperimentér med diverse text-egenskaber Side 17
Mediedifferentieret styling Som vi tidligere har set kan vi anbringe et STYLE-element (container-tag) i HEAD-afsnittet på et HTML-dokument: <style> </style> eller, endnu bedre, et link til en ekstern CSS-fil (separator-tag): <link href= stil.css rel= stylesheet type= text/css > Der findes imidlertid en attribut som hedder media og som man kan give følgende værdier: all (default), screen, print, projection, aural, braille, embossed, handheld, tty og tv. Herved kan man etablere mediedifferentieret styling og således optimere visningen af det givne indhold til et eller flere medier. Vi vil i det følgende kigge lidt mere på screen og print. display: none display-egenskaben kan, udover værdierne inline og block, antage mange andre værdier fx none som har den åbenlyse betydning at elementer (og eventuelle efterkommere) med den pågældende egenskab ikke medtages i renderingen. Dette er guf i forbindelse med den differentierede styling, idet fx menuer og andet som ikke skal printes, forsynes med denne værdi for display-egenskaben i det medierelevante stylesheet. Figur 12 Mediedifferentieret styling. Her er det et p-elements indhold der kun vises på print. Højreklikkes på det lille browser-vindue til venstre kan man i Pop-Up-menuen vælge Vis udskrift, hvorefter siden til højre vises med begge afsnit! Side 18
Eks.: Kildekoden fra figur 12: <html> <head> <style media="screen">.papir{ display: none; </style> </head> <body> <p>dette kan ses både på print og skærm</p> <p class="papir">denne kan kun ses på print</p> </body> </html> Sideskift Sideskift kan etableres, særdeles simpelt, fx via egenskaben page-break-before med værdien always. Skærmvisningen er uden sideskift (egentlig ganske naturligt), men vælger man Vis udskrift, skifter mediet fra skærm til printer og sideskiftet effektueres (se figur 13). Figur 13 Sideskift i et HTML-dokument kan etableres ved at indsætte et tomt blok-element, fx div, classe det som eksempelvis sideskift og i det tilhørende stylesheet skrive egenskaben page-break-before med værdien: always. Side 19
Eks.: Kildekoden fra figur 13: <html> <head> <style>.sideskift{ page-break-before: always; </style> </head> <body> <p>dette står på side 1 ved udprintning</p> <div class="sideskift"></div> <p>dette står på side 2 ved udprintning</p> </body> </html> En mediedifferentieret skabelon Herunder ses en skabelon, der er W3C-kompatibel, og som skal anvendes ved projektet. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="da"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>skabelon til hjemmeside</title> <link href="screen.css" rel="stylesheet" type="text/css" media="screen"> <link href="print.css" rel="stylesheet" type="text/css" media="print"> </head> <body> <! Struktureret HTML-indhold placeres her --> </body> </html> Et site, opbygget på denne vis, består således af mindst 3 filer: en html-fil samt to css-filer. Bemærk at HTML-elementet er blevet forsynet med en lang-attribut med værdien: da. Dette fortæller browseren at dokumentet er skrevet i sproget (language) dansk. Bemærk også at en kommentar i HTML-dokumentet har følgende syntaks (=opbygning): <!-- Kommentar --> HTMLdokument Medie: skærm Browser screen.css print.css Medie: papir Figur 14 Browseren (i midten) indlæser inddata i form af de tre filer til venstre, og kan vise det renderede indhold på to forskellige medier: skærm og papir. Side 20
Projektopgave Opgaven går ud på at lave en tekstfil om til en hjemmeside, der både kan navigeres rundt i på skærmen, og som kan printes pagineret på papir. Hver gruppe laver ét produkt som præsenteres for klassen. Oplægget er et html-dokument på adressen: http://www.akat.dk/datalogi/cssprojekt.html, samt en papirudgave, printet fra en PDF-fil. Figur 15 CSSprojekt.html set gennem IE 7.0. Den rene tekstfil er blevet behandlet en smule. Se teksten for detaljer. 1. Den rå tekst er blevet placeret i et div-element, med attributten id= content under body-elementet: <div id="content"> Datalogi C Valgfag </div> Tilhørende CSS: #content{ margin-left:40px; border-left: 1px solid gold; padding-left: 5px; 2. Ovenover dette div-element er der placeret endnu et div-element: <div id="nav">til<br>menu</div> Tilhørende CSS: #nav{ position:fixed; left:0; top:0; background:yellow; padding:5px; Side 21
3. Derefter er en række side-angivelser identificeret og omsluttet af div-elementer med class-attributten sat til header. <div class="header"> Valgfagsbekendtgørelsen, juni 2007 bilag 6 Datalogi C 2 </div> Tilhørende CSS: div.header{ background-color:#ccc; padding: 5px; width: 400px; margin-left: 240px; Ultrakort vejledning Start med at gemme CSSprojekt.html i en mappe på din lokale maskine. Lav derefter tekstfilerne: screen.css og print.css og flyt stylingen ud af HTML-dokumentet og over i disse. I HTML-dokumentet linkes der til disse via disse 2 link-elementer i head-afsnittet: <link href="screen.css" rel="stylesheet" type="text/css" media="screen"> <link href="print.css" rel="stylesheet" type="text/css" media="print"> Udviklingsmiljøet kunne herefter, fx, se ud som følger: Figur 16 Udover browser-vinduet, består udviklingsmiljøet af 3 vinduer til teksteditorer for HTMLdokumentet og de 2 css-dokumenter drabeligt ser det ud men hyggeligt er det! Side 22