Differences

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

--- doc:appunti:prog:usare_i_fogli_di_stile [2009/06/01 16:00] – niccolo
+++ doc:appunti:prog:usare_i_fogli_di_stile [2017/01/09 16:10] (current) – niccolo
@@ Line 43: / Line 43: @@
 ===== 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>
@@ Line 65: / Line 75: @@
 </div>
 </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.