Placering: Hela webbplatsen

Inledning
Enstaka taggar
Enstaka sidor

En global stilmall består av en enkel textfil som anropas från varje sida där stilmallen skall utnyttjas. Det här är den enklaste och samtidigt den mest kraftfulla metoden när man till fullo vill utnyttja fördelarna med stilmallar.

En global stilmall kan innehålla alla layoutkommandon för hela webbplatsen. När du vill ändra utseende på dina webbsidor - i enstaka detaljer eller genomgripande förändringar - gör du ändringarna i en enda textfil. Du behöver inte ens öppna webbsidorna.

Ta den här webbplatsen som exempel. Just i CSS-skolan har jag här och var stoppat in extramallar, för att visa olika funktioner, men för övrigt styrs hela webbplatsen av stilmallar - av ren lättja har jag inte gjort en enda stilmall, utan en för varje ram, men det skulle gå lika bra att bygga ihop dessa stilmallar till en enda.

Stilmallen laddas första gången besökaren kommer till en sida som anropar den. Sedan finns mallen i webbläsarens minne och behöver inte laddas på nytt.

I HEAD-elementet på varje sida som skall använda stilmallen lägger jag ett anrop:

<link rel=stylesheet href="stilmall.css" type="text/css">

Det här innebär att webbläsaren letar fram filen stilmall.css och stoppar in den på anropets plats. Sökvägen måste förstås anpassas till i vilken mapp sidan befinner sig, så att den hittar mallen.

Den globala stilmallen kan vara kort - om den till exempel bara innehåller några taggselektorer - men den kan också vara lång och innehålla en mängd klasser. Det beror på hur komplicerad, eller avancerad, man vill göra sin sida.

En global stilmall är en vanlig textfil som du kan öppna, ändra och spara i Anteckningar eller någon annan textredigerare, men du sparar den med filändelsen *.css i stället för *.txt. Du får inte ha några tagghakar i stilmallen. Däremot både får och bör du kommentera mallen, så att du lättare kommer ihåg vad du har gjort.

Exemplet nedan är med vissa modifieringar en del av stilmallen till den här sidan. Utöver taggselektorerna här innehåller den diverse klasser, bland annat en klass som placerar det lila strecket centrerat under rubriken. Jag har placerat kommentarerna inom /* ..... */

/*Gul bakgrund, på denna en skuggbild som upprepas längs vänsterkanten, textfärg svart angiven därför att bakgrundsfärg anges*/
BODY {
background-color: #FFFFF0;
color: #000000;
background-image: url(skugga.jpg);
background-repeat: repeat-y;
}

/*Ingen kant, normal brödtextstil, 3 px marginal runt innehållet, svart text 10 pt*/
TABLE {
border: 0px;
font-family: arial, sans-serif;
font-size: 10pt;
color: #000000;
padding: 3px;
}

/*Grå rubriker i Times New Roman eller annan seriff*/
H1, H2 {
color: #585858;
font-family: "times new roman", serif;
}

/*Huvudrubriken centrerad i 18 pt*/
H1 {
text-align: center;
font-size: 18pt;
}

/*Underrubriken i 14 pt med 6 pixlars marginal till föregående block*/
H2 {
margin-top: 6px;
font-size: 14pt;
}

/*Inga understrukna länkar */
A, A:LINK, A:VISITED {
font-family: arial, sans-serif;
font-size: 10pt;
text-decoration: none;
}

/*Obesökta länkar blå*/
A:LINK {
color: Blue;
}

/*Besökta länkar lila*/
A:VISITED {
color: Purple;
}

/*Understrykning vid mouseover och klick*/
A:HOVER, A:ACTIVE {
font-family: arial, sans-serif;
font-size: 10pt;
text-decoration: underline;
}

/*Mouseoverlänkar fuchsia*/
A:HOVER {
color: Fuchsia;
}

/*Aktiva länkar röda*/
A:ACTIVE {
color: Red;
}

/*All brödtext i samma stil*/
P, B, UL, OL, INS, DEL {
font-family: arial, sans-serif;
font-size: 10pt;
}

/*Svart text i listor*/
UL, OL {
color: #000000;
}

/*Textblock med 1em indrag från vänsterkanten*/
P {
margin: 1em; 
color: #000000;
}

/*Halvfet text grå*/
B {
color: #585858;
}

Den här mallen sparas som stilmall.css (eller vad man nu vill kalla den) och anropet från HTML-sidan blir då som ovan. Se bara till att sökvägen till stilmallen blir den rätta i förhållande till sidan som skall anropa den.

Därmed är förutsättningarna färdiga för att skapa webbsidor med ett enhetligt utseende - sidor som kommer att känneteckna just dig. Om du behöver ändra utseende på sidorna - byta bakgrundsbild, ändra textfärg, byta teckensnitt, vidga eller krympa marginaler eller vad det nu kan vara - gör du alla ändringar i stilmallen.

När du skickar upp den ändrade stilmallen till servern ändras alla sidor. Du skickar alltså en enda fil till servern i stället för 10, 20 eller kanske flera hundra, och du behöver inte vara rädd för att du kanske glömde att ändra på någon sida.

Därmed har vi avverkat den första delen av CSS-skolan. Du vet hur du definierar stilar för taggar, klasser och ID-objekt. Du kan gruppera stilar och göra dem sammanhangsberoende. Och du kan lägga in stilar i taggar, på enstaka sidor och på hela webbplatser.

Nu skall vi börja gå igenom de attribut som kan påverkas av stilmallarna.

Inledning
Enstaka taggar
Enstaka sidor

©SupportData.Net
www.supportdata.net