Institutt for informatikk og matematiske fag

Kurs 850 Internett og intranett

Stiler

[Litteratur: Webteknikk: Kap. 10.]

Hva menes med Html-stiler?

Html-stiler (eng.: styles) er ett eller flere sett av stilregler knyttet til elementene i et html-dokument. Reglene influerer på hvordan elementene vil bli formattert eller presentert i nettleseren.

Jeg har brukt stilregler på dette dokumentet! Eksempelvis settes fargen på H2-elementene vha. en stilregel i et stilark.

Her skal vi se på Html-stiler av typen CSS (Cascading Style Sheet), men Html-stiler kan også realiseres vha. Javascript (Javascript Style Sheets).

Stiler kan brukes på et dokument på 3 måter, se nedenfor.

FrontPage har støtte for stilregler, dvs. du kan utvikle stilregler i FrontPage. (Dette demonstreres i forelesningen.)

Forskjellige måter å bruke stiler på

Bruk av eksternt stilark (style sheet)

Stilarket er en tekstfil som inneholder stilreglene. Stilarket skal ha filnavn *.css.

Stilarket linkes inn i html-dokumentet vha. et LINK-element lagt inn i dokumentets HEAD-element, slik:

<HEAD>
<LINK HREF="stilark1.css" REL="stylesheet">
...
</HEAD>

Selve stilarket kan eksempelvis se slik ut:


H1 {text-align:center; font-family:arial; color: green}
H2 {text-align:center; font-family:arial; color: red}

Terminologi:

  • ''text-align:center; font-family:arial; color:green'' er stilregelen (eng.: rule).
  • ''text-align:center'' er (et eksempel på) en stildeklarasjon (eng.: declaration) i ovennevnte stilregel.
  • ''text-align'' er et eksempel på egenskap (eng.: property).
  • ''center'' er en tilhørende verdi (eng.: value).

Dokumentvise stilregler samlet i et STYLE-element i HEAD-elementet

Dokumentvise stilregler gjelder for alle forekomster av samme type element i hele det aktuelle dokumentet, men ikke i andre dokumenter.

Eksempel:

<HEAD>
<STYLE TYPE=''text/css''>
H1 {text-align:center; font-family:arial; color: green}
H2 {text-align:center; font-family:arial; color: red}
</STYLE>
</HEAD>

Elementvis stilregel

Elementvise stilregler er den mest ''lokale'' eller direkte måten å gjøre det på, siden stilregelen da gjelder bare for dette elementet, og ikke for andre elementer i dokumentet.

Det er to måter å bruke elementvise stilregler på:

Ved å gi det aktuelle elementet attributten STYLE

Eksempel:

<H1 STYLE="text-align:center; font-family:arial; color: green">Overskrift (sentrert, arial, grønn)</H1>

Ved å gi det aktuelle elementet attributten CLASS

CLASS-attributtens verdi skal være navnet på stilklassen som skal være definert i STYLE-elementet i HEAD-elementet eller i et eksternt stilark:

Eksempel:

<P CLASS="bakgrunnsfarge">Bla bla.</P>

Stilklassen forutsettes å være definert liknende dette (merk punktum foran):

.bakgrunnsfarge {background-color:#00FFFF}

Du kan anvende en gitt stilklasse på mange ulike typer elementer i Html-dokumentet, f.eks. tabeller, overskrifter, m.m.

[Kursets hjemmeside] [Framdriftsplanen]
Oppdatert 12.9.01 av Finn Haugen (e-post: Finn.Haugen@hit.no)