|
Administreres af: |
| Stylesheet | Tilbage til oversigtstabel Tilbage |
Testkørsel: PC, Windows 98DK
Af: novicen.dk
Forud for - eller sideløbende med - arbejdet med styles bør du som minimum have eller opnå kendskab til og fortrolighed med opsætning af HTML kildekoder.
| Tekstformatering og linier |
| Til top |
Anvendelse af stylesheet - typografiark - er en metode til at formatere et web-sted på en mere hensigtsmæssig måde, end ved brug af den traditionelle opsætning af FONT's face, FONT's size, bgcolor, og andre layout og formaterings-TAG's og attributter.
Ved brug af stylesheet er det eksempelvis muligt at bestemme, at alle <P> TAG's - afsnitsformateringer - skal være i arial og størrelse 12px. Opsætningen kan foretages centralt og dermed have indvirkning på samtlige angivelser af <P> TAG's for et komplet web-sted. Hvis formateringen - i forbindelse med udviklingen af web-stedet eller senere - skal ændres, kan ændringerne foretages alene i det centrale stylesheet dokument og ændringerne vil herefter få effekt på samtlige sider, der formateres i henhold til betingelserne opsat i dette stylesheet.
Der opbygges et stylesheet dokument for hele webstedet. Alle HTML-enkeltsider tilknyttes derefter dette ene stylesheet og vil hermed blive formateret i henhold til de betingelser, som er opsat i stylesheet'et.
Det er muligt at angive en hvilken som helst TAG i det opsatte stylesheet og dermed muligt at styre den totale fremtræden for et web-sted på denne måde.
Formateringen er anderledes for de angivne styles, end for den traditionelle formatering idet alle styles - med nogle enkelte undtagelser - skal angives som: parameter : formatering ; Der skal mellem den parameter som skal formateres og den formatering som skal angives, være et kolon. Efter formateringsangivelsen skal der være et semikolon. Til gengæld kan der opsættes en alenlang række af formateringer, der kan have effekt på den pågældende TAG.
font-size:12px; font-family:'arial','courier','sans-serif'; color:#FF00FF;
...er et eksempel på opsætning af en gyldig style. Der kan være indsat mellemrum før og efter kolon, før og efter komma samt før og efter semikolon. Andre steder tillades mellemrum ikke.
Det skal forud for den opsatte style være angivet, hvilken TAG den pågældende style skal påvirke. Efter TAG'en skal der være et sæt krøllede paranteser, hvor imellem den ønskede style skal angives:
p { font-size:12px; font-family:'arial','courier','sans-serif'; color:#FF00FF; }
Om TAG'en er skrevet med store eller små bogstaver, gør ingen forskel. Begge dele vil virke.
Hvis du skal anvende styles på tekstområder eller baggrunde, kan du kun anvende TAG's som naturligt har en afslutning - P, BODY, TD... - men ikke på TAG's om står alene - IMG, HR, BR... På enkeltstående TAG's vil du højest kunne ændre på fremtoningen af selve det element, som stylen er indsat på.
| Til top |
Indsætning af eksterne stylesheet
Hvis der skal anvendes stylesheet til at formatere et web-sted kan dette med fordel ske ved, at der oprettes en separat fil, hvori alle de overordnede styles er angivet. En sådan fil skal som fil-efternavn hedde .css. Filens egentlige navn skal overholde de betingelser, der iøvrigt kendetegner brug af filer til web. Selvstændige filer til at opsætte styles kaldes for eksterne stylesheet.
Der skal ikke i stylesheet filen være andet end de styles, som skal anvendes. Der skal ikke være nogen former for HTML eller andre typer kode. Du skal altså starte med en helt tom tekst-fil, som kunne være oprettet i Notesblok eller en anden tilsvarende teksteditor. Kodeopsætningen kan være angivet som ovenfor beskrevet eller de enkelte formateringer kan være indsat på hver deres linie:
body { color:#FF00FF;}
p { font-size:12px; font-family:'arial','sans-serif';}
td {font-size:12px;font-family:'arial','sans-serif';background-color:#FF55FF;}
Eller:
body {
color:#FF00FF;
}
p {
font-size:12px;
font-family:'arial','sans-serif';
}
td {
font-size:12px;
font-family:'arial','sans-serif';
background-color:#FF55FF;
}
Hvert enkelt af de HTML dokumenter, som skal rette sig efter de styles, der er angivet i det opsatte stylesheet skal - med en indlænkning - have at vide, at der findes et stylesheet. Indlænkningen sker ved at der i HTML-kodens HEAD sektion indsættes en LINK TAG der angiver typen af den indsatte link og hvilken kilde oplysningerne skal trækkes fra. Vi kunne have gemt ovenstående styles i en fil, der relativt til den fil vi arbejder i, er placeret i en parallelmappe til vores HTML dokument. Vi skal altså bevæge os et niveau tilbage i mappestrukturen og ind i mappen med vores stylesheet, hvor vi skal have fat i stylesheet filen. Mappen kunne hedde styles/ og filen kunne hedde allstyles.css. Indlænkningen bliver herefter:
<HEAD> : : <LINK rel="stylesheet" type="text/css" href="../styles/allstyles.css"> </HEAD>
Ingen af de angivne attributter kan undværes.
Eksterne styles har præference fremfor standard HTML formatering.
| Til top |
Interne stylesheet kan anvendes til at lave særlige formateringer internt i netop det dokument, hvor de indsættes. Formateringen er af eksakt samme form som anvendt til eksterne styles og kodestrukturen bliver derfor som denne. Forskellen bliver måden de opsatte styles indsættes på, hvor vi for de interne styles indsætter koden direkte i HTML filens HEAD sektion.
<HEAD>
:
:
<STYLE type="text/css">
body { color:#FF00FF;}
p { font-size:12px; font-family:'arial','sans-serif';}
td {font-size:12px;font-family:'arial','sans-serif';background-color:#FF55FF;}
</STYLE>
</HEAD>
Eller:
<HEAD>
:
:
<STYLE type="text/css">
body {
color:#FF00FF;
}
p {
font-size:12px;
font-family:'arial','sans-serif';
}
td {
font-size:12px;
font-family:'arial','sans-serif';
background-color:#FF55FF;
}
</STYLE>
</HEAD>
Interne styles har præference fremfor eksterne styles og vil kun kunne anvendes i netop det dokument, hvor de er indsat.
| Til top |
Hvis du har et element eller et område på din HTML-side, der skal formateres helt konkret og anderledes end angivet i andre styles, kan du indsætte en in-line style direkte på den TAG du vil påvirke. Indsætningen er her lidt anderledes end for interne hhv. eksterne styles men formateringen er den samme.
In-line styles indsættes direkte på TAG'en med en ekstra attribut som hedder STYLE=".." Et specifikt afsnit der skal have sin helt egen formatering kan derfor se således ud:
<P STYLE=" font-size:12px; font-family:'arial','sans-serif'; color:#FF00FF;">
Formateringen vil altså kun påvirke netop dette afsnit og ikke andre. Der vil heller ikke kunne linkes til den her indsatte style fra andre områder i samme dokument eller fra andre dokumenter.
In-line styles har præference fremfor interne styles og vil kun kunne anvendes på netop den TAG, hvor de er indsat.
| Til top |
Særlige TAG's og andre forhold
CLASS
Det er muligt at oprette klasser, hvortil du kan knytte flere forskellige TAG's og områder i dit HTML dokument. Klasser oprettes som en class og kan kun defineres i interne eller eksterne styles men kan anvendes - tilknyttes - fra alle områder, som det pågældende stylesheet dækker. Oprettelse af class'es sker på samme måde som ved oprettelse af formatering af TAG's men hvor der som navn angives class-navnet indsat med et forudgående punktum.
Eksempelvis kan du oprette en klasse med navnet "doktekst" som du kan referere til i alle tilfælde, hvor din tekst skal formateres som speciel brødtekst. Denne class kan du så referere til andre steder fra:
<HEAD>
:
<STYLE type="text/css">
body { color: #FF00FF; }
.doktekst { font-size:12px; font-family:'arial','sans-serif'; }
</STYLE>
</HEAD>
<BODY>
Her er en brødtekst formateret efter retningsliner i "body".
<P class="doktekst">
Denne tekst er formateret efter retningsliner i ".doktest" og
overtager samtidig - underordnet - formateringen fra "body"
<P>
Denne tekst er opsat som standard og ikke formateret med styles.
Dog overtager den formateringen fra "body" pga. nedarvning.
</BODY>
SPAN
Hvis du midt i et større tekstafsnit - eller på andre områder - skal have formateret et større eller mindre afsnit og har du ikke en standard TAG som netop dækker dette område, kan du anvende det særlige TAG <SPAN...> ...</SPAN>. Med SPAN TAG'et kan du indsætte særskilte formateringer, der kun dækker mellem de indsatte SPAN koder uden at der iøvrigt forekommer formatering eller ombrydning af det område, som du vil formatere.
Sidste ord i denne tekst er helt <SPAN STYLE=" color:#FF0000;">rødt :-)</SPAN>.
DIV
Med den særlige <DIV ...>...</DIV> TAG er det muligt at positionere de elementer, som er indsat i DIV koden - du kan flytte rundt med området. Du kan med denne TAG rent faktisk placere to billeder helt eller delvist ovenpå hinanden eller lægge indholdet af en tabel ovenpå et billede.
DIV TAG'en kan positioneres enten absolut i forhold til HTML dokumentets øverste venstre hjørne eller relativt til den position, hvor koden indsættes. Navngivningen af DIV TAG's sker med attributten ID og denne skal være entydig indenfor hvert dokument - der må kun være én med samme navn. DIV kan formateres med styles på tilsvarende måde som class'es men der skal forud for ID navnet være indsat et # tegn.
Den direkte kodning kunne være:
<DIV ID="billedelag1" STYLE=" position:absolute; top:10px; left:150px;"> <IMG .... billedattributter .... ></DIV>
Angivelsen position:absolute; skal angives for at top og left parametrene får effekt. De angivne værdier på 10px hhv. 150px er den luft - angivet i pixel - som bliver ovenover (top) og til venstre for (left) DIV TAG'en. Du kan styre dybden af den enkelte DIV TAG med stylen z-index, der angives med heltal større end eller lig med nul.
Fra interne eller eksterne style's bliver kodningen som angivet herunder og det er i dette tilfælde ikke nødvendigt at angive STYLE="..." i selve DIV TAG'en men det er nødvendigt at indsætte ID="...", da det er denne attribut, som genkendes.
#billedlag1 { position:absolute; top:10px; left:150px; z-index: 10;}
| Til top |
Du skal være opmærksom på at det ikke er alle styles, som er indbygget i de nuværende browsere (version 4.x, 5.x og 6.x - selvom de bliver bedre :-) og at du derfor ikke med sikkerhed kan få alt til at virke. Styles som virker er typisk de specifikke styles til tekstformatering og styles som ikke nødvendigvis virker er typisk kantformatering og specielle baggrundsstyles. Du vil altså kunne komme ud for, at de styles du gerne vil anvende ikke har nogen effekt. Det betyder ikke nødvendigvis, at din kodning er forkert. Under alle omstændigheder skal du være meget omhyggelig med opsætningen, når du bruger stylesheet. Et forkert placeret komma, kolon eller semikolon vil kunne resultere i, at du ikke får nogen af dine styles til at virke overhovedet.
Vær opmærksom på, at det i enkelte specielle tilfælde forholder sig således, at hvis du indsætter en style der ikke virker i den pågældende browser, så vil der kunne være en eller flere andre styles, som pludselig heller ikke virker - til trods for, at du tidligere har set deres effekt.
Der kan - på tilsvarende måde som for HTML dokumenter - indsættes kommentarer i stylesheet. Kommentarer indsættes med /*...*/ - altså: /* <-- kommentar starter her - og slutter her --> */ og du kan derfor angive notater til dig selv, som fortæller hvad de enkelte styles er opsat til.
Hvis du vil anvende en style, som findes i en overordnet version - f.eks. font - og samtidig i en mere specifik version - font-family, font-size osv. - så bør du altid anvende den specifikke version, da effekten af den overordnede version kan være forbundet med specielle betingelser før den vil virke.
Vælg så vidt muligt altid formatering til den TAG der ligger tættest på den tekst eller det objekt, som du vil have formateret. I tabeller skal du vælge formatering af TD TAG'en og generelt ikke på TABLE eller TR TAG's.
Formatering af BODY og P TAG's vil ikke have fuldgyldig effekt indenfor en tabel og der bør samtidig opsættes formatering af TD TAG's, såfremt der anvendes tabeller.
Skal du have formateret baggrund på firkantede områder, så anvend tabeller, hvor du formaterer baggrunden i cellen/cellerne.
Oplever du, at den formatering du opsætter ikke virker som du havde tænkt dig, så forsøg at finde en anden måde at opstille dit dokument på, så du kan få det du ønsker dig. Næsten alt er muligt - det er "blot" at finde den rigtige metode.
Hvis dine ændringer i dit stylesheet ikke slår igennem, så vær opmærksom på, om du i dit stylesheet har opsat andre betingelser, som kan have indflydelse på de elementer, du forsøger at påvirke og om du også har valgt den rigtige TAG.
Ved anvendelse af størrelsesangivelser og positionering skal det indsatte tal efterfølges af px, pt eller tilsvarende præcisering. top: 12; vil altså ikke nødvendigvis virke, hvorimod top: 12px; vil virke.
| Til top |
Ud fra erfaringer ved praktisk brug er herunder angivet en model for, hvordan en hjemmeside og det tilhørende stylesheet kan opbygges. De angivne BODY TAG er det område, som vises i browserens vindue.
<body>
<h2>Overskrifter kan formateres med H TAG's efter eget valg</h2>
<p>
Brødtekst kan formateres med afsnitsformateringer...
<h3>Andre overskriter kan formateres med andre H TAG's</h3>
<p>
Mere brødtekst...
<p>
<table>
<tr>
<td>Tekst i tabelcelle...
<p>
Mere tekst i celle...
</td>
</tr>
</table>
<span class="body">Tekst efter tabel</span>
<p>
Brødtekst efter tabel...
<p>
<hr>
<center class="copyright">© Copyright 2001, novicen.dk</center>
</body>
Det tilhørende stylesheet kunne se således ud:
p, td, body, .body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #004433;
}
body {
background-color: #ff9966;
}
.copyright {
font-family: Arial, sans-serif;
font-size: 10px;
color: #004433;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
Det kan anbefales i videst muligt omfang altid at anvende eksterne stylesheet.
| Til top |