CSS - Stilmallar Hur infogas CSS?
Inledning
I HTML-dokumentet struktureras sidans innehåll med olika taggar och presenteras för besökaren med det utseende som är standard i den webbläsare man använder för att titta på sidan.
Rubrikernas färger, teckensnittens storlek och sånt bestäms alltså av den webbläsare som tolkar sidan och eventuellt vad besökaren gjort för egna inställningar.
Vill man själv bestämma hur den egentillverkade webbsidans utseende ska man använda sig av CSS - Cascading Style Sheets, Stilmallar.
Med CSS kan man ange hur man vill att sidan ska presenteras - hur den ska se ut helt enkelt. Färg och storlek på teckensnitt, sidmarginaler, radavstånd och mycket mer.
Att också använda Stilmallar / CSS för att styra hur sidans olika delar placeras är det som tillhör nyare standard på webben.
Infoga CSS
Det finns tre sätt att styra sidans utseende med hjälp av CSS:
Extern Stilmall - en eller flera sidor styrs av en separat stilmall.
Intern Stilmall - stilmallen skrivs in i sidans huvud.
Inline Style - skrivs in direkt i html-koden.
Själva Css-koden ser likadan ut vilket sätt du än använder. Skillnaden är hur stor del av din sida du vill att css-koden ska styra.
- Om du skriver koden i en Extern Stilmall - en separat fil - kan mallen styra precis så många sidor du vill på din webbplats.
- Anger du koden i en Intern Stilmall i huvudet på sidan gäller mallen DEN sidans utseende.
- Skriver du koden med Inline Style direkt i HTML-taggen styr utseendet det som står mellan start-taggen och slut-taggen.
Kaskad - prioriteringsregler
Ordet Cascading i Cascading Style Sheets syftar på att egenskaper kan definieras flera gånger för samma element. Alltså kan flera olika stilmallar användas för en och samma sida och komplettera varandra.
- CSS ersätter webbläsarens inbyggda formatmall.
- Om din webbplats utseende styrs av en extern Css-mall och du vill att en av dina sidor ska ha ett helt annat utseende kan du ersätta deklarationer i den externa mallen genom att infoga en intern stilmall direkt i sidans huvud. Det går också bra att kombinera båda...
- Om din sida styrs av en stilmall, extern eller intern kan du formatera vissa delar av sidan genom att infoga "Inline Style" direkt i html-koden.
Generellt kan man säga att en sidas utseende styrs i följande ordning. Nummer fyra har högst prioritet:
1. Webbläsarens inställningar
2. Extern Stilmall
3. Intern Stilmall (inom <head>)
4. Inline Style (i html-koden)
Alltså, Inline Style har högst prioritet och åsidosätter en Stilmall inom <head>, en Extern Stilmall och även webbläsarens inställningar.
OBS!
Om du tidigare har formaterat din sida enligt äldre standard med formaterings-taggar i HTML-koden kommer de att gälla i första hand! Vill du formatera din sida med CSS ska du ta bort de Html-koder för formatering du redan har på sidan!
Syntax - Kodens uppbyggnad
Så här funkar CSS-kod:
- CSS-kodens syntax består av regler
- En stilmall kan bestå av många regler
- En regel består av två huvudelar: En Selector och en eller flera Deklarationer
- Selectorn är det HTML-element man vill formatera
- Selectorn kan också vara en klass eller ett ID
- Deklarationerna skrivs in mellan såna här klamrar: { }
- En deklaration består av två delar: En egenskap och ett värde
- Egenskapen och värdet skiljs med ett kolon
- Varje deklaration är åtskilt av ett semikolon
Så här:
selector { egenskap: värde }
|
Som selector väljer man alltså det HTML-element man vill formatera. Egenskapen är det attribut man vill påverka genom att ge det ett visst värde. Vill man ange fler egenskaper för ett element måste de som sagt åtskiljas av ett semikolon.
Så här:
selector { egenskap: värde; egenskap: värde }
|
Exempel
Nedanstående regel i CSS-koden bestämmer att text mellan <p> och </p> ska visas med teckensnittet "Arial" och färgen på teckensnittet ska vara svart (black).
p { font-family: Arial; color: black }
|
Om man vill att flera element, selectorer - ska ha samma egenskap ( i det här exemplet blå text ) skriver man så här:
h1, h2, h3, h4, h5, h6 { color: blue }
|
För att göra koden mer överskådlig kan man låta varje deklaration börja på ny rad.
Så här till exempel:
p {
font-family: Arial;
color: black;
}
|
Det kan också vara smart att som ovan alltid avsluta en deklaration med ett semikolon - oavsett om det kommer någon ny efter. På så sätt blir det aldrig fel!
Extern Stilmall
En Extern CSS-mall är ett textdokument som man skapar i en vanlig textredigerare som Anteckningar. Den enda skillnaden är att dokumentet ska sparas med filändelsen: css.
Med en Extern Stilmall kan man styra det övergripande utseendet på hur många sidor som helst på sin webbplats. Så här går det till:
Länka till Stilmallen
På de HTML-sidor man vill ska omfattas av stilmallen måste själva CSS-dokumentet länkas in med taggen <link>. Den placeras i HTML-sidans huvud. Så här:
|
<head> |
- Webbläsaren kommer nu att formatera sidan efter de regler du angivit i dokumentet: stilmall.css.
- Man kan låta obegränsat antal sidor styras av samma mall!
Skapa Stilmallen
Stilmallen skapar du genom att i din textredigerare skriva in css-koden och döpa textfilen till förslagsvis: stilmall.css. En stilmall kan ha vilket namn som helst men filändelsen ska vara: css och du måste naturligtvis länka till rätt fil från HTML-sidan.Under rubriken: HTML & CSS / En första Sida & Stilmall kan du läsa mer om hur själva dokumentet skapas.
Exempel på text i en stilmall:
p {
font-family: Arial;
color: black;
}
h1 {
font-family: Georgia;
color: blue;
}
|
Så här funkar det:
| CSS | Förklaring |
|---|---|
p { |
Startar den css-kod som har p som selector. |
font-family: Arial; |
Teckensnittet ska vara Arial. |
color: black; |
Teckensnittets färg ska vara svart. |
} |
Avslutar den css-kod som har p som selector. |
h1 { |
Startar den css-kod som har h1 (rubrik) som selector. |
font-family: Georgia; |
Teckensnittet ska vara Georgia. |
color: blue; |
Teckensnittets färg ska vara blå. | } |
Avslutar den css-kod som har h1 som selector. |
Spara Stilmallen
Som nybörjare - innan du lärt dig lite mer om CSS / Stilmallar - är det enklast om du sparar css-dokumentet i SAMMA mapp som sidan eller sidorna som ska styras av mallen. På så sätt undviker du en del problem som kan uppstå med sökvägar till bakgrundsbilder och liknande. Det kan nämligen funka lite olika i olika webbläsare.
Intern Stilmall
Vill du att endast en sida ska omfattas av stilmallens regler skriver du in koden i sidans huvud i stället - alltså mellan <head> och </head>.
Så här:
<head> <style type="text/css"> <!-- p { font-family: Arial; color: black; } h1 { font-family: Georgia; color: blue; } --> </style> </head> |
- Själva koden ser precis likadan ut och fungerar på samma sätt som tidigare.
Inline Style
Inline Style kan användas när du vill styra utseendet på enstaka element i HTML-koden.
Observera dock att detta tillvägagångssätt ska undvikas i så stor utsträckning som möjligt! Det är dessutom inte tillåtet att använda Inline Style om man kodar enligt strict standard!
Koden är annars exakt densamma som i exemplen ovan men skrivs in direkt i HTML-koden i elementets start-tagg så här:
|
<p style="font-family: Arial; color: black;">Den här texten kommer att visas svart med teckensnittet Arial</p> |
Eller direkt i HTML-koden med taggen <span>:
|
<p><span style="font-family: Arial; color: black;">Den här texten kommer att visas svart med teckensnittet Arial</span></p> |
Eller som här där radavståndet för några textstycken styrs med taggen <div>:
|
<div style="line-height: 20px;"> |
Klasser & ID
Om du vill att vissa delar av din sida ska ha ett speciellt utseende kan du skapa egna Klasser eller ID'n.
När man namnger dessa kan man använda: Bokstäver a-z eller A-Z och siffror 0-9. Namnen är alltså känsliga för om man använder små eller stora bokstäver och namnen får inte börja med en siffra.
Man kan också använda en del andra tecken... Men håll dig helst till små bokstäver och siffror så slipper du trassel med vad olika webbläsare eventuellt tycker är OK.
Klasser
En klass skrivs in i css-mallen med en punkt framför namnet. Du kan ge dina egna klasser vilket namn du vill men det måste vara unikt. Man kan alltså inte ha flera klasser som heter samma sak!
Det kan kanske vara bra att hålla sig till ett namn som antyder vad klassen ska användas till, men "kuckeliku" går också bra...
Så här skriver man in klassen "kuckeliku" i css-mallen. Här bestämmer klassen att text skall centreras:
|
.kuckeliku { text-align: center; } |
Sedan anropar man klassen i HTML-dokumentet med attributet: class.
Så här:
|
<p class="kuckeliku">Den här texten blir centrerad!</p> |
Vill man ange hur ett visst element ska uppföra sig när de tillhör en viss klass går det också bra.
Så här kan man skriva in klassen i css-mallen:
|
.kuckeliku p { |
Så här kan man anropa klassen i HTML dokumentet:
|
<div class="kuckeliku"> |
Så här skulle det kunna se ut:
|
Länk till en bra sökmotor: Google |
Man kan också ange klasser som man knyter till en speciell HTML-tagg. Det går alltså bra att ange flera olika stilar för samma tagg.
Så här skriver man in klasserna i CSS-mallen:
|
p.blue { color: blue; } |
- Namnen på klasserna ovan är "blue" och "red" - men de kunde lika gärna ha hetat "knoll" och "tott".
Så här anropas sedan klasserna i HTML dokumentet:
|
<p class="blue">Den här texten blir blå!</p> |
- Observera att klasserna i exemplet ovan bara kan användas ihop med <p>.
ID
Precis som man använder klasser kan man i stället använda: ID'n - identiteter. Ett ID skrivs in i css-mallen med tecknet: # framför namnet.
Skillnaden mellan en klass och ett id är att en klass kan anropas från HTML-sidan på hur många ställen som helst - ett "id" bara på ett enda ställe per HTML-sida. Ett "id" har också högre prioritet än en klass.
Så här kan det se ut i stilmallen:
|
#rubrik { color: red } |
Så här anropas man sitt "id" i HTML dokumentet:
|
<h1 id="sidrubrik"> |
Tips!
När du skapar namn till dina klasser och "ID'n" kan det vara bra att ange ett beskrivande namn som antyder vad den ska användas till - snarare än hur den ska se ut.
Varför? Jo, om du har formaterat en hel webbplats med en klass och senare vill göra om utseendet kan det bli lite irriterande om du döpt den till "gul" när du nu vill ändra färgen till rosa...
DIV & SPAN
DIV
Med hjälp av taggen: <div> kan man styra en stor del av en sidas formatering. Div är förkortning av division och med div-taggen kan man gruppera stycken och styra deras utseende efter samma regel. Med andra ord låta allt mellan <div> och </div> påverkas av en och samma klass.
Div-taggen är ett s.k. block-element. Block-element visas alltid med en automatisk radbrytning före och efter elementet.
Låt säga att du vill att delar av en sida ska ha ett radavstånd på 20 pixlar och skapar en klass för detta - som du kallar radavst20. I CSS-mallen definierar du det i koden så här:
|
.radavst20 { line-height: 20px; } |
Så här anropas klassen i HTML-koden:
|
<div class="radavst20"> |
SPAN
Med <div> formateras större delar av ett HTML-dokument medan <span> används för att formatera mindre delar på sidan t.ex. några ord i ett texstycke.
Taggen <span> får till skillnad från <div> inte sträcka sig över flera stycken eftersom...
...span-taggen är ett s.k. inline-element. Inline-element visas i linje med omkring-liggande element - alltså utan radbrytning före eller efter elementet.
En span-tagg ska alltid infogas inom taggarna för ett block-element. En span-tagg kan innehålla andra inline-element som t.ex <a>, <strong>, <b> och andra span-taggar - men får aldrig innehålla ett block-element.
Ett exempel på hur en klass kallad "finemang" anropas i HTML-dokumentet med taggen <span>:
|
<p>Text text text <span class="finemang">text text text</span> text text text.</p> |
Komprimerad Deklaration - Shorthand Declaration
När man kodar webbsidor strävar man ju alltid efter att koden ska vara så komprimerad och lättladdad som möjligt. Det gäller även stilmallen.
I stället för att skriva ut alla egenskaper för en selector i css-koden kan man använda sig av: Shorthand declarations - Komprimerade deklarationer.
Då kan man ange alla värden för en och samma selector utan att särskilt behöva skriva in alla egenskaperna. Läs vidare i CSS-guiden för att lära dig hur du kan komprimera dina deklarationer efter de regler som finns.
EXEMPEL
Vill man ange bakgrundsegenskaper används egenskapen background för att komprimera värdena.
Den här CSS-koden...
body {
background-color: #FFFFFF;
background-image: url(images/bg.gif);
background-repeat: repeat;
}
|
...tolkas på precis samma sätt som den här:
p { background: #FFFFFF url(images/bg.gif) repeat; }
|
OBS!
Riktigt, riktigt gamla webbläsare klarar inte av att tolka komprimerade deklarationer, Short hand declarations.
Kort om Arv
Slutligen lite kort om arv.
I CSS ärver underordnade element vissa egenskaper av eventuellt "föräldrar-element".
Till exempel tillhör <table>, <tr> och <td> samma "familj" och kommer att ärva egenskaper av varandra ( i ovanstående ordning ) - om man inte anger annat.
Det fungerar också så att om du vill att all text på din sida ska ha ett visst teckensnitt och färg och anger det med "p" som selector får all text mellan <p> och </p> automatiskt det utseendet.
Vill du sedan att t.ex. ett visst textavsnitt ska ha samma teckensnitt, men en annan färg, kan du skapa en klass där du bara behöver ange den nya färgen - teckensnittet kommer automatiskt förbli detsamma. Det ärvs av föräldern "p". Antingen genom man skriver in klassen direkt i taggen <p> eller mellan <p> och </p> med <span>.
Exempel
I CSS-mallen:|
p { font-family: Arial; color: black; } |
Så här kan man anropa klasserna i HTML dokumentet:
|
<p>Här är lite text. <span class="color3">Den här texten blir blå.</span> Annars är det ingen skillnad!</p> |
Så här kan det se ut på sidan:
|
Här är lite text. Den här texten blir blå. Annars är det ingen skillnad! Den här texten blir röd och med samma teckensnitt som ovan! |
