!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

CSS
Børre Stenseth
? Browser Support ?
CSS > Eksempler >Eksempel 2

Pseudo klasser

Hva
Pseudo klasser

Stilsett

div.example{margin-left:60px;counter-reset:kap}
h3{counter-reset:underkap;}
h3:before{counter-increment:kap; 
         content: "Kapittel " counter(kap) " "; display:inline}
h4 + p:first-letter{font-size:20px;font-weight:bold;padding-left:20px;color:#990000}
h4:before{counter-increment:underkap; 
         content:counter(kap) "." counter(underkap) " ";}
a:target h3:before{content: url('arrow.jpg') " Kapittel " counter(kap) " "; 
                display:inline; margin-left:-40px; vertical-align: center}
span.meny{width:100px; border-style:solid;border-width:thin;
      margin:5px; background-color:#DCDCDC; text-align:center}
span.meny a{text-decoration:none;}

Et utsnitt fra materialet nedenfor ser slik ut som HTML:

<a id="duften"></a><h3>Duften</h3>
<h4>Epler</h4>
<p>Minner mest om epler og har et lite streif av gjærbakst.</p>
<h4>Aromatisk</h4>
<p>Aromatisk duft av solbærblader, stikkelsbær, nesle og urter....
</p>

Velg i menyen:

Duften Smaken Ettersmaken
Vedlikehold
Børre Stenseth, november 2011
( Velkommen ) CSS > Eksempler >Eksempel 2 ( Eksempel 3 )