Laboration 3 CSS del 2 1 av 20
Vad kommer jag att lära mig på laboration 3? 1. Skriva en stilmall Boxegenskaper o border o margin o padding o width o float o clear Färger och bakgrundsbilder Positionering av boxar Positionering av boxar med z-index (lager) Media Types Display-funktionen Prova gärna att validera din stilmall med hjälp av W3C s css-validator på: http://jigsaw.w3.org/css-validator/ 2 av 20
Boxegenskaper (marginaler, ramar och fyllnader) Inledning Med boxegenskaper kan du specificera elementens storlek, marginaler, ramar (border), färger och bakgrundsbilder, placering och förhållanden. Det finns följande boxegenskaper: 1. margin-top, margin-right, margin-bottom, margin-left som kan förkortas till margin 2. padding-top, padding-right, padding-bottom, padding-left som kan förkortas till padding 3. border-top-width, border-right-width, border-bottom-width, borderleft-width som kan förkortas till border-width 4. border-color 5. border-style 6. border en förkortning för border-width, border-style och border-color 7. width 8. height 9. float 10. clear 3 av 20
Övning 1. margin-top Med denna egenskap kan du specificera den övre marginalen för ett element (box) eller ett helt dokument. 1. Öppna hasseotage.html och bekanta dig med webbsidan och XHTML-koden. 2. Spara en kopia av hasseotage.html och döp det till ovning.html så att du inte skriver i originaldokumentet (du ska använda originaldokumentet i flera övningar). Spara ovning.html i mappen hasseotage så fungerar länkarna till bilden. 3. Prova följande stildeklaration i en extern stilmall som du döper till mall.css: body {margin-top: 5cm; img {margin-top: 7cm; 4. Öppna ovning.html i två olika webbläsare, t ex Internet Explorer och Firefox, för att se om det blir någon skillnad i utseendet. Hela dokumentet sänks med 5 cm och bilden ytterligare 7 cm. 5. Stäng inte dokumentet. Övning 2. margin-left Med denna egenskap kan du specificera den vänstra marginalen för ett element (box) eller ett helt dokument. 1. Ändra koden i din externa stilmall till följande: body {margin-left: 2.5in; img {margin-left: 10%; 1. OBS! Använd punkt(.) och inte komma (,) när du anger ett decimalvärde i en stilregel. 2. Hela dokumentet förskjuts 2,5 tum åt höger, bilden ytterligare 10% av sidans bredd. 3. Prova att minska webbläsarnas fönster så ser du att bilderna förskjutning påverkas av sidans bredd. 4. margin-right och margin-bottom fungerar på samma sätt, men för att se effekten av margin-right måste blockelementet täcka hela sidan (t ex p align= justify ). 5. Stäng inte dokumentet. 4 av 20
Övning 3. margin Med denna egenskap kan du specificera alla marginaler för ett element (box) eller ett helt dokument. 1. Ändra koden i din externa stilmall till följande: img {margin: 2cm; 2. Bilden får nu en marginal på 2 cm runt om. 3. Prova med ett negativt värde t ex -2cm 4. Bilden får nu en marginal på minus 2 cm, vilket i praktiken innebär att två centimeter av vänster sida försvinner utanför dokumentet och att bilden lägger sig över andra element. 5. Stäng inte dokumentet. 5 av 20
padding Denna egenskap är en förkortning för padding-top, padding-right, padding-bottom och padding-left och lägger till ett utfyllnadsområde mellan elementets innehåll och elementets ram (border). Padding fungerar som margin med den skillnaden att margin skapar ett utfyllnadsområde utanför elementets ram (border). Enklast ser man denna effekt i tabellceller (i XHTML motsvaras detta av attributen cellspacing och cellpadding) eller om man har synliga ramar. border Med denna egenskap kan du specificera alla ramar för ett element (box) eller ett helt dokument. Till din hjälp har du tre egenskaper: Border-width (påverkar ramens tjocklek). Border-color (påverkar ramens färg). Border-style (påverkar ramens utseende). För mer information, se föreläsning CSS del 2. Övning 4. border-width 1. Ändra koden i din externa stilmall till följande: h1 {border-width: 4mm; border-style: solid; 2. Observera att du måste ha med deklarationen border-style: solid; för att kunna se ramen. 3. Rubriken får nu en svart, solid ram på 4 mm runt om hela blockelementet. Om du bara vill ha en ram runt rubriktexten så måste du göra om blockelementet h1 till ett inline-element (mer om detta längre fram i laborationshäftet). 4. Stäng inte dokumentet. Övning 5. border-right-width Border har följande varianter: border-top-width, border-right-width, border-bottom-width, border-left-width. Med hjälp av dessa han du påverka ramen vid en eller flera sidor kring ett element. 1. Ändra koden i din externa stilmall till följande: h1 {border-left-width: 0.5em; border-style: solid; 2. Rubriken får nu en smal, svart och solid ram runt elementet, utom på vänster sida där ramen är 0,5 em tjock. Om du bara vill ha en ram på vänster sida ändrar du border-style: solid; till border-leftstyle: solid; 3. Stäng inte dokumentet. 6 av 20
Övning 6. border-color Denna egenskap sätter färg på en ram. På samma sätt som margin och border-width kan du styra om du vill färgsätta hela ramen eller bara vissa sidor. 1. Ändra koden i din externa stilmall till följande: h1 {border-color: fuchsia; border-style: solid; 2. Rubriken får nu en smal, rosa och solid ram runt elementet. Om du bara vill ha en rosa ram på t ex undersidan ändrar du border-style: solid; till border-bottom-style: solid; (Observera att hela elementet får en rosa linje se övning 4 punkt 3). 3. Stäng inte dokumentet. Övning 7. border-style Denna egenskap specificerar stilen på en ram. Följande värden finns: none dotted dashed solid double groove ridge inset outset 1. Ändra koden i din externa stilmall till följande: img {border-style: dotted; border-width:1mm; 2. Bilden får nu en smal, svart och prickad ram runt elementet. 3. Prova att sätta färg på prickarna med border-color: olive; och lite avstånd mellan bilden och den prickiga ramen med padding: 2mm;. Prova också att ändra storleken på prickarna med hjälp av border-width. 4. Prova att ändra värdet till border-style med t ex outset eller inset. För att se effekten bör du sätta ramens tjocklek till t ex border-width: 3mm; 5. Stäng inte dokumentet. 7 av 20
Övning 8. width och height Med width menas bredden av föräldraelementet plus margin-left, borderleft, padding-left, padding-right, border-right, margin-right. Med height menas höjden på föräldraelementet plus margin-top, bordertop, padding-top, padding-bottom, border-bottom, margin-bottom. Med dessa egenskaper kan du skala elementets bredd eller höjd, t ex bildens. Ifall bilden inte ryms i föräldraelementet skalas dennes ursprungliga marginaler. För att behålla bildens proportioner när du använder width bör du även tilldela height värdet auto och vice versa. Glöm dock inte att filstorleken inte ändras. 1. Ändra koden i din externa stilmall till följande: img {width: 150px; height: auto; 2. Bildens storlek har nu minskat till 150 pixlar i bredd. Höjden har ändrat i proportion. 3. Prova att ändra width till 50 %. Bildens bredd blir nu halva bredden på webbläsarens fönster. 4. Har man en bild med god kvalitet kan man sätta width till 100 % så att bilden täcker hela skärmen. 5. Stäng inte dokumentet. Övning 9. float Den här egenskapen använder man för att ange att ett element ska ligga i vänster- eller högerkant och att andra element flyter runt elementet. Egenskapen används oftast till bilder inne i en text och effekten blir precis det samma som att i XHTML använda align= left eller align= right i elementet <img />. Om värdet är none kommer bilden visas precis på det ställe i texten den befinner sig. Värdet left kommer att flytta elementet åt vänster och texten visas då på höger sida av det. Värdet right flyttar elementet åt höger och texten visas på dess vänstra sida. 1. Ändra koden i din externa stilmall till följande: img {float: left; 2. Bilden placeras till vänster om texten och texten flödar kring bildens högra sida. Lägg gärna in margin-right: 2mm; för att öka avståndet mellan bild och text. 3. Stäng inte dokumentet. 8 av 20
Övning 10. clear Den här egenskapen bestämmer om ett element ska tillåta flytande element på dess sidor. Mer specificerat, denna egenskaps värde bestämmer vilka sidor som flytande element inte är tillåtna. Om clear sätts till left, kommer detta element att flyttas nedanför ett flytande element (t ex en bild) som är placerat på dess vänstra sida. 1. Behåll stildeklarationen från övning 9 2. Öppna dokumentet ovning.html och skriv in följande inlinedeklaration i det andra textstycket: p style= clear:left. 3. Denna deklaration kommer att placera det andra textstycket nedanför bilden. Det första textstycket flödar fortfarande kring bilden. 4. OBS! Om du ändrar värdet till right kommer deklarationen att ignorera detta eftersom det inte finns något flytande element placerat till höger om det andra textstycket. 5. Ta bort inline-deklarationen från ovning.html och spara dokumentet. 9 av 20
Färger och bakgrundsbilder Inledning Med Style Sheets kan du tilldela varje element en förgrundsfärg, bakgrundsfärg och bakgrundsbild. Övning 11. color (förgrundsfärg) Med denna egenskap kan du sätta förgrundsfärg, t ex färg på bokstäver i ett stycke, en tabell eller en lista. Färgerna kan skrivas på ett antal olika sätt: (se värden) 1. Sätt en förgundsfärg på samtliga element (utom br) i den externa stilmallen enligt följande: h1, h6, p, img {color: blue; 2. All text blir blå, men bilden påverkas inte. Om du hade lagt med elementet br i deklarationen så hade även den blivit opåverkad. 3. Stäng inte dokumentet. Övning 12. background-color (bakgrundsfärg) Med denna egenskap kan du tilldela varje enskilt element en unik bakgrundsfärg. 1. Komplettera din stilmall från föregående övning med en bakgrundsfärg på samtliga element i den externa stilmallen enligt följande: h1, h6, p, img {color: blue; background-color: yellow; 2. All bakgrund till din blåa text är ny gul (bilden påverkas inte). 3. Stäng inte dokumentet. 10 av 20
Övning 13. background-image Med denna egenskap kan du tilldela varje enskilt element, t ex rubriker eller stycken en unik bakgrundsbild. Du kan uppge både bakgrundsfärgen och bakgrundsbilden. Om bilden inte är tillgänglig visas bakgrundsfärgen. OBS! Adressen till bilden skrivs inom parentes. 1. Komplettera din stilmall från föregående övning med en bakgrundsbild (desert.jpg) på samtliga element i den externa stilmallen enligt följande: h1, h6, p, img {color: blue; background-color: yellow; background-image: url(desert.jpg); 2. All bakgrund till din blåa text är nu försett med en bakgrundsbild (bilden påverkas inte). Den gula bakgrundsfärgen syns inte eftersom bilden hamnar ovanför. Om bilden inte visas, syns bakgrundsfärgen istället. 3. Stäng inte dokumentet. Övning 14. background-repeat Med denna egenskap kan du bestämma hur och om bakgrundsbilden ska upprepas. background-repeat: repeat upprepar bakgrundsbilden både horisontellt och vertikalt. background-repeat: repeat-x upprepar bakgrundsbilden horisontellt. background-repeat: repeat-y upprepar bakgrundsbilden vertikalt. background-repeat: no-repeat bakgrundsbilden upprepas inte. 1. Komplettera din stilmall från föregående övning med deklarationen background-repeat: no-repeat på samtliga element i den externa stilmallen enligt följande: h1, h6, p, img {color: blue; background-color: yellow; background-image: url(desert.jpg); background-repeat: no-repeat; 2. Bakgrundsbilden repeteras inte och bilden visas i originalstorleken 3,5 x 3,5 cm. 3. Byt no-repeat mot repeat-x. 4. Bakgrundsbilden repeteras horisontellt (längst x-axeln). 5. Byt repeat-x mot repeat-y. 6. Bakgrundsbilden repeteras vertikalt (längst y-axeln). 7. Stäng inte dokumentet. 11 av 20
Övning 15. background-attachment Med denna egenskap kan du bestämma om bakgrundsbilden ska skrollas tillsammans med dokumentets innehåll, eller om den ska vara "fastklistrad" (fixed). 1. Ta bort din gamla stildeklaration och ersätt den med följande deklaration: body { color: white; background-image: url(desert.jpg); background-attachment: fixed; 2. För att se effekten kan du behöva minska webbläsarens fönster. Prova sedan att skolla sidan i höjdled, all information utom bakgrundbilden ska nu röra sig när u skrollar. 3. Spara dina dokument och stäng dem. I nästa övning ska du skapa en ny html-fil och en ny extern stilmall. 12 av 20
Övning 16. positionering av en box Design av en webbsida kan göras på två olika sätt: Med hjälp av tabeller med osynliga ramar. Med hjälp av CSS och Positionering av boxar (se föreläsning CSS del 2). I denna övning ska du placera en rubrik 100 pixlar från toppen och 300 pixlar från vänster sida med hjälp av position:absolute: 1. Öppna en ny html-sida och döp den till ovning2.html. Skapa en ny extern stilmall och döp den till mall2.css. Spara filerna i mappen hasseotage. 2. Lägg in följande grundtaggar samt en rubrik i ditt html-dokument: <?xml version = "1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <h1>denna rubrik ska placeras med hjälp av position:absolute</h1> </body> </html> 3. Lägg in följande deklaration i din stilmall: h1 { position: absolute; top: 100px; left: 300px; 4. Länka stilmallen till ditt html-dokument. 5. Din rubrik är nu placerad 100 pixlar från sidans topp och 300 pixlar från vänster sida. 6. Stäng inte dokumentet. 13 av 20
Övning 17. positionering av flera boxar I denna övning ska du placera en bild ovanför din rubrik, 10 pixlar från toppen och 300 pixlar från vänster sida med hjälp av position:absolute. 1. Lägg in följande element i din html-kod i dokumentet ovning2.html. Placera elementet under ditt rubrikelement: <img alt="" src="desert.jpg" height="100" width="100" /> 2. Lägg till följande deklaration i din stilmall: img { position: absolute; top: 10px; left: 300px; 3. Din bild är nu placerad 10 pixlar från sidans topp och 300 pixlar från vänster sida och ovanför din rubrik. 4. När man positionerar sina element med hjälp av position:absolute så spelar det ingen roll var i body du placerar elementen och i vilken ordning. I detta exempel har du placerat rubrikelementet ovanför ditt bildelement, men med hjälp av position:absolute hamnade bilden ovanför rubriken. 5. Spara dina dokument och stäng dem. I nästa övning ska du skapa en ny html-fil och en ny extern stilmall. 14 av 20
Övning 18. Skapa en hemsida med hjälp av positionering av boxar 1. Öppna en ny html-sida och döp den till zeppelin.html. Skapa en ny extern stilmall och döp den till zeppelin.css. Spara filerna i mappen ovning_16 (finns i mappen hasseotage). 2. Skapa en hemsida som ser ut som bilden nedan med hjälp av positionering av boxar och position:absolute 3. Samtliga bilder samt två färdiga html-sidor till länkarna finns i mappen ovning_16. 4. Gå till ditt html-dokument och lägg in grundtaggarna. 5. Lägg därefter in alla element som ska vara med på sidan, (två rubriker, två bilder, två länkar samt två horisontella streck). 6. Gå därefter till din stilmall och skriv in stildeklarationer för position:absolute en för varje element och anpassa värdena för top och left så att elementen sprids ut som på bilden nedan. 7. Spara och stäng dina dokument. 15 av 20
Övning 19. Positionering av boxar med z-index 1. Öppna dina dokument från Övning 15 (ovning.html och mall.css). 2. Ta bort din gamla stildeklaration och ersätt den med följande deklaration:.vov { position: absolute; top: 22px; left: 22px; z-index: 1; font-size:60px; color:#cccccc;.mjau { position: absolute; top: 18px; left: 18px; z-index: 2; font-size: 60px; color: black; body {margin-top: 3cm; 3. body {margin-top: 3cm är tillagt för att skapa luft ovanför rubriken. 4. Lägg till följande element i din html-fil ovning.html (det spelar ingen roll var i body du placerar elementet eftersom det ska placeras med hjälp av positionering av boxen): <h1>ordekvilibristerna</h1> 5. I det första h1-elementet sätter du in attributet class med värdet vov. 6. I det andra h1-elementet sätter du in attributet class med värdet mjau. 7. Dina båda rubriker Ordekvilibristerna ligger nu ovanpå varandra med en liten förskjutning på 4 pixlar. Tack vare att den ena rubriken är grå så uppstår en skuggeffekt. 8. Stäng inte dina dokument. 16 av 20
Övning 20. Media Types Med hjälp av Media Types och selektorn @media ska du skapa en utskriftsvänlig sida av hasseotage.html. Men först ska du göra några ändringar i layouten: 1. Komplettera din gamla stilmall från föregående övning med följande stilmallar som förändrar layouten i ditt html-dokument med hjälp av selektorn @media och värdet screen: @media screen { p { background-color: #ff9999; color: #006666; padding: 1em; border: dotted; 2. Komplettera därefter stilmallen med följande selektorer för selektorn media och värdet print: @media print { p { background-color: white; color: black; padding: 0em; border: none; 3. Din brödtext är nu mörkgrön och placerad på en rosa tonplatta med en prickad ram i mörkgrönt (den rosa och mörkgröna färgen är komplementfärger). Avståndet (padding) mellan text och ram är 1 em. 4. För att se hur dokumentet ser ut i utskrift så behöver du inte skriva ut det, det räcker med att du ser dokumentet i Print Preview på följande sätt: Internet Explorer version 7, gå till Print-menyn och välj Print Preview. Internet Explorer version 8 och Firefox, välj Print Preview från File-menyn. 5. Din brödtext är nu svart och saknar tonplatta och ram. Avståndet mellan text och ram är också borttagen. 6. Stäng inte dina dokument. 17 av 20
Övning 21. Display-funktionen I denna övning ska du använda display-funktionen för att bygga en dropdown-meny i ditt dokument ovning.html. Prova gärna att lägga in egna länkar i drop-down-menyn till t ex Aftonbladet (www.aftonbladet.se) och Expressen (www.expressen.se). 1. Komplettera din gamla stilmall från föregående övning med följande stilmallar: div { position: absolute; top: 0px; left: 0.5em; z-index: 3; div.menu { font-weight: bold; color: white; border: 2px solid #006666; text-align: center; width: 10em; background-color: #006666; div.menu:hover a { display: block; div.menu a { display: none; border-top: 2px solid #006666; background-color: white; width: 10em; text-decoration: none; color: black; div.menu a:hover { background-color: #ff9999; 18 av 20
2. Komplettera därefter ditt html-dokument ovning.html med följande element (det spelar ingen roll var i body du placerar elementet eftersom det ska placeras med hjälp av positionering av boxar): <div class = "menu">meny <a href = "#">Hem</a> <a href = "#">Nyheter</a> <a href = "#">Artiklar</a> <a href = "#">Blog</a> <a href = "#">Kontakta oss</a> </div> 4. Öppna dokumentet i valfri webbläsare. Din drop-down-meny placeras högst upp och 0.5 em till vänster. 5. Stäng inte dina dokument. 19 av 20
Övning 22. Display-funktionen för fler drop-downmenyer I denna sista övning ska du använda display-funktionen för att bygga flera drop-down-menyer i ditt dokument ovning.html. Ändra i din gamla stilmall från föregående övning på följande vis: 1. Gör om den översta stildeklarationen från förra övningen till en klassad selektor och döp den till.hej: div.hej { position: absolute; top: 0px; left: 0.5em; z-index: 3; 2. Kopiera den klassade selektorn, döp denna till.hopp och ändra värdet för left till 11em: div.hopp { position: absolute; top: 0px; left: 11em; z-index: 3; 3. Öppna dokumentet ovning.html, ta bort div-elementet från föregående övning ersätt det med följande två divelement, döpta till hej respektive hopp (det spelar ingen roll var i body du placerar elementen eftersom de ska placeras med hjälp av positionering av boxar): <div class = "hej menu">meny <a href = "#">Hem</a> <a href = "#">Nyheter</a> <a href = "#">Artiklar</a> <a href = "#">Blog</a> <a href = "#">Kontakta oss</a> </div> <div class = "hopp menu">våra produkter <a href = "#">Cyklar</a> <a href = "#">Mopeder</a> <a href = "#">4-hjulingar</a> <a href = "#">Motorcyklar</a> <a href = "#">Hjälmar, skyddskläder, stövlar etc.</a> </div> 4. Öppna dokumentet i valfri webbläsare. Dina drop-down-meny placeras högst upp och 0.5 respektive 11 em till vänster. 20 av 20