Placering: Enstaka sidor

Inledning
Enstaka taggar
Hela webbplatsen

Definiera stilmallen i HEAD-elementet

Den främsta fördelen med att definiera stilmallen för hela sidan, i stället för att göra det i enstaka taggar, är att det blir mycket enklare att göra ändringar. En annan är att eftersom du inte behöver upprepa definitionen gång på gång, kommer HTML-filen att bli mindre. Det innebär att sidan laddas snabbare.

Ett exempel

Titta på följande HTML-kod:

<HTML>

<HEAD>
<TITLE>Stilmall definierad i HEAD</TITLE>
<STYLE TYPE="text/css">
.rubrik, .mellanrubrik {font-family: arial; color: #000000; background: #FFCCCC; font-weight: bold;}
.rubrik {font-size: 14pt;}
.mellanrubrik {font-size: 12pt;}
.text {font-family: verdana; font-size: 10pt; color: red; margin-left: 10px;}
I B {color: green;}
</STYLE>
</HEAD>

<BODY>
<H4>En odefinierad rubrik</H4>
<P class="rubrik">En rubrik</P>
<P>Vanlig inledande text</P>
<P class="mellanrubrik">En mellanrubrik</P>
<P class="text">Mer text, mer text, mer text ...</P>
<P class="mellanrubrik">En mellanrubrik till</P>
<P class="text">Ännu mer text, <I>ännu mer text</I>, ännu mer text ...</P>
</BODY>

</HTML>

Det här blir resultatet

 

En odefinierad rubrik

En rubrik

Vanlig inledande text

En mellanrubrik

Mer text, mer text, mer text ...

En mellanrubrik till

Ännu mer text, ännu mer text, ännu mer text ...

Snyggt är det inte ...

Dessutom är det skillnad på hur Netscape och Internet Explorer visar den ljusröda bakgrunden till rubrikerna. Men det visar i alla fall principen. All layout finns i HEAD-elementet, där den är lätt att hitta och ändra. Vi använder klasserna .text och .mellanrubrik flera gånger, men behöver bara definiera dem en gång.

Har man en webbplats som består av några få sidor, kan det vara fullt tillräckligt att placera stilmallen direkt på sidorna. Men om webbplatsen börjar bli stor, eller om man vill utnyttja fördelarna med stilmallar fullt ut, gör man i stället en global stilmall som gäller för hela webbplatsen.

Inledning
Enstaka taggar
Hela webbplatsen

©SupportData.Net
www.supportdata.net