Sviluppo » Internet » CSS

Very short trick: versatilità delle classi CSS

lunedì 10 novembre, 2008

I più esperti lo sapranno già, tuttavia mi viene spesso chiesto che differenza c’è tra class e id nei fogli di stile CSS. Una panoramica su alcune differenze e avvertenze è possibile trovarla in Classi e ID nei CSS, tuttavia una caratteristica utile, che distingue class da id, è la possibilità di usare classi multiple. Ad esempio è possibile definire:

1
2
3
.bordoNero {border:2px solid #000}
.coloreRosso {color:#f00}
.bordoRosso {border:2px solid #f00}

e scrivire nell’HTML:

1
2
<div class="bordoNero coloreRosso">Bordo nero con caratteri rossi</div>
<div class="bordoRosso coloreRosso">Bordo rosso con caratteri rossi</div>

class, a differenza di id, può contenere al suo interno più definizioni in qualsiasi sequenza!

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , ,

3 commenti a: “Very short trick: versatilità delle classi CSS”

  1. 11 nov, 2008 Francesco Gavello:

    Utilissima per combinare assieme più caratteristiche del proprio layout risparmiando codice :D
    E’ probabilmente una delle feature dei CSS che uso di più.

    Rispondi Quota
  2. 11 nov, 2008 Giovambattista Fazioli:

    @Francesco Gavello: sono d’accordo! E pensare che ancora a molti è del tutto sconosciuta :)

    Rispondi Quota
  3. 22 feb, 2009 Andy:

    mi si è aperto un nuovo mondo… o.o

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>                                  // blocco generico
<code></code>                                // blocco generico
[cc_actionscript][/cc_actionscript]          // Actionscript
[cc_actionscript3][/cc_actionscript3]        // Actionscript 3
[cc_css][/cc_css]                            // CSS Style Sheet
[cc_html][/cc_html]                          // HTML
[cc_js][/cc_js]                              // Javascript
[cc_objc][/cc_objc]                          // Objective-C
[cc_php][/cc_objc]                           // PHP
[cc_sql][/cc_sql]                            // SQL