Globale linker

CSS

CSS syntax

En CSS-regel, eller regelsett, forteller nettleseren hvordan den skal vise fram spesielle elementer i et HTML-dokument. Et regelsett består av en selektor etterfulgt av en deklarasjonsblokk som kan bestå av en eller flere egenskap/verdi-par.

selektor {egenskap: verdi; egenskap: verdi;}

tagSelektoren er normalt elementet/taggen som du ønsker å definere en stil for, egenskap er egenskapen du ønsker å forandre ved elementet og hver egenskap må ha en verdi. Egenskap og verdi forteller altså nettleseren hvordan elementet skal vises fram. Egenskap og verdi er skilt med et kolon ( : ) og omsluttet av krøllparenteser ( { }):

body {color: black}

Hvis verdien består av flere ord omsluttes verdien av anførselstegn:

p {font-family: "Times New Roman"}

Om du ønsker å spesifisere mer enn en egenskap for et element, adskilles disse med semi-kolon ( ; ):

p {text-align: center; color: black; font-family: arial;}

For å gjøre stildefinisjonen mer leservennlig kan du beskrive hver egenskap på hver sin linje:

p {
text-align: center;
color: black;
font-family: arial;
}

Gruppering

Gruppering av selectorerDu kan gruppere selektorer. Stilen du angir vil gjelde alle disse. Adskill hver selektor med komma. I eksemplet under har jeg gruppert alle overskrifts-elementene. Hver av overskriftene vil få grønn tekstfarge:

h1, h2, h3, h4, h5, h6 {color: green;}

er det samme som

h1 {color:green;} h2 {color:green;} h3 {color:green;}

osv.....

Class Attributt

Med et class attributt kan du definere forskjellige stiler for samme element. La oss si at du ønsket to forskjellige typer avsnitt i dokumentet ditt, et høyre-justert og et sentrert:

p.right {
text-align: right
} p.center {
text-align: center
}

Så må du bruke class attributtet i HTML-koden:

<p class="right">Dette avsnittet vil bli høyrestilt.</p> <p class="center">Dette avsnittet vil bli sentrert</p> <p><img src="bilde.jpg" class="right" /></p>

Bildet som har fått klassen right vil ikke bli høyrestilt fordi regelen over er laget for p-tagger av klasse right, og ikke noe annet.

Vil du lage en generell klasse (class) gjør du dette ved å skrive punktum etterfulgt av klassenavnet:

.center { text-align: center;}

I koden under har jeg brukt den samme klassen i både <h1>-elementet og <p>-elementet. Dette betyr at begge elementene vil oppføre seg i henhold til reglene satt i .center selector'en:

<h1 class="center">Denne overskriften vil bli sentrert</h1> <p class="center">Dette avsnittet vil ogå bli sentrert</p>

Ethvert element på en side kan ha flere klasser, de adskilles bare av mellomrom, eks:

<p class="center red underline">

...vil følge reglene som er laget for klassene center, red og underline.

Prøv å begrense bruken av klasser, og bruk heller innerliggere (se under).

Id Attributtet

IDId attributter må være unikt i HTML-dokumentet. Det kan kun være et element med en gitt id i et dokument. Disse er markert med ID-attributtet i stedet for CLASS-attributtet:

<p id="intro">Dette avsnittet vil bli høyrestilt.</p>

Id attributtet kan defineres på to måter. Enten bare med idnavnet, eller tag og idnavn:

I dette eksemplet vil id attributtet matche elementet med id="intro:"

#intro {
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

I dette eksemplet vil id attributtet kun matche <p>-elementet med id="intro". Dette har høyere relevans og vil bestemme over en generell id-henvisning hvis det skulle være konflikter.

p#intro {
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

Etterkommere (descendant selectors)

Du vil ha tak i noe som ligger inne i en annen tagNoen ganger kan det hende at du vil at et bold <b> element inne i et avsnitt <p>, skal ha et spesielt uttrykk. Med etterkommere kan du adressere elementer som ligger etter andre elementer. Elementene adskilles med mellomrom:

p b {
font-weight: bolder;
color: red
}

Her har vi adressert <b>-tagger som ligger mellom <p>-tagger.

<p>I dette avsnittet skal <b>noe</b> av teksten være uthevet</p>

Ordet «noe» vil vises i fet og rød skrift.

Med etterkommere er det altså mulig å ha forskjellige regler for samme type elementer som ligger innenfor forskjellige beholdere. Et eksempel:

<style type="text/css">
#navigasjonen a {
text-decoration: none;
color: #000;
background-color: #cff;
padding: 5px;
}
#innholdet a {color: #ccc}
</style> <div id="navigasjonen"><a href="noe.htm">Navigasjonslink</a></div> <div id="innholdet"><a href="noeannet.htm">Vanlig tekstlink</a></div>

CSS'en sier at a-tagger som ligger innefor elementet med id navigasjonen skal ha cyan bakgrunnsfarge, ha 5 pixlers indre marg, fjerne understreking og ha grå tekstfarge, mens for a-tagger som ligger innenfor elementet med id innholdet skal tekstfargen settes til grå:

Det er ingen begrensinginger på hvor mange nivåer du vil angi med etterkommere:

div#navigasjon div#subnavigasjon ul li a { regel }

...sier at a tagger som ligger innenfor li-tagger, som ligger innenfor ul-tagger, som ligger innenfor en div-tag med id subnavigasjon, som ligger innenfor en div med id navigasjon skal følge regelen.

Et eksempel på overdreven bruk av klasse som kan løses mer elegeant med etterkommere:

<div class="sidenav">
<h2 class="sideheading">Site navigasjon</h2>
<ul class="sidelist">
<li class="sideitem">Listeelement</li>
<li class="sideitem"><a href="#"><span class="sidelink">Listeelement</span></a></li>
<li class="sideitem">Listeelement</li>
</ul>
</div>

Dette kan løses med én enkelt klasse:

<div class="sidenav">
<h2>Site navigasjon</h2>
<ul>
<li>Listeelement</li>
<li><a href="#">Listeelement</a></li>
<li>Listeelement</li>
</ul>
</div>
-----------------
div.sidenav { blah } /* generell regel for div */
div.sidenav h2 { blah } /* regel for h2 inne i div */
div.sidenav ul { blah } /* regel for ul inne i div */
div.sidenav li { blah } /* regel for li inne i div */
div.sidenav li a { blah } /* regel for a inne i li inne i div */

Barn (child selectors)

En barn-selektor brukes for å velge et element som er et direkte barn av et element (foreldre/parent). Med denne metoden får du tak i barnet, evt. barna, ikke alle innerliggerne. Et eksempel: du vil ha tak i alle <em>-taggen som ligger direkte under en div, ikke andre <em> tagger som f.eks. ligger innfor <p>-tagger:

<div id="eks">
<em>tekst</em>
<p>her er <em>viktig</em> tekst</p>
<em>tekst2</em>
</div> #eks>em {color: #f00} eller:
#eks > em {color: #f00}

...vil resultere i at tekst og tekst2 vil bli rød, mens viktig som er et barn av <p>-taggen ikke vil bli berørt.

Child selectors fungerer ikke i Internet Explorer! Men støttes av de fleste andre.

Universelle selektorer

Hvis du vil lage regler som gjelder for alle elementer kan du bruke * (stjerne),

* {color: #00f;}

...vil gi blå farge på all tekst i dokumentet, og

div#navigasjon * {color: #fff;}

...vil gi hvit tekst for alle elementer som ligger innenfor en div med id navigasjon.

Tilstøtende søskenelementer (adjacent sibling selector)

Med tilstøtende søskenelement menes et element som følger direkte etter et annet:

<body>
<h2>Overskrift 2 tekst</h2>
<h3>Overskrift 3 tekst</h3>
<h3>Overskrift 3 tekst en gang til</h3>
<p>Dette er mer tekst </p>
</body>

Med følgende regel kan vi få tak i alle <h3>-elementer som følger direkte etter <h2>-elementer:

h2 + h3 {color: #f00;}

... vil resultere i at Overskrift 3 tekst vil bli blå (for den følger direkte etter <h2>, mens Overskrift 3 tekst en gang til ikke vil bli berørt.

NB! Virker ikke i Internet Explorer

Attributt selektorer

Alle HTML-elementer kan ha attributter, og disse attributtene har som regel en verdi (i XHTML skal de alltid ha en verdi).

Attributtselektorer brukes for å velge elementer basert på deres attributter og attributtverdier. For eksempel, du vil ha tak i et eller flere bilder på en side som har src="bilde.gif". Dette kan gjøres med regelen under:

img[src="bilde.gif"] { border: 1px solid #000; }

Det finnes fire forskjellige attributtselektorer:

Basert på attributt. Elementet/elementen må ha attributtet. F.eks:

img[title] { border: 1px solid #000; }*
img[width] { border: 1px solid #000; }**
img[alt] { border: 1px solid #000; } ***

* vil velge alle bilder med attributtet title
** vil velge alle bilder med attributtet width
*** vil velge alle bilder med attributtet alt

Basert på verdi. Elementet/elementene må ha attributtverdien som er angitt. I eksempelet under velges alle bilder hvis src-attributt har verdien "small.gif"

img[src="small.gif"] { border: 1px solid #000; }

Basert på mellomromsadskilte verdier. Elementet/elementene må ha en attributtverdi som tilsvarer det som er angitt. I eksempelet under velges alle bilder hvis alt-attributt inneholder en mellomromsseparert liste med ord, som inneholder ordet "liten".

img[alt~="liten"] { border: 1px solid #000; }

Basert på bindestreksadskilte verdier. Elementet/elementene må ha en attributtverdi som tilsvarer det som er angitt. I eksepmelet under velges alle bilder hvis attributt (alt i dette tilfellet) har en bindestreksadskilt liste med det angitte ordet, i dette tilfellet ordet "stor-".

img[title|="stor"] { border: 1px solid #000; }

Attributtselektorer er ikke støttet av Internet Explorer 5, 5.5 eller 6. Heller ikke støttet av tidlige versjoner av Opera.

Pseudo-klasser

Det finnes noen spesielle versjoner av selektoren som kan brukes der hvor vi ikke kan få tak i elementet basert på tag. De inkluderer:

Linker kan altså stilsettes basert på tilstand.

På grunn av presedens, vil selektorer som opptrer sist i stilarket bli brukt dersom det er konflikt. Derfor må linkpseudoklasser brukes i denne rekkefølgen i stilarket:

a {}
a:link {}
a:visited {}
a:hover {}
a:active {}

* støttes ikke av Internet Explorer.

For en komplett liste over hvilken nettleser som støtter hva gå til: http://www.richinstyle.com/bugs/table.html

 

CSS Comments

KommentarerDu kan sette inn kommentarer i CSS, f.eks. som en forklaring på hva du har tenkt og hvorfor du har gjort visse formatteringer. En kommentar ignoreres av browseren. En kommentar begynner med /* og avsluttes med */:

/* Dette er en kommentar*/
p {
text-align: center;
/* Dette er også en kommentar*/
color: black;
font-family: arial}
}

Neste sideGå til neste side hvor vi ser på hvordan vi bruker CSS inn i en side.