Tilbake til startsida IKT i praksis. Stilark


Noen faste reglar

Som i alle språk, er det også i CSS nødvendig med reglar for skrivemåtar (syntaks).  Dei er heldigvis nokså enkle i CSS, men svært viktige likevel. Skriv du feil, t.d. at du bruker komma der det skulle vere semikolon, kan dette føre til at kommandoen blir ignorert eller kanskje gir heilt andre resultat enn det du hadde planlagt.

 

Selektorar

Alle html-elementa, som <p>, <dim>, <table> osv, kan brukast som selektor. Ein selektor er rett og slett det html-elementet som skal omdefinerast. I uttrykket p {text-indent: 2em } er det såleis p som er selektoren.

Deklarasjonar

Deklarasjonane definerer eigenskapane selektoren skal ha. I uttrykket p {text-indent: 2em } er deklarasjonen det som står inne i klammeparentesen. Den første delen fortel kva eigenskap («property») som skal definerast, her text-indent (tekstinnrykk). Etter kolonet kjem verdien eigenskapen skal ha. I dette tilfellet verdien 2em. («em» er ei måleeining. 2em betyr at innrykket skal vere 2 gonger vanleg bokstavbreidde).

Mønsteret er altså:

selektor {eigenskap : verdi }

Det er råd å definere fleire eigenskapar i same deklarasjonen dersom ein skil dei med semikolon:

selektor {eigenskap-1 : verdi ; eigenskap-2 : verdi }

Feilskriving

Skriv du feil, t.d. ein ugyldig verdi eller ein eigenskap som ikkje finst, vil nettlesaren ignorere heile linja som feilen er i.

Stilarket

h1 {color: violett; font-style: 12px}   /* Fargen «violett» er ikkje definert i CSS */
div {color: black; font-style: normal}  /* Korrekt CSS */
p {color: red; font-stile: bold}        /* skrivefeil for «font-style» */

vil i nettlesaren bli oppfatta som

div {color: black; font-style: normal} /* Korrekt CSS */

Linjene med feil i blir ikkje lesne.

 

Klasse

Du kan også definere ulike stilar for det same elementet ved å bruke «class». Ein klasseselektor kan vere kva som helst og kan heite kva som helst så lenge du held deg til dei engelske bokstavane og ikkje blandar inn mellomrom eller understrek. At eit element er klasseselektor blir markert med eit punktum (.) framføre. I definisjonen av den generelle stilen

.kode {font-family : "Courier New", monospace;font-size : 0.9em;}

er det .kode som er klasseselektoren. Inne i html-dokumentet kan eg så knytte denne klassen til kva for element som helst.

<p class="kode">Dette er kode</p>
<span class="kode">Dette er også kode<(span>

Legg merke til at klassenamnet i html-koden blir skrive utan punktumet framføre.

Du kan også tilordna ein klasse til eit spesielt html-element:

p.utheva {font-weight : bold;}
p.raud {color: red }

I html blir dette skrive

<p>Dette er normal skrift</p>

<p class="utheva">Dette er utheva skrift</p>

<p class="raud">Dette er raud skrift</p>

<p class="utheva raud">Og dette er raud, utheva skrift</p>

Du kan altså bruke fleire klassar i same elementet, bare du hugsar på å skille dei med mellomrom og ikkje noe anna teikn. Desse to klassane høyrer bare til p-elementet. Prøver du å skrive det inn i andre element, verkar det ikkje. <div class="utheva">Dette gir ikkje utheva skrift</div>.

 

Fletta selektor

p/* generell p selektor */
{
color:navy
text-align:center
}
.viktig {background-color:silver;} /* generell class */

.viktig p {color: red; font-weight: bold}   /* ".viktig" fletta i p */

Her er alle <p>-taggane definerte til å ha blå (navy), sentrert skrift.

Klassen .viktig er ein universalklasse som kan brukast inne i  alle html-taggane (<div class="viktig">, <span class="viktig"> osv.) og vil gi sølvgrå bakgrunn.

Dersom ein p-tagg blir brukt inne i ein class="viktig" vil teksten inne i p-taggen bli raud (red) og utheva (bold) sidan dette er definert slik i  .viktig p {color: red; font-wight: bold}.

Det er verd å merke seg at <p class="viktig"> ikkje vil få raud skrift. <p> må vere inne i ein klasse definert i ein foreldretagg. Bakgrunnen vil derimot bli sølvgrå sidan  .viktig er ein generell klasse som gjeld for alle html-taggane, også p-taggen.

Med stilkoden ovanfor vil html-koden

<p>Dette er normal, marineblå skrift i avsnitt (paragraf).</p>
<div class="viktig">
  <p>Dette er i klassen viktig</p>
</div>
<p class="viktig">Dette blir skrive i normalskrift med grå bakgrunn.</p>

gi denne utskrifta:

Dette er normal, marineblå skrift i avsnitt (paragraf).

Dette er i klassen viktig

Dette blir skrive i normalskrift med grå bakgrunn.

 

Situasjonsbestemte selektorar

Sett at du har definert desse elementa i stilarket:

h5 { color: green }
em { color: green; font-weight: bold }

Når noe skal uthevast med kursiv blir dette koda slik i html:
Dette er ein <em>viktig</em> tekst
som gir utskrifta
Dette er ein viktig tekst.

Men dersom den viktige teksten ligg inne i ein <h5>-tagg vil fargen ikkje skille seg ut frå resten av taggen. Dette ordnar vi med å legge til ein ekstra kommando i stilarket, som nå blir sjåande slik ut:

h5 { color: green }
em { color: green; font-weight: bold }
h5 em {color: blue }

Nå blir setninga sjåande slik ut:

Dette er ein viktig tekst

Når fleire selektorar er skrivne på samelinja med mellomrom mellom, vil eigenskapen som er definert bare gjelde for den selektoren som kjem etter den første når han står inne i den første.

Eit innvikla eksempel

Du kan gjerne nøste vidare på denne tråden, men du må halde tunga rett i munnen. Det er fort gjort å gå i surr i kva tagg som er inne i kva tagg. Noen gonger er det lett å finne ut av, andre gonger kan systemet bli nokså komplisert.

Om du føler for det, kan du sjå nærare på listeeksemplet nedanfor. Du taper ikkje så mykje om du ikkje finn ut av det.

.lister {
background : black;
color : white;
width: 500px
}

.lister ul {
background : blue;
color : white
}

.lister ul ul {
background : red;
color : white
}

.lister ul ul ul{
background : yellow;
color : black
}

HTML-koden som bruker stilarket kan sjå slik ut:

<ul class="lister">
   <li>Tekst i liste 1 ("lister")</li>
     <ul>
       <li>Tekst i liste 2 ("lister ul")</li>
       <ul>
         <li>Tekst i liste 3 ("lister ul ul")</li>
         <ul>
           <li>Tekst i liste 4 ("lister ul ul ul")</li>
         </ul>
       </ul>
       <li>Tekst i liste 2 ("lister ul")</li>
     </ul>
    <li>Tekst i liste 1 ("lister")</li>
 </ul>

og resultatet slik:

  • Tekst i liste 1 ("lister")
    • Tekst i liste 2 ("lister ul")
      • Tekst i liste 3 ("lister ul ul")
        • Tekst i liste 4 ("lister ul ul ul")
    • Tekst i liste 2
  • Tekst i liste 1

I dette tilfellet kanskje ikkje det mest fornuftige oppsettet av lister, men det illustrerer vonleg noe av det som er mogleg. (Menyen i venstremargen blei frå først av laga med html og stilark etter denne oppskrifta. Nå er han i php med mindre behov for innvikla stilark).

 

ID

Dersom ein bestemt definisjon for ein selektor bare skal brukast ein gong, er det vanleg å bruke id i staden for class. Rett nok verkar id sjølv om du bruker det fleire gonger i html-koden, men køyrer du stilarket ditt gjennom eit valideringsprogram, vil du i tilfelle få feilmelding.

Regelen er altså at du bruker CSS id for alle definisjonar som blir brukte ein gong og CSS class for alle definisjonane som blir brukte fleire gonger. Eigentleg kan du la vere å bruke id, men id kan vere greitt for perfeksjonistane som vil ha orden i kodene sine. For eksempel så har denne nettsida to kolonner, denne som teksten er i og den til venstre med menyen. Definisjonane er brukte éi gong på kvar nettside og er difor definerte ved hjelp av ID.

Du definerer id-selektorane på same måte som klasse-selektorane, men erstattar punktumet framføre med # («grind», «hash»). Eksempel:

div#heading {font-weight : bold;}
div#raud {color: red }

<div id="heading">Dette er normal skrift</div>

<div id="heading">Dette er utheva skrift</div>

<div id="raud">Dette er raud skrift</div>

Du kan ikkje ha fleire id-ar i same definisjonen. <div id="raud utheva">verkar ikkje</div>.

Derimot er det heilt i orden å definere ein universell id på same måten som for klasse:

#understreka {text-decoration : underline;}

kan i html brukast i alle elementa akkurat som klasse:

<p id="understreka">Tekst</p>
<div id="understreka">Tekst</div>

Begge vil gi ein understreka tekst.

 

Gruppering

Det er også råd å definere fleire selektorar samstundes. Dette kan vere greitt når mange html-taggar skal ha dei same eigenskapane. Ønskjer du same farge og skrifttype på alle overskriftene, kan du skrive

h1, h2, h3, h4, h5, h6 { color: red; font-family: verdana, sans-serif }

 

Arv

HTML-kodene er gjerne nøsta inne i kvarandre lag på lag. Mønsteret for ei nettside kan vere

<html>
  <head>
  </head>
  <body>
    <h1>Overskrifta</h1>
    <p>Her er ein tekst. Dette er
      <b>utheva</b> og dette er <em>kursiv</em>,
      og dette er både <b><em>utheva og kursiv</em></b>
    </p>
  </body>
</html>

Taggen <html> omsluttar heile dokumentet og er «forelder» til alt mellom <html> og </html>. <body> er «barn» av <html>, men samstundes også forelder til <h1> og <p>. <b> og <em> er barn av <p>.

Normalt vil barna arve eigenskapane til foreldra dersom eigenskapane kan arvast. Såleis vil skriftfarge bestemt i <body> vere gjeldande for alle barna innføre denne taggen. Har du i stilarket definert ein annan farge innføre <p>, vil også barna til <p> få denne fargen.

Skulle du ha definert nye eigenskapar for ein eller annan html-tagg kan det likevel vere situasjonar der du ønskjer at taggen skal arve eigenskapane til foreldra, Dette bestemmer du med verdien inherit. (NB! inherit blir ikkje støtta av alle versjonar av Internet Explorer).

<body style="color: blue; font-size: 1em">
    <p style="color: inherit">Denne teksten blir blå (arv frå body-taggen)</p>
    <div style="color: red">Denne teksten er definert til raud.
      <p style="color: inherit">Også denne teksten blir raud (arv frå div-taggen)</p>
    </div>
</body>

Denne teksten blir blå (arv frå body-taggen)

Denne teksten er definert til raud.

Også denne teksten blir raud (arv frå div-taggen)

(I eksemplet over er det eigentleg ikkje nødvendig å setje verdien til inherit i og med at dette er normalverdien for dei eigenskapane som kan arvast. Derimot ville det vere nødvendig dersom alle p-taggane var definerte til å ha t.d. blå skrift og vi i div-taggen ønskte at p skulle arve fargen frå div).

Noen selektorar kan ikkje arve alle eigenskapane, men rutinen er nokså intuitivt og logisk.  Det ville for eksempel vere dumt at <p> taggen arva toppmargen frå <body>-taggen og såleis plasserte all skrift på toppen av sida.

 

Kommentarar

Kommentarar er merknader som blir sette inn for å lesast av menneske. Dei høyrer ikkje til sjølve stilarket og blir ikkje lese av maskinen. Merknadane blir avgrensa med /* og */

p em {color : Yellow} /* Bruk <i> for "normal" kursiv */

Det kan vere lurt å skrive inn ein del forklarande merknader. Det er ikkje alltid at ein om eit år eller kanskje bare ei veke, hugsar kva bestemte definisjonar blir brukte til. Sjølvsagt er merknadane også viktige dersom stilarket skal brukast eller til og med forandrast av andre.


Send melding

© Innhald og design:  Kolbjørn StuestølStuestøl heimesideSist endra 11. april 2013