Lektion 6: sida 1 av 4

 

 

Till kursens framsida

Sida 2 av 4 »

 

 

 

Lektion 6

Nu börjar allvaret! Nå, kanske inte riktigt-- men nu ska vi i alla fall äntligen börja gå igenom grunderna i CSS, webbdesignstilen som gör allt mycket enklare och smidigare, bara man lyckas ta sig över tröskeln i början.

Det är det vi ska göra här, och gå litet djupare i nästa lektion!

 

 

1. Grunderna i CSS

CSS betyder Cascading Style Sheets, vilket kan i stort sett översättas till "stillista" på svenska -- det låter inte lika maffigt men stämmer ganska bra. Det är ett sätt att webbdesigna som kräver litet mer jobb i början, men när man väl kommit igång så tjänar man bokstavligen in timmar med arbete, om inte dagar, jämfört med de sätt vi lärt oss hittills, och dessutom blir det lätt som en plätt att göra så att alla sidor i webbplatsen ser enhetliga ut.

I stort sett allt vi gjort i den här grundkursen -- alltså alla knappar, funktioner och inställningar vi använt oss av -- baseras på HTML. Det är ett väldigt gammalt, enkelt och rättframt programspråk: varje sak man gör i HTML påverkar bara den saken och inget annat. När vi t ex färgar text så berör det bara den texten, inget annat. Och om vi skapar en tabell och ger den ett visst utseende så gäller det bara den tabellen, inget annat.

Men CSS fungerar litet annorlunda. Listan jag nämnde ovan är en sorts "recept" man kan skapa för sin webbplats: det är en samling med olika stilar (eller "klasser") som man själv designat och döpt -- utseenden man skapat enkomt för de saker som finns på ens sidor. Sen kan man "klistra in" de olika stilarna på allt möjligt i sina sidor. Och om man någon gång ändrar i utseendet för en stil så kommer alla förekomster av just den stilen i ens sidor att ändras på en gång.

 

Ett exempel:

Jag har ett antal textstycken i en webbsida:

 

Jag designar ett utseende som gör text stor och röd. Jag sparar utseendet som stilen ".stortext". (Namnen på de utseenden man skapar börjar nästan alltid med en punkt.)

 

Om jag då använder den stilen på några av styckena i min sida så kommer texten i dem att bli just stor och röd!

 

Jag kan alltså använda samma stil på hur många stycken som helst: samtliga stycken jag använder stilen "stortext" på blir exakt lika stora och röda.

Och om jag sedan ändrar på utseendet för "stortext" i stillistan -- jag kanske bestämmer att stilen ska göra text grön istället för röd...

 

... så kommer samtliga textstycken jag använt stilen ".stortext" på (och som jag kommer att använda stilen på i framtiden) att bli gröna!

 

Man behöver inte ens öppna sidorna och ändra något, utan alla ändringar sker automatiskt och omedelbart.

Ju större webbplatser man har desto större och mer uppenbar blir alltså nyttan av CSS-språkets stilfunktioner. Men det finns många andra egenskaper man också kan ha mycket stor användning av, även om ens webbplats kanske bara består av två, tre sidor: man kan nämligen även använda CSS för att skapa lager, eller divar som de också heter (eftersom starttaggen för lager skrivs just <div> i sidans kod).

Lager är rutor som man kan göra hur stora, små, breda eller höga som helst, och som man sedan kan fylla med precis allt man kan infoga i vanliga webbsidor -- text, bilder, tabeller, och så vidare. Det låter nog inte så märkvärdigt, men den stora grejen med lager är att man dessutom kan placera dem exakt där man vill ha dem på sidan -- bokstavligen! Genom att ange en position, t ex 50 pixlar från vänsterkanten och 100 pixlar från överkanten, så hamnar lagret på exakt den positionen (det brukar vara lagrets övre vänstra hörn som placeras på punkten man angett) oavsett hur sidan ser ut eller om det redan finns något där!

När man väl lärt sig hantera lager behöver man alltså inte längre bråka med tomma rader, krångliga tabeller, och kompromissa med designen i sina sidor, utan då det är bara att infoga det innehåll man vill ha i olika lager, och sen sätta in lagren där man vill ha dem på sidan! (Fast man slipper inte allt det gamla: tabeller är fortfarande bra att ha, t ex -- men vi kommer inte att vara lika beroende av dem som förut.)

Och när man börjat göra stillistor kan man t o m designa så pass specifika stilar för enskilda lager att man kan ange deras position och innehåll direkt i utseendet -- jag kan t ex ange i min stillista att de lager som döps till "logo" ska bli 900 pixlar breda, 150 pixlar höga, och ha bilden "matslogo.jpg" som bakgrundsbild. De ska dessutom placeras högst upp och längs sidans vågräta mitt, och all text som skrivs in i lagren "logo" ska bli vit, ha typsnittet Verdana, vara 8 punkter hög, bli fet, och dessutom justerad så att den hålls längs lagrets neder- och högerkant. Till exempel, alltså -- man kan nästan vara hur exakt och detaljerad som helst.

Om jag sedan skapar en ny sida, kopplar den till min stillista, skapar ett nytt lager i sidan och döper det till "logo" så kommer det lagret automatiskt att få exakt de inställningar jag just angav i stillistan för alla lager som heter "logo"!

Och om jag nån gång ändrar i inställningarna för alla lager som heter "logo" i stillistan så kommer ändringarna alltså att utföras omedelbart och automatiskt på samtliga lager som heter så i alla mina sidor som är kopplade till stillistan.

Det enda man inte kan göra med CSS är att placera ut text och annat innehåll (åtminstone inte på något snabbt, enkelt och lättfattligt vis): man designar bara utseendet för det innehåll man skrivit eller infogat i sina sidor.

Nu vet vi alltså en bråkdel av vad man kan göra med hjälp av det (relativt) nya webbdesignsätt som kallas CSS. Men vi måste ju börja från början, så i den här lektionen ska vi bara lära oss de yttersta grunderna: vi ska se hur man skapar och sätter ut stilar på sina sidor.

När vi väl kan det så ska vi använda de kunskaperna i samband med nästa lektion, då vi kommer att bygga på det vi lärt oss här. Sen följer ju fördjupningen efter sommaren för de som vill gå den, och där kommer vi att lära oss en massa roliga knep inom främst CSS.

Men först...

 

 

 

Förbered dina sidor för stilar

Alla ändringar vi lärt oss hittills -- hur man färgar text, ger den olika teckensnitt, ger färg och kantlinjer åt tabeller och så vidare -- kan vi kalla för "vanliga utseenden". De ändringar vi snart kommer att skapa via CSS kallas för "stilar". Och vanlga utseende och stilar tycker inte om varandra.

Tänk dig att du har en TV som du tittar på. Den visar ett jättebra program som du tycker om. Sen kommer din taskiga granne in och målar över din TV-ruta med tjock färg!

TV-programmet representerar stilar, och målarfärgen är vanliga utseenden: du kan byta kanal hur mycket du vill, men det spelar ju ingen roll -- du ser bara färgen din onda granne täckte rutan med.

Om du har igång både stilar och vanliga utseenden på samma gång i samma grej så är det alltså alltid bara det vanliga utseendet som syns: om du färgar ett textstycke blått på vanligt vis, och infogar en CSS-stil som ska göra texten lila så förblir texten blå tills du tagit bort det vanliga utseendet från texten -- först då kommer den lila färgen att synas.

För att du alls ska kunna se stilarna du infogat så måste du alltså först tvätta bort alla vanliga utseenden -- och det är det vi ska göra i det här kapitlet: vi ska se hur man "nollställer" text, tabeller och sidor från vanliga utseenden.

 

* * *

 

Men observera att det här kapitlet är mer eller mindre frivilligt att läsa! Allt jag skriver här gäller nämligen bara om du vill infoga stilar i saker du redan hunnit ge vanliga utseenden. I så fall måste man ju som sagt först ta bort de vanliga utseendena, och det är det jag går igenom här.

Om du däremot skapar en helt ny sida så behöver du ju inte nollställa någonting -- där är det helt fritt fram att skriva, infoga bilder, och skapa tabeller (och så vidare) så länge du låter bli att ge något av det du sätter in på sidan något utseende på vanligt vis. Annars kommer de som sagt att täcka över stilarna vi snart ska skapa, precis som din elaka grannes målarfärg täcker din stackars TV-ruta.

Dessutom: det är bra att känna till att fet- och kursiv stil (och liknande) inte behöver nollställas. Om du gjort text stor, blå och fet på vanligt vis och sen nollställer texten så räcker det med att storleken och färgen försvinner -- du måste inte stänga av fetstilen på den.

 

* * *

 

Då ska vi se hur man nollställer saker, för dig som är intresserad. För att jag ska kunna visa det litet bättre har jag skapat en sida vars innehåll jag redan gett olika utseenden på vanligt vis:

 

Om jag vill kunna använda mina fina CSS-baserade stilar på de olika sakerna i sidan så måste jag alltså först ta bort de vanliga utseendena, annars kommer de vanliga utseendena att helt enkelt täcka över CSS-stilarna. Så hur gör man?

 

 

 

Nollställ text

Det är enkelt att nollställa text, men först ska vi se hur nollställd text egentligen ser ut så vi inte gör några misstag!

Om du vill hänga med i den här genomgången kan du göra såhär:

Skapa en ny sida och skriv in litet text. Om du nu tittar i rutorna för teckensnitt och storlek och för pekaren över knappen för teckenfärg så ser du att texten har teckensnittet och storleken (Default) -- det ordet betyder "förinställd" eller, i vårt fall, "ursprungsläge" -- och om du för pekaren över knappen för teckenfärg står det att den har färgen (Auto). Det ser ut som om texten fått snittet Times New Roman, storleken 12 och färgats svart, men det är bara för att texten ju måste se ut på något sätt. Detta är alltså textens ursprungsinställningar.

 

När texten befinner sig i sin ursprungsinställning så är den helt nollställd: den är mottaglig för allt du vill göra, inklusive att ta emot de CSS-stilar vi snart ska skapa. Texten kan alltså bara visa stilar så länge den befinner sig i ursprungsläget!

Så hur gör man då om man redan t ex hunnit färga texten på normalt vis? Hur tvättar man bort färgen från texten?

Vi ska testa! Ge texten du just skrev ett normalt utseende -- färga den, ge den ett annat teckensnitt och en helt annan storlek (eller flera!), precis som du själv vill, på gammalt hederligt vis:

 

Sådär! Nu ska vi prova att nollställa texten -- alltså tvätta bort det vanliga utseendet så att texten återgår till ursprungsutseendet.

Det finns två sätt att göra det på. Det enklaste, snabbaste och vanligaste är att nollställa texten automatiskt. Det långsammare sättet är att nollställa texten för hand. Men det långsamma sättet är något som kan behövas ibland eftersom det automatiska sättet inte alltid fungerar. Vi går igenom hur man gör på båda sätten.

 

 

Nollställ text automatiskt

Markera texten du vill nollställa. Vill du nollställa all text i hela sidan? Det är det man oftast brukar vilja göra när man väl börjat nollställa grejor. I så fall är det lika bra att göra såhär:

Markera precis allt på hela sidan. Det gör du genom att gå in på Edit > Select All, eller genom att hålla ned tangenten Ctrl och trycka en gång på tangenten A.

 

Gå nu in på menyn Format > Remove Formatting. Om du inte hittar det valet i menyn så kan du behöva föra pekaren över två nedåtpekande pilar längst ned i den -- då utökas menyn, och då bör du hitta det.

Annars går det lika bra att hålla ned tangenterna Ctrl och Shift och trycka en gång på tangenten Z.

 

Nu tvättas texten du markerade ren från alla yttre utseenden!

 

Om du nu klickar i den nollställda texten och tittar på rutorna i verktygsfältet högst upp i skärmen så ser du att teckensnittet och storleken återgått till (Default), och färgen blivit (Auto). Det är de utseendena texten får när den är helt nollställd. Textens teckensnitt och färg har alltså återgått till ursprungsläget och är nu helt mottagliga för de stilar man vill använda på den.

Nu ser min sida ut såhär: texten på sidan är nollställd! Men texten i tabellen nollställdes inte... Ibland blir det så. Detta måste jag fixa för hand.

 

 

 

Nollställ text för hand

Det kan hända att inget händer fast du markerat texten och valt Remove Formatting. Det är ganska vanligt med text man skrivit in i tabeller, bland annat. Om detta händer dig så får du i så fall nollställa den textens teckensnitt, storlek och färg för hand. Det är lika bra att känna till hur man gör.

Börja med att markera texten du vill nollställa, i mitt fall ordet "Katt!" i tabellen på min sida...

 

... och följ stegen nedan:

 

 

Nollställ textens teckensnitt för hand

Klicka på pilen vid rutan för teckensnitt och välj teckensnittet (Default Font) i listan -- det brukar finnas högst.

 

När du valt det så ser det ut som om texten får teckensnittet Times New Roman, men det är som bekant bara textens ursprungsinställning. (Notera att detta inte är samma sak som att välja snittet Times New Roman i listan! Om man vill nollställa textens teckensnitt ska man alltså välja (Default Font), inget annat.)

 

 

 

Nollställ textens teckenstorlek för hand

Klicka på pilen vid rutan för textstorlek och välj storleken Normal eller (Default Size).

 

Då ser det ut som om texten får storleken Small (12 pt), men det hör ju bara till textens ursprungsinställning. (Detta är alltså inte samma sak som att välja storleken Small i listan: om man vill nollställa textens storlek måste man alltså välja storleken Normal eller (Default Size), inget annat.)

 

 

 

Nollställ textens teckenfärg för hand

Klicka på pilen vid rutan för teckenfärg och välj färgvalet Automatic högst upp.

 

Då får färgen sidans standardteckenfärg, oftast svart. Men precis som med teckensnittet och storleken ovan så hör den svarta färgen bara till textens ursprungsutseende och är alltså inte något aktivt val från din sida.

 

 

Hjälp! Jag vet att jag har nollställt min text, men den ser helt annorlunda ut ändå!

Om du vet att texten fått snittet Default Font, storleken Normal eller Default Size samt färgen Auto, men den ändå fått ett helt annat utseende än det jag tjatat om (alltså Times New Roman, storlek 12, svart färg) så beror det i så fall på att sidans ursprungsinställningar blivit ändrade. Det gör inget: det viktiga är att texten nollställts, inte hur den ser ut. Vi kommer att ändra på själva ursprungsinställningarna själva alldeles strax!

 

 

 

Nollställ tabeller

Tabeller bryr sig inte om ifall man väljer Remove Formatting: om man vill nollställa en tabells utseende (vilket vanligtvis innebär att ta bort åtminstone dess färger och kantlinjer) så måste det göras för hand. (Observera: om du har en tabell som du använder Remove Formatting på (t ex om du valt att markera allt på sidan och en tabell då också blir markerad), och dess celler inte fått angivna storlekar, så kommer borttagningen av formateringen antagligen att ställa till det för dina celler -- storlekarna kommer att bli helt konstiga. Om cellerna däremot fått fasta storlekar innan du väljer att ta bort formateringen så kommer de inte att påverkas.)

Som tur är så har jag en tabell jag vill nollställa!

 

Den har en bakgrundsfärg i tabellen samt kantlinjer. Jag vill nollställa alltihop.

 

 

Nollställ celler

Om du vill nollställa flera celler kan du markera allihop först, så slipper du nollställa cellerna en i taget. (Se lektion 3 för närmare beskrivning på hur man markerar flera celler i en tabell ifall du glömt bort det.)

Högerklicka sedan i den cell (eller i en av de markerade celler) som ska nollställas. Välj Cell Properties så dyker cellegenskaperna upp i ett fönster.

Klicka där i rutan Color under rubriken Background och välj färgen Automatic. Då kommer cellens bakgrundsfärg att försvinna.

Se till så att rutan Use background picture blir avbockad. Då kommer cellens bakgrundsbild att försvinna (om det finns någon).

Ställ in rutan Borders på Automatic och ge Size värdet 0.

Det finns flera saker man kan nollställa här -- de enda man oftast bör låta vara om man vill behålla tabellens uppbyggnad är rutorna Rows- och Columns spanned, samt cellernas storlekar. Allt detta går även att ange i de CSS-stilar vi ska skapa, så om man är nitisk kan man radera de cellinställningarna med -- men jag skulle inte göra det.

Dessutom: om du skapar en stil du tänker använda på en tabell eller cell, och stilen är inställd på att ge tabellen eller cellen en särskild bredd eller höjd, så måste du först se till så att rutorna Specify width och Specify height i den tabellens eller cellens egenskapsfönster är avbockade -- annars kommer det som redan står i måttrutorna antagligen att köra över de mått din stil försöker ange.

Men kom ihåg att allt detta nollställande bara är aktuellt för saker som redan fått ett utseende på "vanligt" vis -- om du infogat en helt ny tabell behöver du inte nollställa någonting i den så länge du låter bli att ändra på dess utseende på vanligt sätt.

 

 

Nollställ tabeller

Högerklicka i tabellen och välj Table Properties. Då visas tabellegenskaperna.

Ställ in rutan Size under rubriken Borders på 0.

Ställ in rutan Color under Borders på Automatic så nollställs färgen för tabellens kantlinjer.

Bocka av rutan Collapse table border.

Klicka i rutan Color under rubriken Background och välj färgen Automatic. Då försvinner tabellens bakgrundsfärg.

Se till så att rutan Use background picture blir avbockad. Då kommer cellens bakgrundsbild att försvinna (om det finns någon).

Precis som med cellerna så finns det fler saker man kan nollställa här -- t ex Cell padding och Cell spacing. De enda sakerna man bör låta vara om man vill behålla tabellens uppbyggnad är rutorna Rows och Columns.

Samma sak som gällde för cellernas bredd och höjd vid användandet av måttgivande stilar gäller även för tabellerna.

Men, som sagt, kom ihåg att allt detta nollställande bara är aktuellt för saker som redan fått ett utseende på "vanligt" vis -- om du infogat en helt ny tabell behöver du inte nollställa någonting i den så länge du låter bli att ändra på dess utseende på vanligt sätt, utan bara håller dig till de CSS-baserade stilar vi snart kommer att börja designa.

Jag har nollställt min tabell! Jag lät bli att nollställa dess storlek och uppbyggnad, men allt annat blev borttvättat. (Bakgrunden i tabellen är orange eftersom det är sidans bakgrundsfärg som lyser igenom. Själva tabellens bakgrundsfärg, som var lila, är borta.)

 

 

Nollställ sidans utseende

Gör såhär för att nollställa sidans bakgrundsfärg, bakgrundsbild, och annat.

Högerklicka var som helst i sidan och välj Page Properties i menyn som dyker upp.

Klicka på fliken Format.

Se till så att rutan Background Picture är avbockad.

Ställ in samtliga färgrutor på färgen Automatic. Då blir sidans bakgrundsfärg vit, texten svart, och länkarna blir blå eller lila (beroende på om du hunnit besöka dem än och datorn kommer ihåg det). Men alla dessa färger hör förstås bara till sidans ursprungsutseende.

Klicka på fliken Advanced.

Sudda ut allt som står i Top-, Left-, Bottom- och Right Margin-rutorna. Skriv inte 0 i rutorna utan sudda ut det som står där helt, annars blir det fel.

Klicka på OK så verkställs alla ändringarna, och sidans utseende har blivit helt nollställt.

 

Nu ser min sida ut såhär:

 

 

 

Nollställ bilder

Bilder behöver oftast inte mixtras med, men om du t ex har en ramlinje runt en bild och vill använda en stil på bilden som skulle lägga till en annan sorts ramlinje så måste den gamla linjen tas bort först. I så fall kan du göra såhär:

Dubbelklicka på bilden så visas dess egenskaper.

Klicka på fliken Appearance.

Ställ in rutan Border thickness på 0.

Ställ in rutorna Horizontal- och Vertical Margin på 0.

Klicka på OK.

 

Nu ser min bild ut såhär i sidan:

 

 

Så nollställer man alltså de olika sakerna i sina gamla sidor! Det blev en del text, men det är saker som är bra att känna till -- och som kan komma till stor nytta när man väl börjat skapa CSS-utseenden på allvar; om man då vill göra om i en gammal sida måste man ju kunna "tvätta bort" de gamla utseendena på rätt sätt först!

Men nu ska vi äntligen se hur man skapar de här fantastiska utseendena.

 

 

 

 

Till kursens framsida

Sida 2 av 4 »