vad är CSS?
2. Eftersom antalet taggar är starkt begränsat skulle alla hemsidor se väldigt lika ut om det inte fanns något sätt att ändra på denna information. Men det finns det! Det enklaste sättet att göra detta är att använda sig av "Cascading Syle Sheets", CSS.
Med CSS kan jag skriva nya regler för hur taggarna ska uppföra sig. Jag kan också skapa specialregler och avancerade regler. (Mer om dessa senare.) Jag kan till exempel tala om att taggen för brödtext inte alls ska använda typsnittet Times utan istället den mer lättlästa Verdana. Efter att ha infört denna nya regel kommer all brödtext på min sida att skrivas med Verdana. Jag kan också bestämma att texten ska skrivas med en annan färg. Det är precis vad jag har gjort på den här sidan. Om jag inte hade skapat en CSS-regel för min brödtext här hade ni fått försöka läsa på det här viset:
Det här är standardtypsnitt och färg i vanlig html, utan CSS. Det är inte så lämpligt att använda på denna sida - eller hur?
OBS! Mina skärmfotografier till den här artikeln är från engelskdpråkiga Dreamweaver 8. De ser alltså inte exakt likadana ut som på lektionerna och i era nyare Dreamweaver CS3. Skillnaderna är dock så små att det bör gå bra ändå.
3. För att skapa en ny CSS-regel använder jag en av knapparna längst ner i CSS-panelen, närmare bestämt den som heter "Ny CSS-regel". (Om CSS-panelen är stängd, klicka på den lilla svarta pilen/triangeln vid sidan av ordet CSS. Se också till att fliken "Alla" är aktiv.)
Den här frågerutan står inställd på att omdefiniera taggen <body>. Body-taggen är den tagg jag brukar kalla "skrivbordet". Den bestämmer hela sidans grundutseende. Så är till exempel den här sidans grå bakgrundsfärg bestämd i en CSS-regel för hur body-taggen ska uppföra sig.
4. När du klickat på "Ny CSS.-regel" får du upp den här frågerutan. Den ställer tre viktiga frågor och vi ska gå igenom dem i tur och ordning.
Först frågar den om vilken typ av regel du vill skapa. Det finns tre typer:
a) Klass. Här skapas specialregler som ska användas när någonting ska avvika från det vanliga. Ett exempel är om jag vill markera vissa viktiga ord i min brödtext. Jag har här gjort en klass som bestämmer att text ska ha gul bakgrund och svart färg på bokstäverna. Jag kan använda en klass hur många gånger som helst på en sida. Här har jag använt den tre gånger!
b) Tagg. Det är med det här valet jag talar om att jag vill definiera om en hel html-regel. Den nya regeln gäller oinskränkt på hela sidan (tills exempelvis en klass säger något annat). Den här sidan visar ju all text i Verdana med vita tecken. Det har jag bestämt genom att tala om att html-taggen för brödtext, <p>, ska uppföra sig på det viset.
c) Avancerad (ID). Jag reserverar detta tillval för Div-taggen. Mer om den på en annan sida.
5. Nästa fråga gäller vilket namn du vill ge din nya regel. Har du valt b), att definiera om en html-tagg, så har du ett begränsat antal valmöjligheter - du måste nämligen tala om vilken tagg du vill bearbeta. Är du ute efter att ge sidans brötext ett nytt utseende är det taggen <p> du vill bearbeta och skriver följdaktligen p här. Om du drar ner rullgardinen ser du vilka taggar som finns.
För de andra tvä typerna, a) och c), gäller att du får bestämma namn själv - men du får inte använda å, ä, ö, versaler, mellanslag eller andra konstiga tecken (utom understrykning, _). För klasser gäller att namnet börjar med en punkt (klassen för den här texten heter ".markup" - och den här heter ".smalltext"). Namnet på ID-regler börjar med en "brädgård", # (Shift-3 på tangentbordet), exempelvis "#container".
6. Sista frågan gäller var du vill lagra dina nya regler och du har två alternativ att välja mellan. Det vanligaste är att du sparar din regel i en separat fil, en stil.fil eller CSS-fil. Om du gör detta kan andra sidor på din sajt enkelt tillgodogöra sig dina CSS-regler och du får ett enhetligt och sammanhållet utseende på din sajt. Men du kanske redan i förväg vet att den här regeln inte kommer att förekomma någon annanstans på sajten. Då väljer du istället att spara på den här sidan bara. Den här klassen heter .engangstext och finns garanterat inte någon annanstans på min sajt. Alltså har jag valt att spara den på den här sidan bara.
Några tips:
Om du definierar en tagg kan du alltid använda "Apply"- eller "Använd"-knappen för att se hur din regel tillämpas direkt. Om du definierar en klass måste du först tillverka klassen, klicka OK, markera ett objrekt på sidan och tilldela objektet den nya klassen (nere i egenskapsfönstret). Sedan kan du dubbelklicka på klassnamnet i CSS-panelen och redigera klassen. Nu kan du använda Apply/Använd-knappen och finjustera din regel.
Håll koll på CSS-panelen. Det är lätt hänt att man klickar lite för mycket och plötsligt har man en massa regler som definierar samma tagg eller klass.
Här har vi definierat <p>-taggen tre gånger! För att bli av med de två överflödiga definitionerna; ta tag i dem och dra dem ner till papperskorgen. Du kommer kanske att tappa några inställningar men om du dubbelklickar på det kvarvarande p-et så kan du lätt sätta tillbaks dem - den här gången i en och samma regel.