Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende: Skriv följande kod i en editor och spara som cssovn1.html <title> css-övning 1 </title> <body bgcolor="yellow"> <h1> <font face="arial" color="blue"> Här är Rubrik 1 </font> </h1> <p> <font face ="Verdana" size ="3" > Lite brödtext har vi här </font></p> <h1>en rubrik till</h1> <p> Lite text lite till text </p> body, h1, p och font är element (ibland kallas de för "taggar"). Ibland förses elementen med sk attribut: Elementet body har i exemplet ett attribut, bgcolor som har värdet "yellow" Elementen font har här attributet: face som anger typsnitt och color som sätter färg. Kolla i webbläsaren hur resultatet blir! I fortsättningen ska du alltid kolla hur sidan ser ut i webbläsaren, så snart du gjort en förändring. Jämför gärna Internet Explorer och Firefox. Säg att vi istället vill att alla rubriker (h1-blocken) ska skrivas med typsnittet Arial i blå färg. Vi vill också att all text i stycke-blocken (p-taggarna) ska ha typsnittet Verdana och att den ska vara 11 punkter stor. Då kan vi ändra på det genom att ändra i alla attribut i html-filen. 1
Med CSS kan vi förenkla krav på att göra flexibla webbsidor! Med CSS kan vi skriva regler som, en gång för alla, anger hur texten i alla h1-element respektive alla P-element ska se ut. Dessutom kan vi med CSS beskriva t.ex. utseende på. Övning 2 Ändra nu filen cssovn1.html så här: <title> cssovn1 </title> body { background-color : yellow; h1 { font-family : Arial; color : blue; p { font-family : Verdana; font-size : 11pt; <h1> Här är Rubrik 1 </h1> <p> Lite brödtext har vi här </p> <h1>en rubrik till</h1> <p> Lite text lite till text </p> Nu finns style-element i head-blocket. <style> har ett attribut: type som har ett värde: "text/css" som anger att webbläsaren ska använda en stilmall skriven i CSS. I style-blocket skrivs CSS-reglerna, det vill säga de stilmallar man vill använda. Det här kallas för att bädda in CSS i html-koden. 2
Observera att html-koden i detta exempel endast hanterar sidans innehåll. Allt utseende av text och rubriker beskrivs med CSS. Doctype-deklaration I doctype-deklarationen anges vilken version av html som används. Detta gör så att olika webbläsare behandlar koden på likartat sätt. CSS regler Repetition av CSS regler: en regel selekto r h1 { font-family : Arial ; font-size : 16pt ; color : blue ; deklaration attribut värde Regelns "namn" kallas selektor. Selektorn har samma namn som ett element (tagg) t.ex. h1 Det som står inom måsvingarna (curly brackets) kallas deklaration. Deklarationen består av ett antal attribut med tillhörande värde. T.ex. har attributet color värdet blue. Mellan attributet och tillhörande värde finns ett kolon-tecken. Varje regel måste avslutas med ett semikolon. En regel kan ha flera selektorer, t ex att h1, h2 ska ha samma utseende. 3
Övning 3 Utgå från filen cssovn1.html och ändra den enligt följande: <title> cssovn1 </title> body { background-color : yellow; h1, h2 { font-family : Arial; color : blue; p { font-family : Verdana; font-size : 11pt; <h1>rubrik 1</h1> <p> Lite brödtext i ett kort stycke </p> <h2> rubrik 2</h2> <p> Lite text lite till text </p> Provkör! Vad har ändrats? 4
Övning 4 Gör tillägg och ändringar enligt nedan, spara som cssovn2.html. <title> cssovn2 </title> body { background-color : yellow; h1,h2{ font-family : Arial; color : blue; p { font-family : Verdana; font-size : 11pt;.minklass { margin-left : 1cm ; font-weight : bold ; color : yellow ; background-color : blue; <h1>rubrik 1</h1> <p> Så lite brödtext i ett stycke </p> <h2>rubrik 2</h2> <p class = "minklass"> > Lite text lite till text </p> Här finns en regel med en selektor med ett namn (minklass) En sådan regel kallas en klass. OBS! Det ska stå en punkt framför selektorn om det är en klass. 5
Nu kan ett eller flera html -element använda sig av klassen. I exemplet är det andra p-elementet som använder de egenskaper som definierats i klassen: minklass Provkör! Övning 5 Gör följande ändringar. Spara som cssovn3.html och provkör! <title> cssovn3 </title> body { background-color : yellow; h1,h2{ font-family : Arial; color : blue; div { font-family : Verdana; font-size : 11pt;.minklass { margin-left : 1cm ; font-weight : bold ; color : yellow ; background-color : blue; <h1>rubrik 1</h1> <div> Så lite brödtext i ett stycke </div> <h2>rubrik 2</h2> <div class = "minklass"> Lite text lite till text </div> Text som finns inom ett p-block förses med radmatning, det blir lite extra luftigt Text inom ett div-block förses en radmatning efter blocket. Text inom ett span-block får inte någon radmatning alls. div- och span-element är vanligt förekommande i CSS. 6
Gör ändringen nedan. Spara och testa. <div> En massa text - en massa text <span class="minklass"> Lite text lite till text </span> - </div> Övning 6 Om ärvda egenskaper En html-sida innehåller blocken head och body. Nästa exempel innehåller lite text i body-blocket. body-blocket ska även innehålla en rubrik (h1) och ett div-element med lite text. html-sidan nedan ges denna hierarkiska struktur: Skriv denna kod och spara som cssovn4.html <title> cssovn4 </title> body { font-family : "Times New Roman"; font-size : 12pt; color : black; background-color : yellow; h1 { /* lämnas avsiktligt tom så länge */ div { /* lämnas avsiktligt tom så länge */ <h1>en rubrik</h1> En massa text - en massa text En massa text - en massa text <div> En massa text - en massa text En massa text - en massa text </div> 7
En massa text - en massa text En massa text - en massa text Här har vi gett det som står i elementet vissa egenskaper i en CSS-regel ( Times New Roman, 12pt, svart text på gul bakgrund) Detta kommer att gälla i hela bodyn. Vi har i övningen ovan lämnat h1 och div-reglerna tomma så länge. De flesta egenskaperna ärvs hos h1- och div-elementen från body: Texten har typsnitt Times New Roman, den är svart på gul bakgrund. (Undantaget är textstorleken i h1 på grund av att rubrikelement från är början definierad med en viss textstorlek. Det har att göra med prioritetsordningen) Skriv nu in attribut med värde i reglerna nedan. Spara och provkör. h1 { color : blue; div { font-style : italic; Testa och provkör, hur ser det ut nu? 8