(Denna sida använder CSS stilmallar)
– ger enklare underhåll av din webbplats
Mallar kallas även CSS eller style sheets. Det är ett ganska enkelt sätt att i HTML-koden eller en separat textfil bestämma generellt utseende på webbsidorna. Exempelvis kan man bestämma att alla rubriker <H1> ska ha ett visst typsnitt och en viss färg. Dessa inställningar syns delvis i Internet Explorer 3, och bra i Explorer 4, Netscape 4 eller senare versioner. Webbläsaren Opera hanterar de flesta CSS-instruktionerna. I äldre webbläsare ser man dock själva texten, så man har inget att förlora på att piffa upp en sida med CSS. Se bara till att testa att det inte ser hemskt fult ut i en läsare utan CSS.
Om man har många sidor, kan man definiera den gemensamma layouten på ett enda ställe. Detta gör CSS till en stor hjälp att underhålla en webbplats. Man skapar då en separat fil med namnändelsen .css. Den kan exempelvis se ut så här:
body,TD { color: #000030; background: #FEFFFE
}
H1,H2,H3,H4,H5 { font-family: Arial,Helvetica,sans-serif; color: #0000A0
}
A:link { color: #1515FF }
A:visited { color: #BF0056 }
A:active { color: #FF0000 }
Sedan anger man i sidhuvudet efter <head>-taggen i varje dokument ungefär detta:
<link rel=”stylesheet” href=”mallnamn.css” type=”text/css”>
Det är ett sätt att göra särskilda inställningar för ett dokument. Dessa inställningar skriver du in i dokumenthuvudet, dvs efter taggen <HEAD> och före taggen </HEAD>.
Exempel – sidmarginaler: Denna sida som du läser nu har marginaljustering med
CSS. Se gärna själv i källkoden för denna sida. I sidhuvudet står:
<style TYPE=”text/css”><!--
body { margin-left: 15%; margin-right: 15% }
--></style>
Exempel – styckesavstånd: På denna sida vill jag att styckesavståndet ska vara ungefär en halv radmatning. Det kan åstadkommas på en enskild sida genom att i sidhuvudet skriva in koden P { margin-top: 0.5em; margin-bottom: 0.5em }. Se själv i min HTML-kod.
Detta är ett enkelt sätt att göra enstaka justeringar inne i en text. Skriver man exempelvis
<P style="font-size: 2em; font-family: Arial,Helvetica,sans-serif; color: #0000A0">Text, bla, bla, bla.<p>
så kommer den formateringen endast att gälla det stycket efter den P-taggen.
Länkar utan understrykning: På denna och denna och denna menysida vill jag inte att huvudlänkarna ska visas med understruken text. Därför har jag skrivit in a { text-decoration: none } . Se gärna själv källkoden på dessa sidor.
Fritt placerad text: Text kan positioneras ganska fritt, som på denna eller denna sida. Eller på denna sida där jag låter rubriken bestå av tre rader som flyter ihop.
Infälld anfang: Med CSS kan automatiskt första tecknet, ordet eller raden i ett stycke ges särskilda egenskaper. Det passar fint för anfanger. Se exemplet, och se gärna källkoden.
Färgade rullningslister: Detta syns i MS Internet Explorer. Se källkoden till denna sida.
Länkade bilder: Denna sida utnyttjar funktionen ”mouse over” för bildramar. De olika fältens ramar får olika färger då musen rörs över. Det kan användas för att tydligare ange vilka bilder som även fungerar som länkar.
Definitionerna för CSS bestäms av det internationella standardiseringsorganet W3C. Om alla webbläsare och webbutvecklare följde standard vore världen ett bättre ställe.
Per Åkesson 2000
rev apr -10
Kontakta mig om du vill publicera denna, eller liknande, dataartiklar.
Tillbaka
