User Tools

Site Tools


doc:appunti:prog:usare_i_fogli_di_stile

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
doc:appunti:prog:usare_i_fogli_di_stile [2009/06/01 16:00] niccolodoc:appunti:prog:usare_i_fogli_di_stile [2017/01/09 16:10] (current) niccolo
Line 43: Line 43:
  
 ===== Attributo CLASS ===== ===== Attributo CLASS =====
 +
 +<code css>
 +select.mybutton {
 +    color: red;
 +    margin: 0px;
 +    padding: 0px;
 +}
 +</code>
 +
 +Il selettore **''select.mybutton''** si applica agli elementi **''%%<SELECT>%%''** con ''**CLASS="mybutton"**''.
  
 <code css> <code css>
Line 65: Line 75:
 </div> </div>
 </code> </code>
 +
 +==== Effetto cascata ====
 +
 +Per utilizzare l'effetto cascata degli stili si possono applicare più classi allo stesso elemento:
 +
 +<code html>
 +<span class="citation external">Text</span>
 +</code>
 +
 +==== Ordine di applicazione delle classi ====
 +
 +Gli stili derivati da più classi vengono applicati non secondo l'elenco delle classi, ma **secondo l'ordine in cui compaiono nel .css**.
 +
 +===== Selettore multiplo =====
 +
 +<code css>
 +article h2 {
 +    color: red;
 +}
 +</code>
 +
 +Il selettore **''article h2''** si applica all'elemento ''<h2>'' che sia discendente (di qualunque livello) dell'elemento ''<article>'';
 +
 +<code css>
 +article > h2 {
 +    color: red;
 +}
 +</code>
 +
 +in questo caso invece la discendenza deve essere diretta (figlio diretto).
 +
 +<code css>
 +a:focus > img {
 +    outline-color: #ffff00;
 +    outline-style: solid;
 +    outline-width: 2px;
 +    outline-offset: -2px;
 +}
 +</code>
 +
 +In questo caso il selettore si applica all'oggetto ''<img>'' contenuto direttamente dentro l'elemento ''<a>'', ma solo nel momento in cui l'elemento ''<a>'' ha il focus.
 +
doc/appunti/prog/usare_i_fogli_di_stile.1243864836.txt.gz · Last modified: 2009/06/01 16:00 by niccolo