Intrducerande övningar i CSS CSS (Cascading Style Sheets) är ett språk sm används för att göra stilinställningar av en webbsida skapad i HTML. Stilinställningarna kan läggas in på tre ställen: sm attribut i HTML-taggarna, inm style-taggar i HTML-dkumentet eller sm en separat CSS-fil. Det sistnämnda är bäst, eftersm samma stilmall då kan kpplas till flera lika HTML-dkument. Det är ckså detta sätt sm du ska använda i dessa övningar. I HTML-dkumentet lägger man in en link-tagg i head-delen av kden. I link-taggen refererar man till det CSS-dkument sm ska användas. I CSS-dkumentet skriver man sedan stilinställningar för de HTML-taggar sm man har, t.ex. ul {csskd}. Denna stilinställning ger alla ul-taggar samma stil. Vill man specificera en stil för en enskild tagg, utan att ge alla taggar av samma typ samma stil, så kan man lägga in id- eller class-attribut i HTML-taggen, t.ex. <ul id="abc"> eller <ul class="xyz">, ch sedan i CSS-filen referera till de namn man valt i id- eller class-attributet. Även detta kmmer att tas upp i övningarna. 1. Studera HTML-dkumenten Om du inte redan gjrt det, laddar du nu ner zip-filen med övningsmaterial på labratinens webbsida. Då du packar upp filen får du en mapp kallad CSSintr med ett antal HTML-dkument. Det är för dessa du ska skriva CSS-kd, så börja nu med att rientera dig i HTML-dkumenten. Dkumenten är index.htm (startsidan) samt schema.htm ch uppgifter.htm. Alla dkument har strukturerats på samma sätt ch innehåller en del liknande kd med div-taggar för sidhuvud, navigeringslänkar, sidinnehåll ch sidft. Öppna dkumentet index.htm i din editr ch studera hur HTML-kden är strukturerad ch ntera uppdelningen i lika avdelningar med div-taggar. Öppna sedan index.htm i din webbläsare ch se hur sidan ser ut utan någn stilinställning. Låt sedan sidan vara kvar i webbläsaren, så räcker det att endast uppdatera sidan, då du ska kntrllera ändringarna sm du gör i kmmande övningar. 2. Nytt CSS-dkument I denna övning ska du skapa ett nytt CSS-dkument ch skapa en länk till det från HTMLdkumenten. Skapa ett dkument Skapa ett nytt dkument i din editr. Använder du Dreamweaver väljer du menykmmandt File->New... I fönstret sm då dyker upp väljer du CSS i klumnen för Page Type. Klicka sedan på knappen Create. Du får då ett nytt tmt dkument. Använder du Kmd Edit väljer du menykmmandt File->New->File frm Template... I klumnen Categries väljer du Web ch sedan i klumnen Template väljer du CSS. Klicka sedan på knappen Open. Du får då ett nytt tmt dkument. Använder du en vanlig texteditr skapar du ett nytt textdkument. Spara ditt nya dkument med namnet style.css i samma mapp sm HTML-dkumenten. 2012-11-27 Rune Körnefrs (rune.krnefrs@lnu.se) 1
Skapa en länk i HTML- dkumenten till stilmallen Öppna filen index.htm i din editr. I head-delen (på en ny rad före sluttaggen </head>) skriver du in följande kd: <link href="style.css" rel="stylesheet" type="text/css" media="all"> Denna rad gör att stilmallen kmmer att användas när webbsidan ska visas. href-attributet anger var stilmallen finns. rel- ch type-attributet anger vad det är för typ av fil. Med media-attributet kan man ange för vilken typ av visning stilmallen ska användas, t.ex. för skärmen, för utskrift, etc. I detta fall anger vi att den ska användas för alla visningar. Spara sedan filen. Kpiera link-taggen ch klistra även in den i filerna schema.htm ch uppgifter.htm. 3. CSS-kd för några HTML-taggar Du ska i denna övning skriva in några stilinställningar i CSS-filen för ett antal taggar i HTML-kden. Stil för bdy- taggen Öppna filen style.css i din editr, ifall du inte redan har den öppen. Sedan kan du behålla den öppen i editrn hela tiden, eftersm du ska frtsätta att skriva kd i den i alla övningar. Vill man ange en stil sm gäller för hela dkumentet, så specificerar man den för bdy-taggen. Skriv in följande i din CSS-fil: bdy {backgrund-clr:#9cf; clr:#000; fnt-family:verdana, Geneva, sans-serif;} Med denna kd ger du sidan en blålila bakgrundsfärg ch svart textfärg. Du anger ckså att typsnittet Verdana ska användas (ch m det inte finns i användarens datr så ska det vara Arial, annars Helvetica, annars vilket sm helst utan seriffer). Gå över till webbläsaren ch ladda m sidan index.htm, för att kntrllera resultatet. Det ser väl inte särskilt impnerande ut ännu, men det blir bättre så småningm. Stil för rubrikerna Skriv in följande kd för att byta typsnitt i rubrikerna: h1,h2,h3,h4 {fnt-family:gergia, "Times New Rman", Times, serif; fnt-style:italic;} Här ger du flera taggar (h1 till h4) samma stil. Ett annat typsnitt samt kursiv stil. Gå över till webbläsaren, ladda m sidan ch studera resultatet. Skriv sedan in följande kd i CSS-filen: h2,h3 {brder-tp:1px slid #999; padding-tp:6px;} Här lägger vi till ytterligare stilinställningar för h2 ch h3. Vi har en "kaskad" av stilinställningar. Vi ger en stil för en övre kantlinje sm ska vara en pixel tjck, slid typ (dvs heldragen linje) ch färgen med kd #999 (en ljusgrå färg). Vi ser ckså till att det blir ett litet mellanrum (padding) mellan kantlinjen ch rubriken på 6 pixlar. 2012-11-27 Rune Körnefrs (rune.krnefrs@lnu.se) 2
h3:befre {cntent: ">> ";} h3:after {cntent: " <<";} Denna kd lägger till några tecken före respektive efter rubrikerna i h3-taggar. Dessa s.k. pseud-kder befre ch after fungerar i de flesta webbläsare, men endast från versin 8 av Internet Explrer. 4. CSS-kd för en identifierare Nu ska vi se till att få in lite annan färg på sidan, så att vi slipper allt det gråa. HTML-kden är uppdelad i ett antal avdelningar med div-taggar sm har lika id. Dessa avdelningar mges i sin tur an en div-tagg med id="wrapper". Denna div-tagg ramar alltså in hela sidans innehåll ch vi ska nu utnyttja det för att ge innehållet en annan bakgrundsfärg ch samtidigt centrera det i fönstret. Stil för div- taggen med id="wrapper" #wrapper {backgrund-clr:#ddf3ff; margin:20px aut; padding:16px; width:800px;} #wrapper refererar till den tagg sm har id="wrapper", dvs den sm mger hela sidan i detta fall. Bakgrundsfärgen sätter vi till en ljusblå nyans. Attributet margin kan ha fyra värden för att sätta värden på tp, bttm, left ch right. Då man, sm i detta fall, endast har två värden gäller det första (20px) både för tp ch bttm. Det andra värdet (aut) gäller både för left ch right. Om man endast anger ett värde gäller det för alla fyra marginalerna. Värdet aut betyder att marginalen kmmer att anpassa sig efter fönstrets bredd. Bredden på hela div-taggen blir 832px. Sedan kmmer marginalen till vänster ch höger att bli lika stra. Men vi vet ju inte hur många pixlar, eftersm vi inte vet bredden på fönstret. Därför används värdet aut. Attributet padding ger en inre marginal mellan div-taggens kant ch dess innehåll. I detta fall har vi endast ett värde, vilket betyder att det är samma värde runtm. Med width anges bredden för innehållet. Hela bredden för div-taggen blir width+2*padding, dvs 800+2*16 = 832 pixlar. 5. Stil för en lista Nu ska du ge listan en egen stil. Stil för ul- taggen ul {list-style:square; margin-bttm:6px; fnt-style:italic;} Denna stil gäller för listans rader ch skulle ckså kunna skrivas för li-taggen. Men vi vill inte att detta ska gälla för numrerade listr (l-listr), utan endast för numrerade listr (ul-listr), så därför skriver vi stilinställningen för ul-taggen. Punken i början av raden ska vara en fyrkant. Den undre marginalen (dvs avståndet mellan raderna) ska vara 6 pixlar. Texten ska vara i kursiv stil. 2012-11-27 Rune Körnefrs (rune.krnefrs@lnu.se) 3
Gå ckså över till sidan uppgifter.htm i webbläsaren ch kntrllera listan där. Observera att stilen endast gäller för ul-listrna ch inte för l-listan. l {fnt-weight:bld;} Detta gör att l-listan blir i fetstil. Kntrllera resultatet på sidan uppgifter.htm i webbläsaren. Nu blir hela listan, även de inre ul-listrna i fetstil. Det berr på att ul-listrna här ligger inuti-l-taggen. Eftersm det inte finns någn stilinställning för fnt-weight för ul, så gäller stilen för den mgivande taggen. Lägg till följande kd i slutet av stilen för ul: fnt-weight:nrmal; Då kmmer stilen att bli "nrmal", dvs ej i fetstil, för ul-listrna. Kntrllera resultatet i webbläsaren. 6. CSS-kd för länkar Du ska nu ge länkarna en stil. Länkar har fyra lägen, så därför anges fyra lika stilinställningar. Dessa lägen är en besökt länk (a:link), en tidigare besökt länk (a:visited), markören befinner sig över länken (a:hver) ch användaren klickar på länken (a:active). Stil för a- taggen a:link {clr:#000;} a:visited {clr:#000;} a:hver {clr:#fff; backgrund-clr:#360; text-decratin:nne;} a:active {fnt-size:xx-large;} Vi väljer att inte skilja på besökta ch besökta länkar, utan ger båda svart färg samma färg sm den övriga texten. Man bör verkligen fundera igenm, m man ska göra på detta sätt. Många användare använder de färgkder sm länkarna har sm ett hjälpmedel för att navigera. Men i detta fall byter vi färg av estetiska skäl, då vi inte har så många länkar. Då markören kmmer över en länk visar vi det tydligt genm att byta bakgrundsfärg. För att göra texten mer lättläst tar vi brt understrykningen (text-decratin). Då man klickar på länken ger vi ckså en visuell effekt genm att kraftigt förstra länkens text. Studera resultatet på sidan index.htm i webbläsaren. 7. Stil på navigeringslänkarna De tre översta länkarna används för glbal navigering mellan webbplatsens sidr. Du ska nu ge dem en annan stil än övriga länkar. Detta är möjligt eftersm navigeringslänkarna ligger i div-taggen med id="nav". Så genm att referera till detta id, kan vi ge länkarna där en annan stil. Länkarna ligger ckså i en lista (för att de ska vara lätta att urskilja i webbläsare utan stöd för CSS, t.ex. för synskadade), så vi ska ändra stilen både för listan ch länkarna. Stil div- taggen med id="nav" Börja med att centrera länkarna, genm att skriva in följande kd i CSS-filen: #nav {text-align:center;} div-taggens innehåll centreras hrisntellt på sidan. 2012-11-27 Rune Körnefrs (rune.krnefrs@lnu.se) 4
Stil för li- taggarna Skriv sedan in följande kd i CSS-filen: #nav li {list-style:nne; display:inline;} Genm att börja med #nav före li, så gäller stilinställningarna endast för de li-taggar sm ingår i taggen med id="nav" ch inte för alla li-taggar på sidan. Med list-style tas punkten brt. Taggarna li är nrmalt s.k. blck-taggar, dvs de ligger på varsin rad. Genm att sätta display till inline, gör vi m dem till inline-taggar, så att de ligger på samma rad. Stil för a- taggarna #nav a:link, #nav a:visited {clr:#fff; backgrund-clr:#009; padding:4px; text-decratin:nne; brder:4px utset #003;} #nav a:hver {backgrund-clr:#369; brder:4px inset #336;} #nav a:active {fnt-size:medium;} Genm att börja med #nav gäller stilinställningarna endast för de länkar sm ingår i taggen med id="nav". Vi sätter en annan textfärg, bakgrundsfärg ch padding (inre marginal). Vi tar ckså brt understrykningen av länkarna. Kantlinjen sätts till 4 pixlar ch stilen utset ch en mörkblå färg. Stiltypen utset gör att det ser ut sm en upphöjd knapp. Då man för markören över länken (a:hver) ändrar vi stiltypen till inset, vilket gör att det ser ut sm en intryckt knapp. Samtidigt ändrar vi bakgrundsfärgen sm en ytterligare visuell effekt, eftersm skillnaden mellan utset ch inset inte är lika tydlig i alla webbläsare sm i Firefx. De stilinställningar sm gjrdes för länkar i föregående övning gäller för alla länkar i dkumentet. De gäller alltså även för navigeringslänkarna, m de inte upphävs av andra inställningar här. I a:link, a:visited ch a:hver har vi nya inställningar för clr ch backgrund-clr sm överlappar. Men för a:active har vi tidigare satt fnt-size till xxlarge, så m vi inte här ger fnt-size ett annat värde kmmer det att gälla även för navigeringslänkarna. Det ser kanske inte så snyggt ut m knapparna blir större då vi klickar på dem, så därför sätter vi nu fnt-size till medium (nrmal strlek). Klicka på "knapparna" ch gå till de andra sidrna, så kan du samtidigt se att de stilinställningar sm vi hittills gjrt även gäller för dem. Stil för att markera vilken sida man är på Har man navigeringsknappar är det snyggt m knappen för den sida man befinner sig på markeras, så att man ser var man är. Du ska nu skriva en stil sm gör att knappen är intryckt ch i en annan färg. Vi kmmer att använda ss av en klass för detta. I filen index.htm skriver du nedanstående attribut i fetstil i a-taggen för den första navigeringslänken: <a href="index.htm" class="thispage">startsida</a> Skriv sedan in följande kd i CSS-filen: #nav a.thispage {backgrund-clr:#063; brder:4px inset #060;} 2012-11-27 Rune Körnefrs (rune.krnefrs@lnu.se) 5
Denna kd säger: i taggen med id="nav" ska a-taggen mad class="thispage" ha stilinställningen. Punkten mellan a ch thispage markerar att det är en class ch inte id. Skillnaden mellan class ch id är att ett id ska vara unikt ch förekmma endast en gång i HTML-kden, medan en class kan förekmma flera gånger. I detta fall ska vi visserligen endast ha thispage en gång i varje dkument, men då man kmbinerar med #nav sm vi gör här, brukar det bli bättre att kmbinera ett id i den yttre taggen med en class i en inre tagg. I vissa webbläsare kan det ckså räcka med att specificera.thispage {...} i CSS-filen, men för att det ska fungera i alla webbläsare, får vi skriva kden sm van. Lägg sedan in attributet class="thispage" i den andra ch tredje länken i filerna schema.htm respektive uppgifter.htm. Kntrllera sedan i webbläsaren att rätt "knapp" är markerad på de lika sidrna. 8. Rundade hörn Med CSS3 kan man ckså ge elementen rundade hörn. CSS3 är ännu inte standardiserat, men liksm för HTML5 har man kmmit ganska långt i utvecklingsarbetet ch det finns stöd för en hel del av det i de senaste versinerna av webbläsarna. Vi har nu redan sett till att navigeringslänkarna ser bra ut med kd i CSS1 ch CSS2. Nu ska vi ckså lägga till effekter för de webbläsare sm stödjer rundade hörn. Stil för rundade hörn på länkarna Lägg till följande kd i stilen för #nav a:link,#nav a:visited: -webkit-brder-radius:12px; -mz-brder-radius:12px; brder-radius:12px; Det är egentligen endast den sista raden sm är HTML5-kden för att få rundade hörn, men en del webbläsare har implementerat egna kder för det. Vi tar med dessa kder ckså, så får vi rundade hörn i flera webbläsare. 9. CSS-kd för bilderna På startsidan finns två bilder. Den första ska vi justera till höger ch den andra till vänster. Detta ska göras genm två stilinställningar för klasser sm sedan ska användas i img-taggarna. Stil för klasser sm justerar bilderna.alignleft {flat:left; margin-right:8px;}.alignright {flat:right; margin-left:8px;} Detta är två klasser (punkten markerar att det är klasser). Den första ger en justering till vänster. Den tagg sm klassen används i kmmer att "flyta" till vänster m den efterföljande texten i HTML-dkumentet. Samtidigt lägger vi ckså in en marginal på 8 pixlar till höger m taggen, dvs ett avstånd mellan bilden ch texten. På mtsvarande sätt ger den andra klassen en justering åt höger. I filen index.htm skriver du nedanstående attribut i fetstil i den första img-taggen: <img src="wheels.gif" alt="man på kugghjul" class="alignright"> 2012-11-27 Rune Körnefrs (rune.krnefrs@lnu.se) 6
I den andra img-taggen skriver du in nedanstående attribut: <img src="user.gif" alt="man sm använder en bärbar datr" class="alignleft"> Detta kpplar klasserna till img-taggarna. 10. Stilinställning för sidhuvudet Du ska nu lägga till en stilinställning för rubriken i sidhuvudet med id="header". Stil för sidhuvudet, taggen med id="header" #header {backgrund-clr:#006; clr:#ddf3ff; text-align:right; padding:10px; margin:-16px; margin-bttm:20px;} Vi byter färg på bakgrund ch text samt justerar texten åt höger. För att inte rubrikens text ska skrivas precis i kanten på mrådet, sätter vi padding till 10 pixlar. Div-taggen med id="wrapper" hade tidigare (i övning 4) fått en padding på 16 pixlar. Det betyder att den inre divtaggen för header hamnar 16 pixlar in från den centrerade sidans kant. För att få bakgrundsfärgen att gå ända ut sätter vi därför en marginal på header till padding för wrapper, fast med ett negativt värde, dvs -16 pixlar. Prva att ta brt denna del, för att se skillnaden. Marginalen i bttenkanten vill vi dck ha kvar plus några pixlar till, så därför sätter vi margin-bttm till 20 pixlar. I annat fall kmmer navigeringsknapparna att gå in i sidhuvudet. Prva att ta brt även denna del ch se hur det blir. 11. Stilinställning för sidften Nu ska du ge sidften en stilinställning med en kantlinje ch justering av texten. Stil för div- taggen med id="fter" #fter {brder-tp:4px duble #006; fnt-style:italic; fnt-size:small; clr:#333; text-align:right;} I överkanten lägger vi en dubbel kantlinje på 4 pixlar i blå färg. Texten görs kursiv, mindre, högerjusterad samt i en grå färg. 2012-11-27 Rune Körnefrs (rune.krnefrs@lnu.se) 7
12. CSS-kd för schemat Medieteknik De stilinställningar sm hittills gjrts är tillräckliga för startsidan ch även för sidan med uppgifter. Men sidan med schemat innehåller en tabell, sm vi nu ska ge en stil. Stil för table- taggen med id="schema" #schema td {brder:1px slid #666; padding:2px 4px;} Denna kd säger att alla td-taggar inm den tagg sm har id="schema" ska få stilinställningen. Tabellcellerna får en kantlinje på en pixel ch grå färg. Padding (den inre marginalen) sätts till 2 pixlar i över- ch underkant ch 4 pixlar i vänster- ch högerkant. Öppna filen schema.htm i din webbläsare ch studera resultatet. Skriv även in följande kd i CSS-filen: #schema {brder-cllapse:cllapse;} I HTML-kden kan du se att attributet id="schema" ligger direkt i table-taggen. Här har vi alltså inte ramat in schemat med någn div-tagg, utan använt id i table-taggen istället. Detta är helt OK, då id-attribut kan förekmma i vilken tagg sm helst. Vi har detta id i table-taggen ch gör inställningar för #schema istället för taggen table, eftersm vi vill att detta endast ska gälla för schemat. Skulle vi göra inställningarna för taggen table skulle det gälla för alla tabeller (ifall vi hade haft flera). Denna stil med brder-cllapse:cllapse gör att tabellens celler hamnar precis intill varandra. Stil för hela schemat Schemats underkant hamnar nu kant i kant med sidften, så vi ska lägga in ett litet avstånd där. Samtidigt ska vi ckså lägga en skugga på schemat. Lägg till följande kd i stilen för #schema (samma där du har brder-cllapse): margin-bttm:20px; bx-shadw:5px 5px 5px #666; Med margin-bttm lägger vi en marginal under schemat ch får därmed ett avstånd till sidften. Med bx-shadw ger vi schemat en skugga i höger- ch underkant i grå färg. De två första värdena är hrisntell ch vertikal skugga. Psitiva värden ger skugga i under- ch högerkant, medan negativa värden ger skugga i över- ch vänsterkant. Det tredje värdet är ett mått på hur "suddig" skuggan ska vara. Det sista värdet är en färgkd. Bx-shadw är en CSS3-egenskap. Det finns stöd för det i de flesta webbläsares senare versiner, men inte i alla. Men detta är ju endast en extra visuell effekt. Schemat fungerar ju bra, även m skuggan inte skulle visas. 2012-11-27 Rune Körnefrs (rune.krnefrs@lnu.se) 8
Stil för övre raden ch första klumnen #schema tr:first-child {backgrund-clr:#c60; fnt-weight:bld;} I taggen med id="schema" ska den första tr-taggen få stilinställningen. Bakgrundsfärgen ändras ch texten görs till fetstil. Lägg sedan till följande (i fetstil) i CSS-kden: #schema tr:first-child, #schema tr td:first-child {backgrundclr:#c60; fnt-weight:bld;} Även den första td-taggen i varje tabellrad (tr) ska ha samma stilinställning Stil för varannan rad #schema tr:nth-child(even) {backgrund-clr:#ccc;} Med tillägget nth-child(even) får alla jämna rader denna stil med en grå bakgrundsfärg. 13. Validera CSS-kden Du ska nu kntrllera att CSS-kden är krrekt, genm att validera den. Gå till validatrn i webbläsaren på följande url: http://jigsaw.w3.rg/css-validatr/#validate_by_uplad Klicka på "bläddra"-knappen (brwse) ch peka ut din fil med CSS-kden. Klicka sedan på knappen Granska (Check), för att validera kden. Du bör då få en sida med en röd markering sm säger att kden innehåller två fel. Felen är att kderna -webkit-brder-radius ch -mz-brder-radius inte finns. Dessa kder ingår inte i CSSstandarden eller förslaget till CSS3, utan vi tg med dem endast för att det skulle fungera även i de webbläsare sm har dessa kder istället för CSS3-stödet. Så vi struntar i dessa båda fel. Om du fick några andra felmeddelanden, så får du granska din kd ch jämföra med det sm står i övningarna. Då har du kanske skrivit fel någnstans, så rätta då till det ch validera igen. Slut Därmed har vi gått igenm några exempel på grunderna i CSS. Du har sett hur man refererar direkt till HTML-taggar ch ger dem en stil. Du har ckså sett hur man kan referera till id eller class sm finns sm attribut i HTML-kden. I övningarna har du ckså refererat till taggar sm ligger inuti en annan tagg med eller utan id. De stiländringar vi gjrt här har mest handlat m att sätta färger på lika delar ch ange stil för textjusteringar. Men vi har därigenm ckså skapat en enkel layut för webbsidrna. I nästa labratin ska vi titta mer på möjligheterna med att i CSS styra layutens utfrmning. 2012-11-27 Rune Körnefrs (rune.krnefrs@lnu.se) 9