CSS-övningar 1. Grunder CSS Testa stilmallar Klasser Elementen div och span Ärvda egenskaper Mer om typsnitt, marginaler och mått Textdekor Fristående CSS -fil Attributet style Prioritetsordning hos stilelement Två övningar Anna Berg / Ove Lundgren 1 CSS_1.doc
CSS Du har förmodligen använt formatmallar i när du arbetat med något ordbehandlingsprogram, t.ex. Word. En formatmall är en mall för hur texten ska se ut med avseende på typsnitt, stil, storlek med mera. CSS är formatmallar för webbsidor. På svenska använder vi ofta ordet stilmallar CSS = Cascading Style Sheets Äldre html-kod innehåller dels information om innehållet på en webbsida, dels information om webbsidans utseende (typsnitt, färger etc.). Numera använder man (som förut) html för att beskriva innehållet, men utnyttjar CSS för att beskriva utseendet! Testa stilmallar Vi utgår från en "traditionell" 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 <html> <head> <title> cssovn1 </title> </head> <body bgcolor="yellow"> <h1> <font face="arial" COLOR="blue"> En rubrik har vi här </font> </h1> <p> <font face ="Verdana" SIZE ="3" > Så lite brödtext i ett stycke </font></p> <h1>en rubrik till</h1> <p> </p> </body> </html> Det här minns du väl från html-kursen? body, h1, p och font är element (ibland kallade "taggar"). Ibland förses taggarna med attribut: Elementet body har i exemplet ett attribut, bgcolor som har värdet "yellow" Elementen font har här argumenten: face som bestämmer typsnitt och COLOR som sätter färg. Se efter 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. Använd helst Internet Explorer. Antag nu att vi vill att alla rubriker (texten i h1-blocken) ska skrivas med typsnittet Arial i blå färg. Antag vidare att vi vill att all text i stycke-blocken (P) ska ha typsnittet Verdana och att den ska vara 11 punkter stor. Vi skulle kunna åstadkomma detta (i alla fall något liknande) med attribut i alla h1- och P-element. CSS erbjuder ett enklare sätt! Anna Berg / Ove Lundgren 2 CSS_1.doc
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. bodyns utseende. Ändra nu filen cssovn1.html så här: <html> <head> <title> cssovn1 </title> body { background-color : yellow; h1 p { font-family : Arial; color : blue; { font-family : Verdana; font-size : 11pt; </head> <body> <h1>en rubrik har vi här</h1> <p> Så lite brödtext i ett stycke </p> <h1>en rubrik till</h1> <p> </p> </body> </html> Som synes lägger vi in ett style-element i head-blocket. style har ett attribut type. Dess värde "text/css" anger att CSS-regler följer. I style-blocket skriver man sina CSS-regler - sina stilmallar. Man säger att man bäddar in CSS i html-koden. Observera att html-koden nu endast hanterar sidans innehåll (rubrik- och textinnehåll). Allt utseende hos texter, rubriker och själva bodyn beskriver vi med CSS. Doctype-deklaration Vi använder i detta material doctype-deklarationen En doctype-deklaration anger vilken version av html som används och bidrar till att olika webbläsare behandlar koden på likartat sätt. Anna Berg / Ove Lundgren 3 CSS_1.doc
Så här är en CSS-regel uppbyggd: en regel selektor h1 { font-family : Arial ; font-size : 16pt ; color : blue ; deklaration attribut värde Regelns "namn" kallas selektor. Selektorn har samma namn som en tagg t.ex. h1 Det som står inom krullparenteserna 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 dess värde står ett kolon-tecken. Efter varje attribut med tillhörande värdeangivelse ska det stå ett semikolon. Terminologin är alltså ungefär densamma som i html. Så här blir resultatet: Anna Berg / Ove Lundgren 4 CSS_1.doc
En regel kan ha flera selektorer. Gör ändringar enligt nedan (ändringar visas med fet stil) : <html> <head> <title> cssovn1 </title> body { background-color : yellow; h1, h2 { font-family : Arial; color : blue; p { font-family : Verdana; font-size : 11pt; </head> <body> <h1>en rubrik har vi här</h1> <p> Så lite brödtext i ett stycke </p> <h2>en rubrik till</h2> <p> </p> </body> </html> Provkör! (Regeln påverkar om synes båda rubriktyperna.) Det är noga med syntaxen när du skriver CSS. I följande regel finns flera vanliga nybörjarfel: Skriv inga "vinklar" här! <h1> { font-family : Arial color : red ; Här saknas ett semikolon! Här saknas höger krullparentes! Anna Berg / Ove Lundgren 5 CSS_1.doc
Det är vanligt att man omger alla CSS-regler med html:s kommentartecknen (<!-- -->). Så här: <!-- h1 { font-family : Arial ; color : red ; --> Syftet är att äldre webbläsare som inte förstår CSS skall dölja innehållet i formatmallen. (Vi utelämnar dock kommentartecknen här så exemplen blir lättlästa) Svårare än så här är det inte att använda CSS! Har du bara tillägnat dig kunskaper om html så lär du snart greppa idén med stilmallar också Här är några adresser som man kan ha nytta av när man jobbar med html och CSS: World Wide Web Consortium ( http://www.w3.org ) sätter standard för html och CSS. html-standarden: html4.01 elementen html4.01 attributen Om CSS : CSS1-standarden: http://www.w3.org/markup/ http://www.w3.org/tr/html4/index/elements.html http://www.w3.org/tr/html4/index/attributes.html http://www.w3.org/style/css/ http://www.w3.org/tr/rec-css1-961217 Dessa attribut har vi använt hittills: Attribut Exempel på värde Typsnitt font-family Arial Verdana Textstorlek font-size 16pt 1cm Textfärg color red blue green Dessa ska vi strax använda: Attribut Exempel på värde Fetstil font-weight bold Stil font-style italic Vänstermarginal margin-left 1cm 10px Bakgrundsfärg background-color lime maroon Anna Berg / Ove Lundgren 6 CSS_1.doc
Klasser Gör tilläggg/ändringar enligt nedan och spara som cssovn2.html. <html> <head> <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; </head> <body> <h1>en rubrik har vi här</h1> <p> Så lite brödtext i ett stycke </p> <h2>en rubrik till</h2> <P class = "minklass"> </p> </body> </html> Här har vi skrivit en regel med en selektor som har ett namn som vi själva har hittat på (minklass) Selektorn är alltså inte namnet på ett html-element. En sådan regel kallas en klass. Observera att det ska stå en punkt framför selektorn för en klass. När vi har deklarerat en klass kan man sedan låta ett (eller flera) html -element använda sig av klassen. I exemplet låter vi det andra P-elementet använda de egenskaper som definierats i klassen minklass Det sker som synes med attributet class = "minklass" Provkör! Så här blir det: Anna Berg / Ove Lundgren 7 CSS_1.doc
Elementen div och span Gör följande ändringar. Spara som cssovn3.html och provkör! <html> <head> <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; </head> <body> <h1>en rubrik har vi här</h1> <div> Så lite brödtext i ett stycke </div> <H2>En rubrik till</h2> <div class = "minklass"> </div> </body> </html> Anna Berg / Ove Lundgren 8 CSS_1.doc
För text inom ett P-block gäller att man får radmatning (och lite extra "luft" före och efter textstycket). För text inom ett div-block gäller att man får en radmatning efter blocket. För text inom ett span-block gäller att man inte får någon radmatning. div- och span-element är vanliga när man använder CSS Gör följande ändring. Spara och testa. <div> <span class="minklass"> En massa text </span> - en massa text </div> Så här blir det nu: span-taggen ger inte någon radbrytning I element som genererar ett radbyte (blockelement, t.ex. P, div, h1, H2 ) fylls bakgrundsfärgen ut ända till högerkanten. I element som kan inpassas på en rad (inline-element, t.ex. span och A ) visas bakgrundsfärgen endast bakom texten. Ärvda egenskaper En html-sida innehåller blocken head och body. I vårt nästa exempel ska vi skriva in lite text i body-blocket. body-blocket ska dessutom innehålla en rubrik, h1, och ett div-element med lite text. Vi kan tänka oss att vår html-sida har denna hierarkiska struktur: html head body h1 div Anna Berg / Ove Lundgren 9 CSS_1.doc
Skriv denna kod och spara som cssovn4.html Provkör! <html> <head> <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 */ </head> <body> </body> </html> <h1>en rubrik</h1> <div> </div> Här har vi gett body vissa egenskaper i en CSS-regel ( Times New Roman, 12pt, svart text på gul bakgrund) Dessa inställningar kommer att gälla i hela bodyn. Vi har i ovningen ovan lämnat h1 och div-reglerna tomma så länge. Som du ser så ärvs de flesta egenskaperna 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. Rubrikelement är från början definierad med en viss textstorlek.) Skriv nu in attribut med värde i reglerna nedan. Spara och provkör. h1 { color : blue; div { font-style : italic; Rubriken är nu blå (men övriga egenskaper ser ut som förut) Texten i div-blocket är kursiv (men övriga egenskaper är som förut, ärvda från body ) Anna Berg / Ove Lundgren 10 CSS_1.doc
Skriv in ytterligare några attribut. Testa html h1 { color : blue; font-family : Verdana; font-size : 24pt; head h1 body div Arv div { font-style : italic; color : maroon; h1 och div ärver egenskaper fån body Du ser här att man kan sätta en egen storlek även på rubriker. Experiment: Lägg rubriken i ett div-element: <div> <h1> En rubrik </h1> </div> Rubriken ärver som synes font-style från div Förutom det här med arv kan du lägga märke till ytterligare några saker i exemplet ovan: Om det ingår blanktecken i typsnittsnamnet ska detta omgärdas av citationstecken ("Times New Roman") Kommentarer i CSS skrivs med snedstreck-stjärna (som i C++ och Java), så här: /* En kommentar */ Anna Berg / Ove Lundgren 11 CSS_1.doc
Mer om typsnitt, marginaler och mått Några ytterligare fakta kring de attribut vi hittills lärt oss: 1. font-family kan ha flera värden. Exempel: font-family : Verdana, Arial, sans-serif; Om det första typsnittet saknar stöd i webbläsaren används det andra osv. 2. Man kan sätta vänstermarginal så här: margin-left : 1cm ; Om man vill att endast första raden i en text ska börja 1 cm åt vänster används attributet text-indent: text-indent : 1cm; Testa text-indent-attributet i övningen cssovn2.html 3. Vid måttangivelser kan man använda enheterna cm, mm, px, pt Testa i någon av övningarna textstorlekarna 24cm, 24mm, 24pt och 24px Ytterligare en enhet är em. Om du sätter t.ex. en marginal till 2em så blir marginalen 2 gånger den aktuella textstorlekens höjd. Textdekor I cssovn4.html: Lägg in en "ankartagg" så att du får en länk till en annan sida, t.ex.: <a href="http://www.kck.amal.se"> Välkommen till KCK Åmål! </a> I style-elementet: Skriv in en regel för A-taggen: a { font-family : Verdana; color : navy; font-weight : bold; Testa! Lägg sedan till attributet text-decoration och testa a { font-family : Verdana; color : navy; font-weight : bold; text-decoration : none; Skillnad? Det finns ingen linje under texten (Vi ska senare se hur utseendet hos en länk kan göras beroende av om det är en aktuell länk, en besökt länk osv.) Anna Berg / Ove Lundgren 12 CSS_1.doc
Färgad ram kring bilder I någon av dina html-filer, lägg in en <img>-tagg så att en bild visas med ram: <img src = minbild.jpg border = 10 > Provkör! (En svart ram visas kring bilden.) Med CSS är det enkelt att färglägga (och ändra utseende på) ramen. Skriv denna regel: img { border-width : 10px; border-style : solid; border-color : red; och ändra <img>-taggen till <img src = minbild.jpg > Testa andra värden för attributet border-width: Byt 10px mot t.ex. 2px eller 20px Testa andra värden för attributet border-style: Byt solid mot dotted eller dashed Testa andra värden för attributet border-color: Byt red mot t.ex. blue eller green De tre border-attributen kan skrivas om till ett enda, så här: img { border : 10px solid red; Mer om attributet border och om färger kommer i CSS-häfte nummer 2 Anna Berg / Ove Lundgren 13 CSS_1.doc
Fristående CSS -fil Hittills har vi skrivit CSS-reglerna i style-blocket (alltså bäddat in dem i html-filen), så här /* här skrivs CSS */ Ett annat sätt är att skriva all CSS-kod i en fristående fil, som sedan länkas till vår html-fil i LINK-taggen, så här: <link rel="stylesheet" href="minstil.css" type="text/css"> Ändra cssovn4.html enligt nedan och spara som cssovn5.html <html> <head> <title> cssovn5 </title> <link rel="stylesheet" href="minstil.css" type="text/css"> </head> <body> <h1>en rubrik</h1> <div> </div> <A href="http://www.kck.amal.se">välkommen till KCK Åmål!!</A> </body> </html>. Kopiera reglerna i cssovn4.html till en egen fil. Spara den som minstil.css body { font-family : "Times New Roman"; Color : black; font-size : 12pt; background-color : yellow; h1 { font-family : Verdana; font-size : 24pt; Color : blue; div { font-style : italic; color : maroon; a { font-family : Verdana; font-weight : bold; Color : navy; text-decoration: none; Testa cssovn5.html Fristående CSS-filer är mycket praktiska t.ex. då man vill ha samma stil på alla sidorna i en sajt (och det vill man ju nästan alltid ) Anna Berg / Ove Lundgren 14 CSS_1.doc
Attributet style Hittills har vi använt elementet style. Vi har skrivit CSS-regelerna inom style-taggarna i head-blocket. Det finns också ett attribut som heter style. Med hjälp av det kan man skriva CSS-regler direkt i en html-tagg - så här: <div style = "color:blue ; font-size:36pt;"> </div> Detta sätt att skriva stilmallar används endast undantagsvis. Varför? Vitsen med CSS försvinner. Man kan i princip lika gärna använda html-attribut. Vi vill ju utnyttja CSS för att separera innehåll och utseende. Prioritetsordning hos stilmallar Vilken stil används om mer än en stil är angiven för ett html-element? 1. I första hand används eventuell stilmall skriven med style-attribut direkt i taggen. 2. I andra hand använd interna stilmallar (CSS inom style-taggar i head-blocket) 3. I tredje hand används externa stilmallar (Stilmallar i fristående CSS-fil) 4. I fjärde hand används webbläsarens standard. I nedanstående exempel finns färgen på rubriken (h1-elementet) definierad på fyra nivåer: Direkt i taggen anges röd färg. Enligt style-blocket är färgen grön. I den externa filen minstil.css anges blå färg. Webbläsarens standardfärg är (normalt) svart. Utgå från cssovn5.html. Lägg till kod/ändra enligt nedan. Spara som cssovn6.html <html> <head> <title> cssovn6 </title> <link rel="stylesheet" href="minstil.css" type="text/css"> h1 { color : green; </head> <body> <h1 style="color:red;"> En rubrik </h1> <div> </div> <a href="http://karlbergsgymnasiet.se">välkommen Karlberg!!</A> </body> </html> Testa! (Rubriken är röd så som CSS-regeln efter style-attributet anger) Ta bort style-attributet i h1-taggen. Testa! (Rubriken är nu grön. Internt stilelement har högre prioritet än extern!) Ta bort style-blocket. Testa. (Rubriken är blå så som anges i det externa stilelementet i filen minstil.css) Ta bort LINK-elementet. Testa. (Rubriken är svart vilket är webbläsarens standard) Anna Berg / Ove Lundgren 15 CSS_1.doc
Två övningar Nu ska du själv skapa snygga webbsidor efter egen smak, med hjälp av stilmallar. Hämta filen examensarbeten.html Texten innehåller information om examensarbeten på en teknisk högskola. Du skall använda texten för att göra en webbsida med information om dessa. Använd vad du hittills har lärt dig om CSS för att lösa uppgiften. Gör sidan så snyggt och överskådlig som möjligt. Milda färger. Hämta filen Formatering.html Där finns en text med rubriken Formateringsmönster i CSS. Denna texten ska på ett snyggt och överskådligt sätt presenteras på en webbsida. Använd vad du hittills har lärt dig om CSS för att lösa uppgiften. Använd väl avstämda färger som inte är jobbiga för ögat. Asteriskerna markerar bokmärken (interna referenser) i texten. Från sidans topp ska man med interna länkar kunna klicka och nå de olika avsnitten i texten. Ordet Upp står sist i varje stycke. Man ska kunna klicka på orden Upp och därvid (med intern länk) kunna gå tillbaka till sidans topp Det första ordet i varje stycke ska du ge ett eget format så att ögat lätt kan orientera sig. Exempel: Intern länk till sidans topp Upp * blockelement Blockelementen är sådana element bokmärke eget format Observera: Det inte ska visas någon bild på sidan. Däremot ska följande text stå sist i texten: <img src="bild.gif"> hänvisar t ex till en fil som heter bild.gif Dessa attribut har vi använt i övningshäftet: Attribut Exempel på värde Typsnitt font-family Arial Verdana Times New Roman Textstorlek font-size 16pt 1cm 10px Fetstil font-weight bold normal Stil font-style italic normal Textfärg color red blue green Bakgrundsfärg background-color lime maroon navy Vänstermarginal margin-left 1cm 10px Första raden indrag text-indent 1em 1cm Textutsmyckning text-decoration none underline line-through blink Ram-bredd border-width 5px Ram-stil border-style dotted dashed solid double groove Ram-färg border-color Red green blue fuchsia gray lime Ram (sammanfattn.) border 5px solid lime Anna Berg / Ove Lundgren 16 CSS_1.doc