Kva er stilark?

Stilarka er tilleggskoder som mellom anna kan forandre normaleigenskapane til html-taggane. I staden for den vanlege blåfargen og understrekinga på lenkene, kan du bruke ein annan farge, med eller utan understreking. Ønskjer du å bruke same skrifttype, skriftfarge og storleik på alle overskriftene på heimesidene dine, kan du definere dette i for eksempel taggen <H5> og bruke denne på alle overskriftene. Angrar du seinare på fargevalet, kan du enkelt forandre dette for alle overskriftene ved å forandre fargen i stilarket.

Stilarket har altså i grunnen to bruksområde: det eine er å omdefinere html-taggane, det andre er å lage felles definisjonar for fleire nettsider.

Dette er ikkje meint å vere eit kurs i bruk av stilark, men ei kort innføring slik at du kan forstå kva eg meiner når eg viser til bruk av stilark i samband med kodinga i php. Søk på Internett på «stylesheet», «stilark» eller liknande. Det finst haugevis av sider som vil lære deg alt om dette emnet.

Eit enkelt stilark

Klikk fram kjeldekoden for denne sida. Nokså høgt oppe finn du oppkallet til stilarket som er i bruk:
<link rel="stylesheet" type="text/css" href="ikt.css">.
Stilarket heiter altså «ikt.css» og er lagra i same mappa som denne sida. Du kan kalle stilarket nesten kva som helst, men etternamnet må alltid vere .css.

Har du lagt merke til at alle sidene i dette området har ein lys grå bakgrunnsfarge? Dette er definert i stilarket ikt.css slik:
body {
  width: 900px;
  margin-left : 4em;
  background-color: #E3E3E3
}
Du kjenner sikkert igjen «body». Dette er det same som <body>-taggen i html-koden. Alt som skal vere synleg på skjermen står mellom <body> og </body>. Kva som skal omdefinerast i body er sett mellom klammeparentesar ({}).

Linja background-color: #E3E3E3 bestemmer bakgrunnsfargen. («#E3E3E3» er hexkoden for fargen lysegrå). Dette er ikkje staden å gå nærare inn på fargekodane. Søk på nettet etter «hex code», «triplet» eller noe liknande. For at sidene skal sjå nokså likt ut på alle nettlesarane og skjermsystem, har eg i tillegg vald å setje breidda til 900 pikslar, width: 900px; i stilarkspråket. I tilleg ønskjer eg ein litt breiare venstremarg enn i normaloppsettet. Dette er gjort med margin-left : 4em;. «em» er ei måleeining brukt i stilark og er normalbreidda for ein bokstav eller mellomrom. 4 em er det same som breidda av fire bokstavar.

Ein liten, men viktig detalj: legg merke til at alle linjene i stilarket untatt den siste sluttar med semikolon (;). Vi kunne ha skrive alle definisjonane på ei linje, og då må definisjonane skiljast på ein eller annan måte, men eg har vald å dele på fleire linjer for å gjere oversynet enklare.

Alle nettsidene som bruker dette stilarket vil nå få ei breidde på 900 pikslar, ein venstremarg tilsvarande 4 mellomrom og lys grå bakgrunnsfarge.

På same måten kan eg omdefinere (nesten) alle html-taggane. Definisjonane vil gjelde for alle sidene som bruker stilarket.

Klasse

Ein annan måte å bruke stilarket på er å definere klassar («class» på stilarkspråket). Dette er omdefineringar som du kan bruke etter behov i fleire ulike html-taggar og samanhengar. Har du lagt merke til at kodeeksempla her på sida blir skrivne i blått og med ein annan skrifttype? Dette er gjort med stilarkdefinisjonen
.kode {
  font-family : "Courier New", monospace;
  font-size : 0.8em;
  color : blue
}
«.kode» er namnet eg har vald på klassen. Legg merke til punktumet framføre. Dette fortel stilarket at det gjeld ein klassedefinisjon. «font-family» er stilarkspråk for skrifttype. Eg har vald skrifttypen «Courier New», men dersom maskinen sida blir vist på ikkje har denne skrifttypen, skal det brukast den skrifttypen som kjem nærast. Difor «monospace». Legg merke til at desse er skilde med komma (,). «0.8em» betyr at skrifta skal visast litt mindre enn normalt. Det er viktig at det ikkje er mellomrom framføre «em». Endeleg er skriftfargen sett til blå med kommandoen color: blue. Som oftast blir fargane definerte i hex-kode, men for noen fargar er det definert fargenamn.

Når eg ønskjer å bruke klassen set eg dette inn i html-koden. Eigentleg kan eg bruke kva html-tagg som helst, men sidan eg her vil ha klassen i vanleg tekst, vel eg taggen <span>. Koden blir då <span class="kode">tekst</span>. Legg merke til at klassenamnet nå er utan punktum framføre seg.

Stil utan eige stilark

Dersom det bare er ei enkelt side du ønskjer å forandre stilen på, er som oftast det enklaste å definere denne stilen direkte på sida. Dette gjer du i headingen til sida ved å skrive inn <style> .kode {color: red;}</style>. Alle stader på den aktuelle sida der det er brukt <span class="kode">tekst</span> vil nå få raud skrift i staden for blå slik det blei definert i stilarket.

Noen gonger er det bare ei enkelt linje som skal omdefinerast. Dette kan då gjerast inne i HTML-taggen som er i bruk likevel: <span class="kode" style="color: green">teksten </span>. Dette vil gi utskrifta teksten.

Som sagt, dette er ei svært kort og ufullstendig innføring med tanke på bruk av stilark saman med php. Får du lista ut stilarket eg har brukt på denne sida, vil du kunne lære litt meir. Eg har skrive kommentarar til definisjonane slik at dei skal vere litt forståelege. Leit på Internett om du treng meir om dette.

For å finne ut meire om stilark, klikk på «avansert» på menyen oppe til venstre på denne sida.

Send melding

Stuestøl heimeside

Sist endra 18. januar 2012