CSS-opas, CSS - Otsikko laskuri

"Laskuri" ja muutakin, counter - content

CSS-ohjeella voidaan lisätä otsikoille numerointi, mutta lisätä esimerkiksi www-sivulla näkyvään linkkitekstiin jälkeen myös tietona www-sivulle näkyville www-osoite. Määrityksiä on kolme ja näille joukko mahdollisia asetuksia.
Taulukossa aihepiiriin liittyvät määritykset:

Määrite Tarkoitus
content Lisätty sisältö, esimerkiksi linkin perään näkyville www-osoite
counter-incrementLaskurin arvon muuttaminen numerolla 1
counter-reset Laskurin nollaaminen


Linkki ja linkin käyttämä www-osoite

CSS-ohjeella voidaan lisätä www-sivulla olevan linkkitekstin eteen (before) tai jälkeen (after) näkymään www-osoite jonne linkistä siirrytään.

Helsingin Sanomat
Utsjoki

Esimerkki koodaukset.
1. CSS-ohje näyttäisi kaikkiin www-sivun linkkitekstien perään www-osoitteen.
2. CSS-ohje ja sen liittäminen id-tunnuksella linkkiin, linkkiteksti näkyvissä vain merkityissä.


  1. CSS-ohje kaikkien linkkien www-osoite näkyville:

  a::after {
    content: " (" attr(href) ")";
  }

 
  1. HTML-koodaus, kaikille linkeille:

  <p>
   <a href="https://www.hs.fi/"> Helsingin Sanomat </a><br>
   <a href="http://www.utsjoki.fi/fi/etusivu.php"> Utsjoki </a>
  </p>
	 

  2. CSS-ohje, id-tunnisteisille linkeille:

  #esille::after {
    content: " (" attr(href) ")";
  }
 
  2. HTML-koodaus, id-tunnisteen liittäminen:

  <p>
   <a id="esille" href="https://www.hs.fi/"> Helsingin Sanomat </a><br>
   <a id="esille" href="http://www.utsjoki.fi/fi/etusivu.php"> Utsjoki </a>
  </p>

Otsikoiden automaattinen numerointi, counter

Taulukon (yllä) määrityksiin liitty joukko astetuksia, joista alla esimerkki otsikoiden numeroinnista.

Otsikoiden eteen voidaan lisätä vakio-teksti, tässä Luku ja laskurin avulla kasvava numero. Esimerkissä on esitetty kaksi tapaa toteuttaa otsikoihin teksti ja numerointi.
1.tapa - muotoillaan kaikki www-sivun h3-otsikot.
2.tapa - valitut otsikot id:n avulla.

Otsikko A

Otsikko B

Otsikko C

Otsikko D

Esimerkin koodaukset


  1. CSS-ohje, kaikille h3-elementeille:

  body {  /* Muuttujalle laskuri arvoksi 0 */
    counter-reset: laskuri;
  }
  h3::before {  /* Muuttujaan laskuri lisäys 1 */
    counter-increment: laskuri;
    content: "Luku " counter(laskuri) ". ";
    color: blue;
  }
 
  1. HTML-koodaus:

     <h3> Otsikko A </h3> 
     <h3> Otsikko B </h3>
	 <h3> Otsikko C </h3>
	 <h3> Otsikko D </h3>
	 

  2. CSS-ohje, kaikille id-tunnisteella merkityille:

  body {  /* Muuttujalle laskuri arvoksi 0 */
    counter-reset: laskuri;
  }
  #numero::before {  /* Muuttujaan laskuri lisäys 1 */
    counter-increment: laskuri;
    content: "Luku " counter(laskuri) ". ";
    color: blue;
  }
 
  2. HTML-koodaus:

     <h3 id="numero"> Otsikko A </h3> 
     <h3 id="numero"> Otsikko B </h3>
	 <h3 id="numero"> Otsikko C </h3>
	 <h3 id="numero"> Otsikko D </h3>

content -määrite ja asetukset

Taulukossa on esitelty content-määritteelle mahdolliset astukset.

Asetus Tarkoitus
normal Normaali asetus eli jonkin muotoilu-asetuksen keskeyttäminen ja estäminen
none Toiminnaltaan samanlainen kuin normal-asetus
counter Laskuri, joka CSS-ohjeella liitetään otsikko-elementtiin ja tämän elementtien lakurin avulla sadaan numerointi otsikoiden eteen
attr(atribuutti) Lisätty sisältö, CSS-ohjeella liitetään atribuutissa oleva teksti esille esimerkiksi linkkitekstin eteen tai loppuun näkyville
merkkijono CSS-ohjeella voidaan lisätä tekstiä (merkkijono = string) määritellyn HTML-elementin eteen tai loppuun
open-quote Lainaus, käytännössä lainaus-merkki tekstin alkuun
close-quote Lainaus, käytännössä lainausmerkki tekstin loppuun
no-open-quote Kuten edelliset lainausmerkien tekemiseen
no-close-quot Kuten edelliset lainausmerkien tekemiseen
url(url) Tiedoston nimi (ja sijainti), käytetään esimerkiksi content-määritteenä liittämään kuva HTML-tekstin eteen tai loppuun.
initial Oletus-asetus, sama kuin "ei mitään muotoilua"
inherit Asetus HTML-elementille jos elementti on koodauksessa saman tyyppinen kuin edellinen HTML-elementti


normal sekä none- asetus

Esimerkissä normal-asetus liitetään id-merkittyyn p-elementtiin estämään CSS-ohjeella asetettava teksti.
Sama voidaan toteuttaa none-asetuksella.



Esimerkin koodaus:


  CSS-ohjeet:

  p{
    color: BLUE;
  }
  p::before { 
    content: "Eteen ";
    color: RED;
  }
  p#temppu1::before { 
    content: normal;
  }
  
 
  HTML-koodaus:

  <h3> CSS-ohjeella lisätyn sisällön estäminen </h3> 
  <p> lisätään sana </p>
  <p id="temppu1"> Ei lisätä sanaa </p>
  <p> lisätään sana </p>

counter ja counter-increment -asetukset

Haluttaessa esimerkiksi jälkikäteen tuottaa HTML-elementillä toteutetun tekstin eteen numero, voi tämän toteuttaa couter- ja counter-increment-asetuksilla.



Esimerkin koodaus:


  CSS-ohjeet:

  h3 {
    color:BLUE;
  }
  h3 {
    counter-increment: omaLaskuri;
  }
  h3::before {
    content:counter(omaLaskuri);
    color: RED;
  }
  
 
  HTML-koodaus:

  <h3> . luku </h3>
  <h3> . luku </h3>

Kuvan liittäminen tekstin eteen tai loppuun

CSS-ohjeella voidaan liittää kuva ohjeessa määritellyn teksti-elementin eteen tai loppuun. Kuvan liittämisessä CSS-ohjeissa voi käyttää myös id- tai class- määritteitä. (Katso aiempia esimerkkejä)



Esimerkin koodaus. Huomaa. CSS-ohje liittää kuvan span-ohjeen takia alimmaisen p-elementin eteen koska ylemmässä p-elementissä on p-ohje ja ylempään span-elementtin kohdistetaan id-määriteessä jokin muu toimenpide.


  CSS-ohjeet:

  p::before {
    content: url(DDankka.gif);
  }
  span::before {
    content: inherit;
  }
  
 
  HTML-koodaus:

  <p>Ankan etunimi on <span id="etunimi"> Aku </span></p>
  <p>Aku Ankka asuu <span>Ankkalinnassa /span></p>

Design and edit © player