CSS-handboka. Plassering av stilarket

Stilarka kan plasserast på ulike stader i systemet vårt. Dei kan vere eksterne, inline eller interne. På denne sida er desse tre måtane (modus) å plassere stilarka forklart. Nedst på sida blir prioriteringane mellom stilarka forklart. Men først ei lita oppfrisking.

Skrivemåte

Mønsteret for alle deklarasjonar er CSS selektor {Property: verdi}. Hugs at «property» er det same som eigenskap. «Verdi» er sjølvsagt den nye verdien denne eigenskapen skal ha. Legg merke til at definisjonen blir sett mellom klammeparentesar. Legg også merke til kolonet etter property. Er du van med html, er det fort gjort å bruke = i staden, noe som altså er feil i CSS.

Dersom eg vil forandre eigenskapane til html-taggen <p>, vil dette sjå slik ut:

Eit eksempel vil gjere dette noe klårare. Skriv inn koden nedanfor som «test.html» (utan hermeteikna). Helst i eit program laga spesielt for å skrive inn koder, men «Notepad++» eller liknande går også svært bra. Dei vanlege tekstbehandlingsprogramma som Word o.l. kan ikkje brukast sidan dei genererer ein haug med ekstra koder.

<html>
<head>
<style type="text/css"> color : blue </style>
</head>
<body>
<p>Denne teksten er blå.</p>
</body>
</html>

Taggen <style type="text/css"> fortel at det som står mellom start- og slutttaggen er stilark skriven i vanleg tekst. Ikkje alle nettlesarane treng å vite type, men det er ein god vane å alltid ta med <style type="text/css"> i taggen.

Du kjenner igjen skrivemåten: p {color: blue }. Selektoren p fortel at den nye definisjonen skal gjelde for html-taggen <p>. Den nye eigenskapen (property) denne taggen skal få, er at all skrift skal bli blå.

Det interne stilarket

Eksemplet viser korleis du kan definere CSS i <html>-taggen øvst i dokumentet ditt. Det er denne måten å definere stilarket på som blir kalla intern. Dette fordi stilarket gjeld bare for dette eine dokumentet og finst internt i headingen.

Det er også råd å definere fleire eigenskapar for same selektoren ved å skilje dei med semikolon (;):

<html>
<head>
<style type="text/css">
color : blue;
background-color: yellow
</style>
</head>
<body>
<p>Denne teksten er blå på gul bakgrunn.</p>
</body>
</html>

Som du ser, er CSS faktisk enklare enn HTML. Kan du amerikansk-engelsk vil du ikkje ha problem med å forstå kva eigenskapar som er forandra og kva nye fargar dei har fått.

Problem?

Får du ikkje det same resultatet i forsøket ditt? Årsaka er truleg ein eller annan skrivefeil. Som alltid innan IKT er det viktig å vere nøyaktig. Kontroller at du ikkje har gløymt semikolonet etter blue eller at du kanskje av gammal vane har skrive = i staden for : etter color eller background-color.

Ekstern CSS

Interne stilark er greitt når du bare har ei side eller to, men kan bli mykje skriving eller kopiering dersom det gjeld mange sider. Meir vanleg er det difor å bruke eksterne stilark. Dette betyr at stilarket blir lagra som ei eige fil med filutvidinga .css. Denne fila blir kalla opp av html-filene som skal bruke dette stilarket. Dei viktigaste fordelane med eksterne stilark er at du kan bruke det same stilarket for å styre utsjånaden på fleire sider. Ønskjer du å forandre noe, er det nok å forandre i stilarket i staden for å måtte forandre på haugevis av nettsider. Ein tilleggsføremun er at det blir mindre tekst å laste ned, slik at nedlastinga av sidene dine gå fortare.

Det er anklast å vise bruken med eit eksempel. For å kunne skrive inn stilarket som ei rein tekstfil må du også her bruke ein tekstbehandlar som ikkje legg inn ein haug med ekstra koder. Skriv inn

body{ background-color: gray;}
p { color: blue; }
h3{ color: yellow; }

Det neste steget er å skrive inn html-koden. Også her må du bruke ein rein tekstbehandlar.

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3>Gul overskrift</h3>
<p>All anna skrift er blå.</p>
<p>Bakgrunnsfargen på sida er grå.</p>
<p>Alt dette blei bestemt av stilarket.</p>
</body>
</html>

Gul overskrift

All anna skrift er blå.
Bakgrunnsfargen på sida er grå.
Alt dette blei bestemt av stilarket.

Kvifor bruke eksterne stilark?

«Inline» stilark

For å gjere oss ferdige med dei tre måtane å legge til stilark på, tar vi også med denne. Inline stilark blir brukte for å setje inn spesielle einskildeffektar i html-koden. Kan hende du har ei einaste side som skal ha kvit overskrift i staden for den gule som blei bestemt i stilarket ovanfor. Dette kan du skrive direkte inn i html-koden for den aktuelle sida på den aktuelle staden slik:

<h3 style="color: white;">Denne overskrifta blir kvit</h3>

<font color="white">Denne overskrifta blir kvit</font>

Også her er det råd å legge fleire eigenskapar (properties) i same setninga. Bare hugs å skilje dei med semikolon. Sidan denne kodinga blir skrive samstundes med html-koden, er det eit vanleg mistak å skrive verdiane i "hermeteikn" slik html-kodane helst skal skrivast. CSS-koden vil i så fall ikkje verke.

<h3 style="color: white; font-family : monospace;">Denne overskrifta blir kvit med same avstand mellom bokstavane</h3>

Prioritering

Kva om du har definert ein html-tagg og seinare omdefinerer den same taggen? Svar. bare den siste definisjonen blir brukt.

Forklaring:

HTML-koden les stilarka i rekkefølgje frå øvst til nedst i etter denne lista:

Det er alltid den siste definisjonen som er gyldig. Det eksterne stilarket definerer <h3> til å gi ei gul skrift brukt i alle sidene. I det interne stilarket er h3 definert til å vere grøn («green»), utheva («bold») skrift. På denne sida vil altså alle h3-taggane bli grøne og utheva. Men i ein inline-defininert h3-tagg er skriftfargen bestem å vere blå («blue»). Sidan det ikkje er sagt noe om font-weight, vil definisjonen i det interne stilarket gjelde også her.

Du har laga ein nettstad der alle sidene bruker stilarket test.css ovanfor. I ei av sidene skal alle overskriftene vere svarte. Du legg difor koden

inn i <head>-taggen på denne sida. Ulempen er at du må gå inn på denne sida dersom du seinare ønskjer å forandra overskriftfargen på sidene dine. Dette gjeld også om du har forandra fargen på ei einaste overskrift ut frå innline-eksemplet ovanfor.

Sidan vi først er inne på prioritering bør det nemnast at dersom du kallar opp fleire stilark i headingen på sida di, vil det stilarket som er lista sist, nedst, ha høgast prioritet av desse. Dette kan du utnytte ved at du lager eit generelt stilark for alle sidene dine og set dette øvst i lista. Stilarka til spesialsidene dine legg du nedanfor hovudstilarket.

Menyen:

Interne stilark