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:

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

e scrivire nell'HTML:

PLAIN TEXT
HTML:
  1. <div class="bordoNero coloreRosso">Bordo nero con caratteri rossi</div>
  2. <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. getAvatar 1.0
    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. getAvatar 1.0
    11 nov, 2008 Giovambattista Fazioli:

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

    Rispondi Quota
  3. getAvatar 1.0
    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
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL