Stilmallar använder man för att få bättre kontroll över sina HTML-sidor (layout). När man använder HTML-taggar, t ex:
H1, EM och P, talar man bara om att det skall vara en rubrik, en förstärkning eller ett nytt stycke.
Med en stilmall kan man definera sådant som typesnitt, tecken storlek, mellanrum mellan bokstäverna och orden
samt man kan skapa egna egenskaper för ord eller stycken som man sedan anropar via sin stilmall.
Den stylesheet-version som används idag kallas CSS2 eller Stylesheet nivå 2, blev standad 12 Maj 1998. Den tidigare versionen kallasdes CSS1, antogs den 17 December 1996. Båda versionerna utarbetades och bestämdes av THe Word Wide Web Consortion. Någon ny version lär nog inte komma eftersom man i framtiden kommer att byta standad från HTML till XML.
Ett exempel:
<FONT FACE="Arial, Geneva, Helvetica" SIZE="24pt" COLOR="#008000">Ser ut så här</FONT>
Ser ut så här
<FONT FACE="Arial, Geneva, Helvetica" SIZE="24pt" COLOR="#008000"
STYLE="Font-family: Arial, Geneva, sans-serif; Font-size: 24pt; Color: #008000; Font-weight: medium"
>Ser ut så här</FONT>
<META http-equiv="Content-Style-Type" content="text/css"> <STYLE TYPE="text/css" TITLE="Bright Colours">Förklaring: Det som skrivs mellan BODY-taggarna kommer att få vit färg.
<!-- BODY { color : white} P { color : blue; font-size : 12pt; font-family : Arial,sans-serif} H1 { color : red; font-size : 18pt} //--> </STYLE>
Mellan P-taggarna kommer att bli färg blå, teckenstorlek 12 och typesnitt Arial.
H1-taggarna färg röd och teckenstorlek 18.
META-taggen används för att Browsen skall förstå vilket Style Sheet 'språk' som används.
TYPE egenskapen används för att specifiera MIME (Internet media), vilka egenskaper 'stilmallen' skall ha.
I detta fall är den av typen ("text/css").
TITLE egenskapen definerar namnet på 'stilmallen', används av browsen om det finns möjlighet att välja 'stilmall'.
Man använder semikolon för att separera attributen från varandra, om man definerar mer en typsnitt så separeras dessa med komma.
Ett exempel på en stilmall som tar bort understrykningar på alla länkar i dokumentet. Skall även detta ligga mellan HEAD-taggarna för att gälla för hela dokumentet.
<STYLE TYPE="text/css">
<!--
a {Text-decoration:none}
//-->
</STYLE>
Länk utan understrykning till toppen på sidan
Några fler värden till Text-decoration: attributet.
Är samma sak som att skriva:
BODY ;H1 { font: 12pt Arial}
Man kan även ändra flera attribut i en och samma definering.
H1 { font: 12pt Arial}
H1 { color: blue}
Är samma som att skriva:
H1 { font: 12pt Ariel; color: blue}
Man skiljer på deklarationerna åt med semikolon och mellanslag.
Element_{_;egenskap/attribut:_värde;_egenskap/attribut:_värde} ...också vidare, de sista attributet som defineras behövs inte avslutas med semikolon.
Understrykning står för ett mellanslag.
Det går även bra att lägga till kommentarer i en stilmall, med /* och */
Längre ord så som te x: "Time New Roman" måste omges med citationstecken (").
Citationstecken används inte runt keywords (nyckelord), eftersom nyckelord inte skiljs åt.
Vad som är nyckelord eller inte lär man sig efter att ha pillat med stilmallar ett tag.
Som vanligt skall detta ligga mellan HEAD-taggarna.
<STYLE TYPE="text/css">
<!--
.rodlink { font-weight: bold;
text-decoration:none;
color:#FF0000
}
.gronlink {
font-weight: bold;
text-decoration:overline;
color:#009900
}
//-->
</STYLE>För att sedan anropa dessa stilar använder jag mig av attributet CLASS, det kan göras i vilken container-tag som helst (HTML kod som har en start och slut tag)<FONT>-taggen, <TABLE>-taggen, <DIV>-taggen , <P>-taggen eller som i mitt fall i <A>-taggen.
<A HREF="kurs1.html"CLASS="gronlink" TARGET="_top">Tillbaka till startsidan</A> | <A HREF="#top" CLASS="rodlink">Tillbaka till toppen</A>
Tillbaka till startsidan | Tillbaka till toppen
Skapa en text-fil och skriv in dina definitioner, t ex använd några av de som vi har gått igenom i föregående exempel eller hitta på nya stylesheets.
<HTML>
<STYLE TYPE="text/css">
<!--
H1 {
font-family : Comic Sans MS;
font-size: 24;
color : Blue;
font-style : normal;
text-align : center;
}
H2 {
font-family : Comic Sans MS;
font-size: 18;
color : Blue;
font-style : normal;
text-align : center;
}
font {Font-size:10;
Font-weight:medium;
Color:#000000;
Font-family:Geneva, Arial, Helvetica, sans-serif;
}
a {Text-decoration:none;
Color:#009900;
}
.rodlink { font-weight: bold;
text-decoration:none;
color:#FF0000
}
.gronlink {
font-weight: bold;
text-decoration:overline;
color:#009900
}
//-->
</STYLE>Spara sedan filen med ett namn och med filändelsen css ( t ex min_egen.css). Nu är det bara att länka in .css-filen till de websidor som du vill applicera stilmallen på genom att i <HEAD> delen på sidorna skriva in:
<HEAD>
<LINK REL=STYLESHEET HREF="min_egen.css" TYPE="text/css">
</HEAD>
LINK betyder att man 'länka till'
REL står för 'relation, Browsen förbereder sig för att man kommer att länka till, i detta fallet till en STYLESHEET.
TYPE talar om vilket språk man kommer att använda sig av iden externa filen, (finns förnärvarande bra ett alternativ ) .css
Man kan ge Stylesheeten olika prioritet
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" TITLE="stilmallens_namn.css" HREF="stilmallens_namn.css">
<STYLE TYPE="text/css">
@import nr1 (URL för stilmallen)
@import nr2 (URL för stilmallen)
och så vidare till alla stylesheet som skall importeras.
</STYLE>
</HEAD>
Mer attribut till stylesheet
Copyright © Anders
Blomgren 1998, All rights reserved.
hnab@swipnet.se
Sitens URL: http://home.swipnet.se/anders_blomgren