INF1040 Oppgavesett 4: CSS (Kapittel 5) Fasitoppgaver Ingen fasitoppgaver denne gang. Se flervalgsoppgavene under. Flervalgsoppgaver I følgende oppgaver er det oppgitt fem alternativer der nøyaktig ett svar er riktig. 1. Ved bruk av eksternt (linked) stilark, hvor i XHTML-dokumentet plasseres referansen til dette? (a) Øverst i dokumentet. (b) I <head>-elementet. (c) Mellom </head> og <body>. (d) I <body>-elementet. (e) Kan plasseres hvor som helst. 2. Ved bruk av internt (embedded) stilark, hvor i XHTML-dokumentet plasseres dette? (a) Øverst i dokumentet. (b) I <head>-elementet. (c) Mellom </head> og <body>. (d) I <body>-elementet. (e) Kan plasseres hvor som helst. 1
3. Hvilket XHTML-attributt brukes for å definere inline-stiler? (a) class (b) css (c) font (d) inline (e) style 4. Hva er korrekt CSS syntaks? (a) h1 {color:blue;} (b) h1 {color=blue;} (c) {h1; color:blue;} (d) {h1: color=blue;} (e) h1.color {blue;} 5. Hvordan skrives kommentarer i CSS? (a) */ Kommentar */ (b) /* Kommentar */ (c) // Kommentar (d) <!-- Kommentar --> (e) Kommentar 6. Anta en situasjon der et eksternt stilark, et internt stilark og en inlinestil alle definerer ulik font-størrelse for et bestemt avsnitt på en nettside. Hvilken stil er det da som vil bli brukt? (a) Font-størrelsen angitt i det eksterne stilarket. (b) Font-størrelsen angitt i det interne stilarket. (c) Font-størrelsen angitt i inline-stilen. (d) Den største av de angitte font-størrelsene. (e) Nettleseren står fritt til å velge mellom de angitt font-størrelsene. 7. I deklarasjonen p {font-weight:bolder;} er p (a) et attributt (b) en egenskap (c) en selektor (d) en stil (e) en verdi 2
8. I deklarasjonen p {font-weight:bolder;} er font-weight (a) et attributt (b) en egenskap (c) en selektor (d) en stil (e) en verdi 9. I deklarasjonen p {font-weight:bolder;} er bolder (a) et attributt (b) en egenskap (c) en selektor (d) en stil (e) en verdi 10. Hva er effekten av deklarasjonen div.font {font-family:arial;} hvis vi antar at det ikke er angitt noen andre stiler som vinner over denne. (a) All tekst i alle elementer med id="font" bruker fonten Arial. (b) All tekst i alle elementer med class="font" bruker fonten Arial. (c) All tekst i alle div-elementer bruker fonten Arial. (d) All tekst i alle div-elementer med id="font" bruker fonten Arial. (e) All tekst i alle div-elementer med class="font" bruker fonten Arial. 11. Hva er den viktigste grunnen til at man bør bruke relative fremfor absolutte mål i CSS-deklarasjoner? (a) Det blir enklere for nettleseren, og siden kan vises frem raskere for brukeren. (b) Hvis et eksternt og et internt stilark inneholder samme deklarasjon dobles effekten. (c) Man tar høyde for at ulike brukere kan ha satt ulike preferanser i nettleseren. (d) Man slipper å huske hvilke absolutte verdier som er lovlige for de ulike egenskapene. (e) Det blir lettere for andre å forstå effekten av deklarasjonen. 3
Tenk selv -oppgaver 12. Om stilark generelt (a) Hvorfor er det hensiktsmessig å skille beskrivelse av innhold fra beskrivelse av hvordan innholdet skal vises fram? (b) I forbindelse med XHTML beskrives utseendet ved hjelp av Cascading Style Sheets. Hvorfor betegnelsen Cascading? (c) En valgt stil kan gjøres tilgjengelig for et XHTML-dokument eller deler av det på fire ulike måter. Hvilke? (d) Hvilke fordeler og ulemper har bruken av linket (eksternt) stilark sammenliknet med alternativene? (e) Anta at det i det linkede stilarket står h1{color:red;} og i en h1-markering står style="color:blue" Hvilken farge får overskriften, og hvorfor? 13. Om layout (a) Hva er forskjellen på blokk-modellens in-line -bokser og blokkbokser? (b) Anta at du skal sette opp en layout med en del tekster under hverandre i en kolonne. Tekstene ligger i blokkbokser avgrenset med en usynlig kant. Er det da det samme om du regulerer den vertikale avstanden mellom tekstene med polstring ( padding ) eller med marg ( margin )? (c) Hva er forskjellen mellom div- og span-elementet? (d) Hvilke konstruksjoner bruker vi i målangivelser for å få relative mål? Prøv selv -oppgaver 14. Bruk av stilark Bygg opp ditt eget nettsted ved hjelp av malen i kapittel 5. Gjør gjerne endringer i stilarket slik at du får et utseende du liker. Malen består av de to filene mal.html og malstiler.css (finnes på http://www.ifi.uio. no/~inf1040/nettsidemal/). Godt råd: Mens du arbeider, ha XHTML-dokumentet og stilarket oppe i hvert sitt editor-vindu. Begynn med et enkelt stilark som du bygger ut etter hvert. Ta opp resultatet i en nettleser hver gang du gjør en endring. Husk å validere både XHTML-dokumentet og stilarket. 4
15. Endre XHTML-dokumentet til å henvise til et annet stilark (som ikke eksisterer). Hva skjer i nettleseren da? Validerer XHTML-dokumentet fortsatt? 16. CSS vs tabeller Under ser du et eksempel på en nettside fremvist i Firefox. Du skal nå lage to versjoner av denne nettsiden. Forsidebildet av læreboken finner du på http://heim.ifi.uio.no/inf1040/web/forside_digrep.gif (a) Lag først en versjon der du bruker CSS til å bestemme all layout. (b) Lag deretter en versjon der du bruker tabeller til å bestemme plasseringen av de ulike elementene i forhold til hverandre. (c) Sammenlign de to løsningene. Hvilke fordeler/ulemper ser du ved å bruke henholdsvis CSS og tabeller, både i dette konkrete eksempelet og mer generelt? Programmeringsoppgaver (for deg som tar/har tatt INF1000) Ingen programmeringsoppgaver denne gang. 5
Fasit til fasitoppgaver og flervalgsoppgaver Hvis du finner feil i fasiten er det fint om du gir beskjed om dette ved å sende en mail til ragnhilk@ifi.uio.no 1. (b) 2. (b) 3. (e) 4. (a) 5. (b) 6. (c) 7. (c) 8. (b) 9. (e) 10. (e) 11. (c) 6