echivalent onclick in css

[andras]

Salut,
Probabil e ceva banal dar nu reusesc: am o lista de optiuni in meniu orizontal

Cod: Selectaţi tot

<div class="header">
   <ul class="nav">
      <li><a href="fisier1.php" >Apasa</a></li>
      <li><a href="fisier2.php" >Apasa iar</a></li>
   </ul>
</div>

Vreau in style.css ca dupa click pe optiune Apasa aceasta (Apasa) sa primeasca (si sa pastreze) proprietatea text-decoration: underline;
Am incercat cu ".header .nav li a:hover" , ".header .nav li a:focus", ".header .nav li a:active" dar nu ramine subliniat.

2. Tot aici mai am o intrebare: cum pun pe 2 rinduri un text cuprins intr-un <li>. Adica ceva de genul:

Cod: Selectaţi tot

<li> <a href="fisier1.php" >Apasa <br/> aici </a></li>

astfel incit Apasa sa aiba o marime de font iar aici sa aiba alta marime de font.
Multumesc.

CSS nu are optiune care sa fie precum "onclick". Ar fi niste combinatii de html si css pentru a obtine schimbarea proprietatilor dupa click cu CSS, dar e complicat. Se folosesc tag-urile: <label> si <input type="checkbox" />.
Iar in css se foloseste pseudo-clasa ":checked" care recunoaste cand butonul "checkbox" e bifat sau nu, si la acesta se adauga proprietati pt. click. Cum e in acest exemplu:

Cod: Selectaţi tot

<style>
#menu label{
  position: relative;
  display: block;
  cursor: pointer;
  padding: 4px;
  font-size: 19px;
  background: #eeeefe;
  border: 1px solid #33f;
}
#menu input:checked + label {
  background: #c6e1ec;
  color: #3d7489;
}
#menu input{
  display: none;
}
</style>

<ul id="menu">
<li><input id="cb1" name="cb1" type="checkbox" />
 <label for="cb1"><span>coursesweb.net</span></label>
</li>
<li><input id="cb2" name="cb2" type="checkbox" />
 <label for="cb2"><span>marplo.net</span></label>
 </li>
</ul>

Dar de ce sa te complici cand e mult mai simplu cu javascript, cand e apasat click adaugi o clasa css la acel element, iar clasa o configurezi in css. Cam asa:

Cod: Selectaţi tot

document.getElementById('idul').addEventListener('click', function() {
  this.className = 'clasa';
});

- Dar la tag-urile <a> nu e nevoie sa setezi "text-decoration: underline;" fiindca link-urile sunt deja afisate subliniat in mod implicit.

2. Poti folosi tag-ul <span> la textul care vrei sa aibe proprietati diferite, iar in css configurezi stilul pentru acel <span> sau o clasa in el.

Cod: Selectaţi tot

<li><a href="fisier1.php" >Apasa <br/> <span class="cls">aici</span></a></li>