rigacci.org

User Tools

Site Tools

Trace:
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

Next revision		Previous revision
doc:appunti:prog:usare_i_fogli_di_stile [2008/11/16 12:33] – external edit 127.0.0.1doc:appunti:prog:usare_i_fogli_di_stile [2017/01/09 16:10] (current) – niccolo
Line 1: Line 1:
 ====== Usare i fogli di stile (CSS) ====== ====== Usare i fogli di stile (CSS) ======
 +
 +**[[http://www.rigacci.org/docs/biblio/online/css2/cover.html|CSS2 Specification]]**
  
 Per includere un foglio di stile si aggiunge un tag dentro **%%<head>%%**, Per includere un foglio di stile si aggiunge un tag dentro **%%<head>%%**,
Line 41: 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 63: 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.1226835185.txt.gz · Last modified: (external edit)