CSS
CSS
Børre Stenseth

Pseudo klasser

Hva

Her forsøker vi å sette opp et stilsett som fremhever en struktur i et dokument. Menyen og funksjonaliteten er ikke vektlagt.

Stilsett

/* wrapping the structured section */
div.example{margin:20px 20px 20px 20px; 
           padding: 10px 10px 10px 10px; 
           border:1px solid gray; box-shadow: 5px 5px 5px #888888; 
           counter-reset:kap}
/* structure */
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:-20px; vertical-align: center}
/* the meny */
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
[1]
Referanser
  1. CSS (Cascading Style Sheets) W3C www.w3.org/TR/CSS/ 08-03-2014