Stylesheets

Stylesheets är ett slags formatmallar som gör det möjligt att kontrollera layouten på en webbsida. Det vanligaste språket för att skriva formatmallar är Cascading Style Sheeets, som oftast förkortas till CSS. Stylesheets är en ganska ny utökning till HTML och stöds av Internet Explorer 4 och Netscape Navigator 4 och nyare versioner. Men det ska påpekas att alla funktioner, i CSS, inte stöds av de olika webbläsarna.

Den första versionen, CSS1, antogs 17 december 1996 och den andra versionen som man nu använder, CSS2, blev standard den 12 maj 1998. Någon ny version kommer förmodligen inte eftersom HTML i framtiden kommer att ersättas av XML.

Stylesheets är bra att använda sig av när man vill ha kontrolll över presentationen av en sida. Det är möjligt att bestämma den typografiska utformningen av hur dokumenten skall presenteras oavsett webbläsare, bildskärmstyp, m.m. Man kan anpassa dokumtet till andra medier, t.ex. skrivare, om man vill att dokumentets layout inte skall förändras vid utskrift. Men det går också bra att ha olika mallar för ett och samma dokument, viklet gör det möjligt att få olika utseende på skärmen och på utskrifter.

Stylesheets kan användas på tre olika sätt för att presentera webbsidor. Man kan göra en mall för ett enstaka stycke i en text, man kan göra en mall för hela dokumentet och en separat formatmall som kan användas till flera dokument samtidigt. Att omforma ett enskilt stycke i ett dokument är inte så vanligt, utan för det mesta används en formatmall för ett helt dokument. Därför så används normalt stylesheets i HEAD och inte i BODY.

Väljare, egenskap och värde.

Att göra formatmallar i CSS behöver inte vara så svårt. Om man t.ex. vill ha en formatmall som anger att alla rubriker av typen H2 ska vara blå, skriver man på följande sätt:

H2 { color: blue }

H2 kallas här för väljare (eng. selector), color kallas egenskap (eng. property) och blue är egenskapens värde. Tillsammans kallas color: blue för en deklaration (eng. declaration). Deklarationen börjar och slutar mellan klamrarna. Det finns en hel del olika egenskaper som kan användas för att styra CSS med och i exempeln som följer kommer en del av dom att belysas.

det är möjligt att ha flera väljare och deklarationer i samma mall. För att skilja väljarna åt använder man komma och för att skilja deklarationerna åt använder man semikolon. Om man till exempel vill att föregående rubrikexempel ska ha teckensnittet Impact, skriver man på följande sätt:

H2 { color: blue; font-family: impact }

Attributet STYLE

Med hjälp av attributet STYLE kan man omforma enskilda stycken i ett dokument. Om man till exempel använder attributet i märket <BODY> kan man bestämma vilken bakrundsfärg, bakgrundsbild, teckensnitt, teckenfärg och så vidare, för hela dokumentet. För att ge en del av dokumentet en annan bakgrundsfärg kan du använda attributet STYLE i märket <DIV>. Märkets funktion är att avgränsa en del av dokumentet.

STYLE kan användas som attribut i alla märken utom <BASEFONT>, <HEAD>, <HTML>, <META>, <PARAM>, <SCRIPT>, <STYLE>, <TITLE>, och <BR>,

Detta är ett exempel på hur man med hjälp av Stylesheets kan få en dubbel ram runt ett stycke. För att åstadkomma detta skriver man:
<P STYLE="{ font-family: verdana; color: blue; border-style: double; border-width: thick; border-color: red; padding: 10px; background-color: yellow }">
Här bestämmer font-family: verdana; och color: blue; att teckensnittet ska vara verdana och ha blå färg, border-style: double;, border-width: thick; och border-color: red; bestämmer att stycket ska ha en dubbel ram som är tjock och röd, padding: 10px; och background-color: yellow bestämmer att texten ska ha ett avstånd av 10 pixlar till ramen och att stycket ska ha en gul bakgrund.

<SPAN>

Med hjälp av <SPAN> kan man få en egen utformning av mindre delar i ett dokument, om man lägger till attributet STYLE. <SPAN> är liksom <TT> och <B> ett frasmärke och får inte sträcka sig över flera stycken. Man avslutar med </SPAN>.

Exempel:

<P>Här visas lite olika teckensnitt med olika färger.
<SPAN STYLE="{ font-family: verdana; color: blue; }">
Först skriver vi lite blå text med teckensnittet <TT>verdana</TT>.</SPAN>
<SPAN STYLE="{ font-family: courier; color: red; }">
Sedan fortsätter vi med en röd text av teckensnittet <TT>courier</TT>.</SPAN>
<SPAN STYLE="{ font-family: tahoma; color: green; }">
Till sist avslutar vi med en grön text av teckensnittet <TT>tahoma</TT>.</SPAN></P>

Så här ser det ut i webläsaren:

Här visas lite olika teckensnitt med olika färger. Först skriver vi lite blå text med teckensnittet verdana. Sedan fortsätter vi med en röd text av teckensnittet courier. Till sist avslutar vi med en grön text av teckensnittet tahoma.

Märket <STYLE>

Med hjälp av märket <STYLE> kan man påverka utformningen av alla förekomster av en typ av text, man kan ge alla stycken ett visst format och till exenpel även alla listor i hela dokumentet. Attributet STYLE använder man för att ändra formatet på ett enda ställe i dokumentet. Med hjälp av märket <STYLE> kan man alltså få en fördefinerad stil för hela dokumentet och slipper på så vis att ange en viss stil, för varje rubrik och stycke. Man använder märket <STYLE> för att markera en fomatmall för ett dokument. När man vill omformorma all text i ett dokument skriver man STYLE-kommandot i HEAD.

Mäket <STYLE> kan ha tre attribut: TYPE, MEDIA och TITLE.

Exempel:

<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
 H2 { color: blue; font-family: verdana }
 P { margin-left: 1cm; font-family: arial }
</STYLE>
</HEAD>
<BODY>
<H2>Ett exempel på märket STYLE</H2>
<P>Det här är ett exempel på en formatmall där alla rubriker av
typen H2 får teckensnittet Verdana med blå färg. Vidare får alla stycken
ett indrag på 1 centimeter och texten får teckensnittet Arial.</P>
</BODY>
</HTML>

Så här ser det ut i webläsaren:

Ett exempel på märket STYLE

Det här är ett exempel på en formatmall där alla rubriker av typen H2 får teckensnittet Verdana med blå färg. Vidare får alla stycken ett indrag på 1 centimeter och texten får teckensnittet Arial.

TYPE

För att ange vilket språk man använder i formatmallen använder man attributet TYPE. Om mallarna är skrivna i CSS ska attributet ha värdet text/css. Eftersom CSS är det förvalda mallspråket hos webbläsaren, behöver man inte ange TYPE om man inte använder flera mallspråk.

MEDIA

Om man vill ha olika formatmallar för olika typer av presentation, kan man göra en mall för visning på skärmen och en annan för utskrifter. Attributet kan ha följande värden:

screen	avsett för visning på vanlig bildskärm
print	avsett för utskrifter
aural	avsett för talsyntes. Det syntetiska talet är användbart för synskadade, men även för seende kan det vara en fördel att låta datorn läsa upp långa texter och samtidigt få en chans att vila ögonen.
braille	avsett för punktskrift. Synskadade har hjälpav både skrivare och speciella punktdisplayer.
tty	avsett för utskrift på enheter med fast teckenbredd, exempelvis gamla teletype-terminaler och små handdatorer.
handheld	avsett för handatorer. Dessa har oftast en liten, svartvit skärm.
tv	avsett för visning på tv. Jämfört med bildskärmar har tv-apparater ganska låg upplösning och användarna kan vanligtvis inte rulla texten. Nuförtiden finns det "webbdatorer" som kan kopplas till tv:n och som innehåller en webbläsare.
projection	avsett för projektorer.
all	lämpligt för alla enheter.

Här nedan följer ett exempel på hur man kan använda olika mallar för skärm och utskrift:

<HTML>
<HEAD>
<TITLE>Olika mallar</TITLE>
<STYLE MEDIA="screen">
 P { text-transform: uppercase; font-family: arial }
</STYLE>
<STYLE MEDIA="print">
 P { text-align=justify; font-family: times; margin-left=4cm;
     margin-right=4cm }
</STYLE>
</HEAD>
<BODY>
<P>På skärmen visas texten i stycket vänsterjusterat med versaler
och med teckensnittet Arial. Vid utskrifter visas texten med raka
marginaler, blandade versaler och gemener, teckensnittet Times new
roman och med ett 4cm indrag i vänster- och högerkanten.</P>
</BODY>
</HTML>

Så här ser det ut på skärmen:

På skärmen visas texten i stycket vänsterjusterat med versaler och med teckensnittet Arial. Vid utskrifter visas texten med raka marginaler, blandade versaler och gemener, teckensnittet Times new roman och med ett 4cm indrag i vänster- och högerkanten.

Så här ser det ut i utskrift:

TITLE

Med detta attribut kan man ge mallen ett namn. Det ska vara möjligt att ha olika mallar för samma medium i ett dokument och användaren ska sen kunna välja vilken mall man vill använda när man ska läsa dokumentet. Man ska exempelvis kunna ha en mall med ett standardformat och en mall med större tecken för synskadade.

Idag fungerar det dåligt i webbläsarna, så ännu är det inte så användbart. Tanken är i alla fall att TITLE ska vara det namn som användaren får se i listan med mallar.

Länkar till externa formatmallar

En extern stilmall är ett dokument som bara är en stilmall och som inte innehåller någon annan text. Denna fil med stilmallen har filformatet .css. Om man vill att alla dokument ska ha samma layout, kan man med fördel använda sig av externa stilmallar. Man behöver inte skriva alla STYLE-kommandon på varje sida. Om man vill göra en ändring av layouten, ändrar man bara i sitt stylesheet. För att länka till en stilmall använder man märket LINK i sidhuvudet. Detta märke används för att ange kopplingar mellan olika dokument. Man sätter attributet REL till "stylesheet" och attributet HREF till malldokumentets URL.

Exempel:

<HTML>
<HEAD>
<TITLE>Extern stilmall</TITLE>
<LINK REL="stylesheet" HREF="stilmall.css">
</STYLE>
</HEAD>
<BODY>
<P>Det här är ett exempel som visar hur ett dokument
utformas med hjälp av formatmallen i filen stilmall.css.</P>
<P>Styckena har här fått teckensnittet Arial och har
en marginal till vänsterkanten på 1 cm. Vidare så har första
raden i varje stycke ett indrag på 40 pixlar (bildpunkter).
Indraget av första raden styrs av egenskapen text-indent.</P>
<P>Om man ändrar i malldokumentet kommer alla HTML-dokument
som referar till det attt påverkas.</P>
</BODY>
</HTML>

Ett malldokument kan innehålla en eller flera mallar. Här är ett exempel på ett malldokument.

P { text-indent: 40px; font-family: arial; margin-left: 1cm }

Så här ser det ut i webläsaren:

Det här är ett exempel som visar hur ett dokument utformas med hjälp av formatmallen i filen stilmall.css.

Styckena har här fått teckensnittet Arial och har en marginal till vänsterkanten på 1 cm. Vidare så har första raden i varje stycke ett indrag på 40 pixlar (bildpunkter). Indraget av första raden styrs av egenskapen text-indent.

Om man ändrar i malldokumentet kommer alla HTML-dokument som referar till det att påverkas.

Det går bra att ha länkar till flera malldokument från ett och samma HTML-dokument. Man får samma resultat som när man anger flera mallar med märket <STYLE>, det är möjligt att ha olika dokument för skärm- och utskriftsmallar. Man kan ge användaren möjlighet att välja mellan olika mallar. Den förvalda mallen anges precis som föregående exempel och för de andra mallarna sätts attributet REL till "alternate stylesheet". Man kan ge de olika mallarna en titel genom att använda attributet TITLE.

Exempel:

<HTML>
<HEAD>
<TITLE>Alternativ stilmall</TITLE>
<LINK REL="stylesheet"
 HREF="stilmall.css" TITLE="standard">
<LINK REL="alternate stylesheet"
 HREF="stortext.css" TITLE="Stor text">
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.