Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8

Transkript

1 Laboration 2 CSS del 1 1 av 8

2 Vad kommer jag att lära mig på laboration 2? Skriva en stilmall: o Skriva extern CSS-mall och länka den till XHTML-dokument o Skriva inbäddad CSS-mall i XHTML-dokument o Skriva inline CSS-mall i XHTML-element Stilmallar för: o Typsnitt = font-family o Typsnittstjocklek = font-weight o Typsnittsstorlek = font-size o Typsnittsstil = font-style o Textjustering = text-align o Textindrag = text-indent o Textdekorering = text-decoration o Färg = color Olika typer av stilmallar: o Klassade selektorer o Selektor som klass o Pseudoklasser Facit till uppgifterna finns på sid av 8

3 Övning 1. Extern CSS-mall I mappen hittar du övningsdokumentet buzz.html samt två gif-bilder. 1. Öppna buzz.html i Notepad eller Notepad++ Portable och bekanta dig med webbsidan och XHTML-koden. 2. Spara en kopia av buzz.html och döp det till ovning1.html så att du inte skriver i originaldokumentet (du ska använda orginaldokumentet i flera övningar). Spara dokumentet ovning1.html i mappen Buzz Lightyear så fungerar länkarna till bilderna. 3. Öppna ett nytt dokument i Notepad eller Notepad++ Portable. 4. Döp ditt dokument till buzz.css och spara det i samma mapp som dokumentet ovning1.html. 5. Infoga följande stilregler: a. Alla rubriker typ h1 får röd text. (se sid 28 i föreläsningen CSS del 1 eller facit i detta häfte). b. Alla rubriker typ h2 får grön text. (se ovan). c. Texten i stycket ska ha typsnitt arial 14 punkter (se sid 13 och 18 eller facit). d. Länken till Disneyfilmer ska sakna understrykning (se sid 27 eller facit). 6. Länka stilmallen till dokumentet ovning1.html. (se sid 40 eller facit). 7. Öppna och titta på ovning1.html i valfri webbläsare. Dina rubriker ska nu vara röda och gröna, din brödtext ska vara arial 14 pt och din länk ska sakna understrykning. 8. Om inte din stilmall fungerar kan det bero på att du inte lagt din stilmall buzz.css i samma mapp som ditt html-dokument ovning1.html. 9. Spara ovning1.html och buzz.css och stäng dokumenten. Övning 2. Inbäddad CSS-mall ovning2.html. 2. Skriv en inbäddad stilmall i head. 3. Infoga följande regler: a. Alla rubriker typ h1 limegröna. b. Alla rubriker typ h2 navyblå. c. Texten i stycket ska ha typsnitt courier 16 punkter. 4. Öppna dokumentet i valfri webbläsare. Rubrikerna ska nu vara limegröna och blå och din brödtext ska ha typsnitt courier 16 pt. 5. Spara och stäng dokumentet. 3 av 8

4 Övning 3. Inline CSS-deklaration ovning3.html. 2. Skriv en inline stildeklaration i följande element. a. h4 textjustering = center och typsnittsstil = oblique. b. p (det räcker med det första textstycket) textindrag 2% och typsnittstjocklek = Öppna dokumentet i valfri webbläsare. Rubriken Av Klas Dahlgren 9 år ska nu vara centrerad och med kursiv stil. Det första textstycket ska ha ett indrag på första raden samt fet stil i hela textstycket. 4. Spara och stäng dokumentet. Övning 4. Klasser 4a. Klassade selektorer ovning4a.html. 2. Skriv en inbäddad stilmall i övningsdokumentet. a. Skapa en generell klass för alla textstycken med följande stildeklaration: Textstorlek = 2 em, typsnittsstil = oblique. b. Skapa tre klassade selektorer som ändrar färg på textstyckena till maroon, lime och green. c. Döp klasserna till kastanj, lime och gurka. 3. Öppna dokumentet i valfri webbläsare. Alla textstycken ska nu ha dubbelt så stor text med kursiv stil. Det första textstycket har färgen maroon, det andra lime och det tredje grön färg. 4. Spara och stäng dokumentet. 4b. Klassade selektorer med hjälp av <span> ovning4b.html. 2. Skriv en inbäddad stilmall i övningsdokumentet. a. Skapa en klassad selektor som gör ett textindrag på 1 em för samtliga textstycken, samt textfärgen fuchsia. b. döp klassen till indrag. c. Sätt elementet span runt alla textstycken (se sid 47 i föreläsningen). 3. Öppna dokumentet i valfri webbläsare. Alla textstycken ska nu ha ett textindrag på första raden som är en bokstavshöjd bred, samt textfärgen fuchsia (rosa). 4. Spara och stäng dokumentet. 4 av 8

5 4c. Selektor som klass ovning4c.html. 2. Skriv en extern stilmall med en selektor som klass med en stilmall för typsnittet Courier New och textfärgen silver, som du döper till silver. 3. Döp stilmallen till ovning4c.css. 4. Länka stilmallen till ditt html-dokument ovning4c.html. 5. Sätt in selektorn som klass i samtliga rubrikelement 6. Öppna dokumentet ovning4c.html i valfri webbläsare. Alla rubriken ska nu ha typsnittet Courier New med silverfärg. 7. Spara och stäng dokumentet. Övning 5. Pseudoklasser ovning5.html. 2. Skriv en inbäddad stilmall i övningsdokumentet. 3. Skapa pseudoklasser som gör att länken till Disneyfilmer byter färg enligt följande: 4. Obesökt länk: Grön 5. Besökt länk: Grå, kursiv stil 6. Aktiv länk: Röd 7. Förändringar när man för markören över en länk (hovrar): Utan understrykning. 8. Öppna dokumentet ovning4c.html i valfri webbläsare. Länken ska nu ha grön färg. När du hovrar med pekaren över länken försvinner understrykningen. När du klickar på länken och håller knappen nere så blir länken röd. Efter att du har besökt så ska länken vara grå med kursiv stil. 9. OBS! Om du redan har besökt länken blir den inte grön eftersom den visa i besökt läge. För att göra länken obesökt måste du rensa Browsing history (i Internet Explorer 8 går du till Tools och väljer Internet Options. Klicka på Delete-knappen för Browsing history). 10. Spara och stäng dokumentet. 5 av 8

6 Facit Övning 1. buzz.html Sätt in följande element med attribut och värden i head i ditt htmldokument <link rel="stylesheet" href="buzz.css" type="text/css" /> buzz.css Skriv följande stildeklaration I ditt css-dokument: h1 {color: red;} h2 {color: green;} p {font-family: arial, sans-serif; font-size: 14pt;} a {text-decoration: none;} Övning 2. <style type="text/css"> <!-- h1 {color: lime;} h2 {color: navy;} p {font-family: "courier new", monospace; font-size: 16pt;} --> </style> Övning 3. Skriv följande inline-deklaration i elementer h4: <h4 style="text-align: center; font-style: oblique;"> Skriv följande inline-deklaration i elementet p: <p style="text-indent: 2%; font-weight: 700;"> 6 av 8

7 Övning 4. 4a. <style type="text/css"> <!-- p {font-size: 2em; font-style: oblique;} p.kastanj {color: maroon;} p.lime {color: lime;} p.gurka {color: green;} --> </style> Skriv följande kod i de tre första textstyckena: <p class="kastanj"> <p class="lime"> <p class="gurka"> 4b. <style type="text/css"> <!-- span.indrag {text-indent: 1em; color: fuchsia;} --> </style> Sätt elementet span runt samtliga textelement med följande kod: <span class="indrag"> 7 av 8

8 4c. ovning4c.html <link href="ovning4c.css" rel="stylesheet" type="text/css" /> Sätt följande attribut med värde i samtliga rubrikelement: <h1 class="silver"> <h2 class="silver"> <h4 class="silver"> ovning4c.css Skriv följande stildeklaration i ditt css-dokument:.silver {font-family: "courier new", monospace; color: silver;} Övning 5. <style type="text/css"> <!-- a:link {color: green;} a:active {color: red;} a:visited {color: grey; font-style: oblique;} a:hover {text-decoration: none;} --> </style> 8 av 8