Lektion 7: sida 1 av 3

 

 

Till kursens framsida

Sida 2 av 3 »

 

 

 

Lektion 7

Nu har vi kommit fram till den här grundkursens allra sista lektion. Då ska vi lära oss resten av grunderna i CSS. I förra lektionen gick vi ju igenom hur man skapar stilar och lägger in dem på olika saker. Nu ska vi se hur man  skapar litet mer avancerade stilar, samt man skapar formatmallar -- listor med stilar som flera sidor kan kopplas till och hämta utseenden från. Sedan ser vi hur lager fungerar. Det är en sorts flytande rutor man kan placera exakt var man vill i sina sidor!

Den här lektionen kan bli litet krånglig, men bara du läst igenom den en gång så förstår du hur den är uppbyggd. Då går det lättare att hänga med i den.

Bland övningarna i slutet finns länken till en enkät jag vill att du som kursdeltagare ska fylla i. Det är en internetenkät där du får utvärdera kursen (och mig!).

I september börjar fördjupningen i webbdesign med Expression Web för de som är intresserade. Det går att anmäla sig till fördjupningen på http://www.natbildarna.nu.

Men nu är det alltså dags för resten av grunderna i CSS!

 

 

 

Resten av grunderna i CSS

Vi lärde oss ju att skapa stilar i förra lektionen. Den här lektionen blir en direkt fortsättning på det -- men nu ska vi se hur man gör för att använda sina stilar på ett mer effektivt sätt. Detta innebär att vi inte kommer att lägga in stilarna direkt i sidan som vi gjorde i förra lektionen. Istället kommer vi att samla våra stilar i ett separat dokument som kallas för ett Cascading Style Sheet, eller en formatmall.

Vad är ett Cascading Style Sheet -- eller en formatmall (eller stilmall!) -- för något? Jag har berättat det förut, men det är nog lika bra att gå igenom det igen.

Men först av allt ska vi snabbt ta upp något som kallas för "lager". Det är något nytt för oss, och är en mycket viktig och kul del av CSS.

 

 

Kort om lager

När man håller på med stilar och formatmallar kan man även skapa lager i sina sidor.

Ett lager är en ruta som man har total kontroll över: man kan fylla den med precis samma sorts innehåll som man kan ge en vanlig webbsida (text, bilder, tabeller, t o m andra lager, och så vidare), och man kan ange exakt hur högt och brett lagret ska vara. Det låter nog inte så märkvärdigt -- men man kan även ange exakt var på skärmen det ska vara! Och det är faktiskt en smärre revolution i webbdesignandet.

Om jag skapar ett lager, skriver in litet text i det, och vill att lagret ska vara 50 pixlar från sidans vänsterkant och 100 pixlar från dess överkant så kan jag antingen bara klicka-och-dra lagret dit jag vill ha det, eller ange en position i den stil lagret ska få. (Det var något vi hoppade över i förra lektionen, men vi kommer att ta upp det i lager-kapitlet litet senare i den här lektionen.)

Man behöver alltså inte använda sig av klumpiga tabeller, tomma rader, eller något sådant när man ska placera ett lager. Det är bara att infoga ett lager i sidan, fylla lagret med innehåll, och sedan placera det där man vill att det ska vara -- antingen genom att klicka-och-dra eller genom att ange en exakt position direkt i den stil man använder på just det lagret (man brukar väldigt sällan kombinera de två: om en stil anger en position för ett visst lager så bör man inte flytta på det lagret för hand; jag kommer att tjata öronen (ögonen?) av dig angående detta).

Nu när vi har ett litet hum om vad lager är så ska vi gå igenom vad en formatmall gör.

 

 

Kort om formatmallar

En formatmall är en separat lista som innehåller de stilar man designat. En stil i mallen kanske heter grontext (å, ä och ö är som vanligt förbjudna) och gör text grön. Om man då kopplar någon av sina webbsidor till sin formatmall så kan man t ex infoga ett lager i sidan och döpa det till grontext. Då kommer all text som skrivs in i just det lagret att få det utseende som stilen grontext anger i formatmallen!

Och om man kopplar flera sidor till samma formatmall kan man infoga lager i alla sidor och döpa dem till "grontext". Då får alla de lagren exakt samma utseende (men innehållet bestämmer man som vanligt helt själv; ett grontext-lager på en sida kanske innehåller en halv roman medan ett annat bara innehåller en kort välkomsthälsning).

Om man sedan öppnar mallen och mixtrar med stilen grontext så att dess färg blir röd istället för grön så kommer texten i alla lager man döpt till just grontext att bli röd. Förändringen sker omedelbart, utan att man behöver gå in i någon kod eller ens öppna någon sida.

Genom att använda sig av främst lager i sina sidor, och koppla sidorna till en och samma formatmall, så har man alltså fullständig kontroll över samtliga sidors utseende från ett och samma ställe. I början känns det här systemet ofta litet överdrivet, särskilt om man har en pytteliten webbplats med bara två, tre sidor i. Men när du väl lärt dig hur det fungerar lär polletten snart trilla ned, och du inser vilken frihet man får med lager och formatmallar trots att det innebär litet jobb i början.

Jag kommer nu att gå igenom hur man skapar en formatmall. Sedan beskriver jag alla delar man bör känna till när man ska börja skapa och använda lager. De kan verka litet osammanhängande, men sedan går jag igenom hur jag gör för att använda alltihop, och då knyts alla delarna samman. Läs igenom hela kapitlet så får du grepp om vad jag pratar om. Sen kan du alltid hänga med i genomgångarna, så lär du dig ännu snabbare!

Då ska vi se hur man gör för att skapa en formatmall.

 

 

 

1. Skapa en formatmall

Vi ska börja med att skapa en formatmall -- alltså ett dokument som vi kan samla alla våra stilar i. Sedan kommer våra webbsidor att kopplas till det dokumentet.

Gå in på File > New > CSS.

 

Nu öppnas en nya, tom formatmall på din skärm -- och den är just det: tom. Det enda som syns är ett vitt fält med en sifferrad till vänster.

Du ser att formatmallen fått en egen flik strax under verktygsknapparna ovanför sidan. Din formatmall heter antagligen Untitled_1.css.

 

Fliken för formatmallen fungerar precis de som dina webbsidor: när formatmallen är öppen så är det bara att klicka på dess flik så kan du jobba med den. Om formatmallen är stängd så är det bara att dubbelklicka på den i rutan Folder List, precis som när du öppnar en vanlig sida.

Det första man bör göra när man skapat en formatmall är faktiskt att spara den, så att den får ett namn. Annars kan det bli litet knasigt. Det är inte heller något större mysterium:

Gå in på File > Save As. Då får du spara mallen precis på samma sätt som du sparar en webbsida. Det enda du behöver göra är att skriva in vad du vill att mallen ska heta i rutan File Name och klicka på knappen Save. Försök bara att inte använda å, ä eller ö i mallens filnamn, och inga konstiga tecken (inklusive mellanslag) -- håll dig till bokstäverna a - z samt eventuellt siffror.

Jag döper min mall till minforstamall och klickar på Save.

 

Då dyker den upp i Folder List-rutan som filen minforstamall.css. (Om du inte har framme den utmärkta Folder List-rutan kan du gå in på View > Folder List.)

 

Nu ska vi koppla en sida till mallen.

 

 

 

2. Koppla en webbsida till din formatmall

Det här är enkelt: jag skapar en ny sida som vanligt. När den är öppen ser jag till så att paletten Apply Styles visas. Om den inte syns kan man ta fram den genom att gå in på Task Panes > Apply Styles tills valet blir förbockat.

Apply Styles är förstås paletten som listar alla stilar man har tillgängliga. Vi använde den i förra lektionen, och kommer att använda den här med.

För att koppla en sida till en formatmall klickar man på länken Attach Style Sheet.

 

Då öppnas fönstret med samma namn.

 

Här räcker det med att klicka på knappen Browse, så får man peka ut vilken formatmall man vill att sidan ska kopplas till. Jag väljer mallen minforstamall.css, klickar på Open och klickar på OK.

Nu har sidan kopplats till formatmallen.

 

 

 

3. Skapa en stil i formatmallen

Nu ska vi skapa en stil. Men till skillnad från förra lektionen så ska den här stilen inte bakas in i vår sida, utan den ska hamna i vår nya formatmall. Då gör man såhär:

Klicka på New Style i paletten Apply Styles.

 

Då får du fram fönstret New Style. Du känner säkert igen det från förra lektionen.

 

Det första vi ska göra är att ge stilen ett namn i rutan Selector. Som du säkert minns från förra lektionen så måste stilen börja med en punkt, så punkten bör inte suddas bort.

Jag döper min stil till .grontext (som du säkert också minns så är å, ä, ö och allt annat knasigt strikt förbjudet att använda i namnen -- håll dig till bokstäverna a till z samt eventuellt siffror om de behövs).

Nu har vi döpt stilen. Då ska stilen kopplas till vår nya formatmall. Det här är något man bara behöver göra en gång -- den här inställningen stannar nämligen kvar tills man ändrat på den:

Klicka i rutan Define in och välj Existing Style Sheet. Då lär namnet på din nya formatmall dyka upp i rutan till höger. (Annars kan du klicka på knappen Browse bredvid rutan till höger, så får du leta dig fram till din nya formatmall.)

Sådär! Nu har vi ställt in så att den här stilen (och våra framtida stilar) ska samlas i formatmallen minforstamall.css.

Nu vill jag skapa en stil som ska göra text grön och stor, och den ska skrivas i teckensnittet Verdana.

Då är det bara att göra precis som i förra lektionen: jag ser till så att listan till vänster är inställd på Font, eftersom det ju var det valet som styr över teckensnittsutseendet. Sedan ställer jag in rutan font-family på Verdana, rutan font-size på 24 och väljer måttet px, samt ställer in rutan font-color på grönt.

Sedan klickar jag på OK.

Nu har stilen .grontext dykt upp i paletten Apply Styles. Du ser att den hamnat under rubriken minforstamall.css:

 

Det betyder att stilen inte finns i sidan, utan i formatmallen vi döpte till minforstamall. Paletten fungerar bara som en genväg till formatmallen.

Om jag nu skriver något på sidan...

 

... och klickar på stilen .grontext i paletten Apply Styles så får texten just den stilen.

 

Precis som i förra lektionen, alltså, men med en viktig skillnad: den här gången finns stilen i ett separat dokument istället för att den är inbakad i sidan.

Om du nu tittar på flikraden ovanför sidan så ser du nu att fliken för din formatmall fått en liten stjärna vid sig:

 

Stjärnan betyder samma sak där som när den dyker upp i fliken för en vanlig webbsida: det har skett en ändring i mallen som inte sparats ännu.

Men hur kommer det sig? Du har ju inte gjort något med mallen?

Faktum är att du har det: vi kopplade ju den nya webbsidan till mallen och valde sen att stilen .grontext skulle skapas i mallen. Det är precis det som skett nu. Om du klickar på fliken så kommer du att se...

 

... att mallen fått ett kodstycke i sig!

Det här är CSS-koden som bygger upp stilen .grontext. Varje stil du skapar i sidan som är kopplad till den här mallen kommer alltså att läggas in här, ingen annanstans. Efter ett tag kommer mallen att vara full med olika stycken. Men som tur är så behöver vi inte börja skriva och sudda i dem; det sköter programmet åt oss.

Och varje ny stil (eller ändring av en stil) innebär att man kan behöva spara mallen igen. Du bör alltså ta för vana att spara din mall ofta. Men det är lätt gjort: man kan nämligen spara både sidor och mallar genom att högerklicka på dess flik. Då visas en liten meny. Där kan man välja att spara.

 

Då sparas sidan, eller mallen, och stjärnan försvinner. På det här viset behöver man inte ens gå in i sidan man vill spara, utan det räcker med att högerklicka på dess flik.

Om jag nu skapar en ny webbsida, kopplar ihop den med samma formatmall (alltså minforstamall.css)genom att klicka på Attach Style Sheet i paletten Apply Styles...

 

... så fylls paletten Apply Styles med alla stilar som redan finns i formatmallen. Nu är alltså stilen .grontext även tillgänglig i den nya sidan:

 

Om jag då skriver in litet vanlig text i sidan och ger den stilen .grontext så har jag nu två förekomster av samma stil i två helt olika sidor! Lägg märke till att jag sade "samma stil", inte "två likadana stilar".

 

Om jag nu antingen högerklickar på stilen .grontext i paletten Apply Style, eller klickar en gång på den nedåtpekande pilen vid stilen, så får jag fram en meny. Där kan jag välja Modify Style, alltså "ändra på stil"...

 

... så får jag ändra på stilen .grontext. Om jag då gör den röd istället för grön...

 

... så blir båda förekomsterna av stilen röda istället för gröna! Ändringen skedde nämligen i formatmallen, som ju båda sidorna är kopplade till.

 

Och det är just det som är grejen: om jag hade gjort stilarna på precis samma sätt som vi gjorde i förra lektionen -- alltså lagt in dem direkt i sidan -- så hade jag behövt ändra på stilarna i båda sidorna separat för att få dem röda. Men när man använder formatmallar så räcker det med att ändra stilen en gång. Då förs ändringen direkt till stilmallen, och därifrån ut till alla sidor som använder den. Och sidorna behöver inte ens vara öppna!

Nu har vi fått litet grepp om vad en formatmall är för något. Då ska vi titta närmare på lager.

 

 

 

4. Lager

Lager kallas för en massa olika saker: layers, lådor, rutor, divar (eftersom deras kodtaggar skrivs just <div>). Men vi kallar dem alltså för lager.

Ett lager är som sagt en sorts ruta man kan skapa och sen fylla med det innehåll man tycker att den ska ha -- det kan vara text, tabeller, bilder, YouTube-filmer eller vad som helst.

Det viktigaste att känna till såhär i början är att lager inte fungerar som vanliga saker i dina sidor: de tar inte upp någon "plats" på sidorna, utan flyter ovanpå allt annat. Så om du t ex har en tabell i din sida...

 

... och infogar ett lager i sidan så kommer inte lagret att bry sig om tabellens kanter eller celler, utan det kommer helt enkelt att flyta framför tabellen (om det är där du satt det).

 

Så det spelar ingen roll om du t ex infogar ett lager inuti en tabell -- tabellens begränsningar har ingen påverkan på lagret.

Det enda sättet att "tvinga" lager att hålla sig till en viss yta på sidan är genom att använda ett annat lager som behållare, och sätta in alla andra lager i det. Men då måste man göra på ett särskilt vis, och det tar vi inte upp förrän en bra bit in i den här lektionen.

Men allt det här låter nog inte vidare kristallklart, så här har jag skapat ett exempel som visar hur lager kan fungera. Vi går igenom hur man skapar dem och ger dem olika stilar alldeles strax.

Jag har skapat en stil som heter "katt".

 

Stilen gör så att det lager jag infogar den i blir 200 pixlar brett, 263 pixlar högt, och får en bakgrundsbild på en katt. (Vi hoppade ju över storleks- och positionsinställningarna i förra lektionen, men kommer att gå igenom dem i detalj snart.)

Om jag nu infogar ett lager i en sida som är kopplad till formatmallen och ger lagret stilen "katt"...

 

... så hämtar sidan utseendet från min formatmall, och lagret hamnar framför texten!

Och om jag vill kan jag alltid lägga in ett till kattlager, eller varför inte två?

 

Jag gav lagret en så specifik storlek eftersom det är exakt så stor kattbilden är. Det är ett vanligt knep i lagersammanhang: man kan ju inte infoga innehåll såsom text eller bilder via CSS, men man kan däremot infoga bakgrundsbilder -- så om man vill att alla lager man använder en viss stil i ska ha en särskild bild så går det utmärkt att ange den bilden som en bakgrundsbild direkt i stilen. Om man sen anger i stilen att lagret ska bli exakt lika stor som bilden är, så blir det alltså som om man placerat ut en fritt flytande bild på sin sida, som man kan placera precis där man vill ha den.

Genom att använda lager har man alltså mycket stor frihet vad gäller sidans design: man behöver inga tabeller för att positionera lagren, eller ens några tomma rader, utan det är bara att infoga lagren och ge dem olika stilar ur formatmallen.

Sen är det bara att fylla lagren med det man tycker de ska innehålla. Och det är inget märkvärdigt: det är bara att klicka i lagret och börja skriva eller infoga bilder, precis som med t ex tabellceller.

Det är mycket vanligt med webbsidor som bara består av lager idag, vars utseenden och positioner hämtas direkt från en formatmall. Här är ett klassiskt exempel:

www.csszengarden.com

 

Klicka på de olika valen i menyn till höger i sidan länken leder till, så kommer den att byta utseende totalt -- men innehållet ändras aldrig. Det enda som sker är att varje länk leder till en ny formatmall för sidan. Och precis allt är gjort med hjälp av lager och stilar.

Det är ett utmärkt exempel på vad man kan göra med CSS när man väl kommit igång. Vi kommer förstås inte att komma riktigt så långt i den här lektionen, men när vi är klara med fördjupningen som sätter igång i september (för de som vill gå den) så kan vi skapa liknande sidor själva.

Spännande, va? Då ska vi se hur man infogar lager och får dem att fungera som man vill.

Jag kommer att gå igenom processens olika delar en i taget, så att det blir lättare för dig att hitta bland dem när du väl fått ett hum om vad det hela handlar om.

Men som sagt: första gången du läser igenom detta kan det verka som om de olika styckena knappt ens hör ihop. Men när jag väl går igenom först hur jag skapar en stil och infogar den i ett lager, och sedan hur jag skapar två sidor enbart med hjälp av lager och stilar ur en formatmall, så kommer du att se hur allt knyts samman.

Det krävs litet tålamod, men när väl slanten trillar ned så kommer du att ha hur kul som helst -- och inse att friheten lager ger ditt webbdesignande verkligen var värd allt krångel!

 

 

 

5. Skapa en stil med storlek och position

Det här var något vi hoppade över i förra lektionen, eftersom det är något man nästan bara använder i samband med lager. Men nu är det ju dags, så då sätter vi igång!

Vi säger att vi vill göra en stil som ska ge det den infogas i (vanligtvis ett lager) en röd bakgrundsfärg. Stilen ska även göra det den infogas i 400 pixlar brett och 200 pixlar högt, och placera det 50 pixlar från sidans vänsterkant samt 100 pixlar från sidans överkant.

Då gör man såhär:

Klicka på länken New Style i paletten Apply Styles, så visas fönstret New Style.

Skriv ett namn för stilen i rutan Selector och glöm inte att punkten ska vara kvar! Se även om rutan Define in är inställd på Existing Style Sheet, och om rutan till höger är inställd på din formatmall. (Det är de antagligen, men man vet ju aldrig...) Jag döper min stil till rodarutan.

Vi ville ju ha en röd bakgrundsfärg på stilen. Då är det som bekant bara att klicka på valet Background i listan till vänster, så kan vi ställa in rutan Background-color på just rött:

 

Nu kommer stilen att ge det den infogas i röd bakgrundsfärg. Då ska vi ge stilen den storlek och position jag nämnde ovan. Klicka på valet Position:

 

Här kan du ange både storlek och position för det som stilen ska infogas i.

Utöver en röd bakgrundsfärg skulle ju vår stil göra det den infogas i 400 pixlar brett och 200 pixlar högt samt placera det 50 pixlar från sidans vänsterkant och 100 pixlar från dess överkant. Då gör man såhär:

 

Position. Om lagret ska få en fast placering via rutorna left, right, top och/eller bottom så bör dess position bör nästan alltid vara inställd på Absolute.

Det finns flera olika positioneringar, men det är främst Absolute som gör så att lagren kan hamna ovanpå (och under) varandra, och så att man kan placera dem precis där man vill ha dem. Det brukar förstås vara att föredra.

Ta alltså för vana att så fort du gör en stil som ska användas i ett lager och som ska få en fast, angiven placering så bör stilens position ställas in på Absolute (om du inte har något annat i åtanke).

Jag tänker ju göra så att min stil sätter den röda rutan en bit från vänsterkanten och överkanten, så då ställer jag in rutan position på absolute.

 

 

width (bredd). Här anger du hur bred stilen ska göra det den infogas i. Måttet brukar mätas i pixlar (px), så du behöver inte ange något annat mått i rutan intill om du inte vill.

Stilen skulle göra det den infogas i 400 pixlar brett, så jag skriver 400 i den här rutan.

 

 

height (höjd). Den här rutan styr förstås hur högt det stilen infogas i blir, och fungerar likadant som Bredd-rutan.

Höjden skulle bli 200, så jag skriver 200 här.

 

 

top (överkant). Här anger du hur långt från sidans överkant stilen ska placera det den infogas i.

Stilen skulle placera det den infogas i 100 pixlar från sidans överkant, så jag skriver 100 i den här rutan.

 

 

right (höger). Jag kan börja med att nämna att det är betydligt vanligare att ange ett mått i rutan left (vänster).

Om du vill att stilen ska sätta något längs sidans högra kant så är det bara att ange ett värde i rutan right -- t ex 20. Då kommer det du använder stilen på att placeras 20 pixlar från sidans högra kant. Du kan behöva lämna rutan left tom för att det ska fungera.

Jag lämnar rutan Höger tom.

 

 

bottom (nederkant). Det är betydligt vanligare att man anger ett mått i rutan top (överkant). Om du vill att stilen ska sätta det den infogar i längs sidans nederkant kan du ange ett värde här. Du kan behöva lämna rutan top tom för att det ska fungera.

Jag lämnar rutan Nederkant tom med.

 

 

left (vänster). Ange här hur långt från sidans vänsterkant stilen ska placera det den infogas i.

Stilen skulle ju placera det den infogas i 50 pixlar från sidans vänsterkant, så jag skriver 50 i den här rutan.

 

 

Slutligen en särskild CSS-grej:

z-index. Det här är ett speciellt värde. Om du har flera lager som överlappar varann så är det z-index som det också kallas) som bestämmer vilket lager som visas längst fram (och näst längst fram, och så vidare). Ju högre z-index en stil har desto längre fram kommer det den infogats i att hamna.

Så om du t ex har tre lager som överlappar varann så är det det lager vars stil har det högsta z-indexet som hamnar längst fram, alltså framför alla andra lager.

Det lager vars stil har det näst högsta indexet hamnar mitt i högen, och det med det lägsta indexet hamnar längst längst bak.

Om flera lager har samma z-index så är det det lager som infogats sist som hamnar längst fram.

Om man lämnar den här rutan tom så blir stilens z-index standard, vilket är helt okej. Det är trots allt bara när flera lager överlappar varandra som man behöver börja bry sig om det.

Standardvärdet är 0, så om ett lager har en stil med indexvärdet 1 och det någon gång överlappar ett lager vars stil har indexvärdet 0 så kommer det med 1:an att hamna framför. Så funkar det alltså.

Och om man är extra komplicerad kan man även ange negativa ordningsvärden....

Jag låter z-index vara tom.

 

 

Sådär! Då klickar jag på OK, så läggs stilen rodarutan in i paletten Apply Styles:

 

Jag sparar formatmallen. Om jag nu har en sida som kopplats till min formatmall så kan jag infoga ett lager i den och ge lagret stilen "rodruta". Då skulle resultatet bli såhär:

 

Stilen skulle ge lagret en röd bakgrundsfärg, göra det 400 pixlar brett och 200 pixlar högt, och sätta det 50 pixlar från sidans vänsterkant och 100 pixlar från sidans överkant.

Jag skulle kunna göra en ny sida, koppla den till samma formatmall, och infoga ett lager som jag ger stilen rodarutan där med. Då skulle det lagret hamna på exakt samma ställe och få exakt samma storlek och utseende.

Om jag sedan gick in i och ändrade i stilen rodarutan så att dess bakgrundsfärg blev grön, och dess bredd blev 100 pixlar istället för 400, så hade dessa ändringar utförts omedelbart på båda sidorna så snart jag klickat på OK.

Det är kärnan i CSS-design: genom lager och stilar kan man lätt skapa enhetliga sidor vars minsta detalj styrs från ett och samma ställe -- och så snart en särskild utseendedetalj ändras -- t ex bakgrundsfärgen -- så utförs den på alla sidor samtidigt utan att man behöver gå in i dem en och en och utföra samma ändring flera gånger om.

Men det gäller förstås bara de stilar och lager man enkomt skapat för att användas på flera olika sidor. Man kan naturligtvis skapa stilar och lager som bara används en gång på en sida, om ens alls! Allt är helt och hållet upp till en själv.

För att virra till det litet mer så finns det två olika sorters stilar man kan skapa i sin formatmall. De kallas...

 

 

 

6. Klass- och id-stilar

Vi kommer inte att göra så stor skillnad på dem i den här lektionen, men det är ändå något man bör känna till.

Det finns alltså två typer av stilar man kan använda i sina formatmallar. De kallas klass-stilar och id-stilar.

 

Klass-stilar brukar skapas för att användas flera gånger per sida. Om man skapar en stil som ska infogas flera gånger i samma sida bör man dessutom inte ange någon position i stilen -- om man infogar flera kopior på samma stil så hamnar ju allihopa på exakt samma ställe!

 

ID-stilar kan bara användas en gång per sida. Ett ID är ju ungefär som ditt konto- eller personnummer: det finns bara ett av det. Id-stilar brukar ha positioneringar inbakade i sig.

Om du gjort en stil som innehåller positioner så bör du alltså göra stilen till en id-stil. Då kan den stilen bara användas en gång per sida, och på så vis undviker du att flera lager hamnar på exakt samma position. Om du redan har igång en viss id-stil i sidan och försöker infoga samma stil igen så får du upp ett varningsmeddelande som frågar om du är säker, så id-stilarna är ganska väl skyddade mot "missbruk".

Om jag t ex gjort en stil som jag vet bara ska användas en gång på sidan -- den kanske anger en viss storlek, har en tjusig logotyp som bakgrundsbild, och placerar det den infogas i på en särskild plats på sidan -- så kan den stilen med fördel göras till en id-stil.

 

Observera. Klass eller id är mest en smaksak -- huvudsaken är att det fungerar och blir som du vill.

 

 

För att summera det hela. Om du har en stil som du vet bara ska användas en gång i varje sida (t ex för ett lager med en logotyp i, eller en menytabell) så kan du med fördel göra den till en id-stil.

Om du däremot har en stil som ska kunna användas flera gånger i varje sida (t ex en stil som bara påverkar text som förekommer på flera olika ställen i sidan) så bör den vara en klass-stil.

Men det var ju ett himla tjat om klass- och id-stilar. Så hur ser man någon skillnad på dem?

 

 

6.1. Skillnaden mellan klass- och id-stilar

Som du minns så får stilarna automatiskt en punkt framför namnet. Det är punkten som gör stilen till en klass-stil. Alla stilar vi gjort hittills har alltså varit klass-stilar.

Så hur gör man en ID-stil? Det är faktiskt mycket enkelt: det är bara att byta ut punkten mot en "brädgård" -- alltså tecknet #, som man får genom att hålla ned Shift och trycka på siffran 3.

Vi säger att jag skapat en stil som heter "sparv". Jag tänker använda stilen på ett lager och har varit riktigt noga med stilens placering, så jag vill inte att man ska råka sätta in flera versioner av den här stilen på samma sida. Därmed tänker jag göra den till en id-stil, så går den bara att använda en gång per sida.

Stilen blir som sagt en klass-stil från första början (dess namn börjar alltså med en punkt):

.sparv

 

Då jag vill göra den till en id-stil så suddar jag bort punkten innan stilnamnet "sparv" och skriver in en brädgård istället:

#sparv

 

(Detta kan göras direkt i formatmallen, eller genom att högerklicka på stilen i paletten Apply Styles, välja Modify Style, och byta ut punkten mot en brädgård i rutan Selector.)

Nu är stilen en ID-stil, och Mats är nöjd. Om jag nu försöker infoga flera lager med stilen #sparv så kommer jag att få ett varningsmeddelande. Så man lär bli väl medveten om vad som är på väg att hända. Det händer inget farligt om du har flera id-stilar i sidan, men det är inte det de är till för.

Så svårt var det -- då ska vi äntligen se hur man infogar de mystiska lagren!

 

 

 

 

Till kursens framsida

Sida 2 av 3 »