MANUALES

TUTORIAL CSS:

Agrupación de elementos con el atributo class



IMPORTANTE: Se pueden definir las propiedades para los elementos que pertenecen  a una clase unsando  .nombredelaclase  (antes se coloca el selector-etiqueta HTML) en la hoja de   estilo     del documento.

Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:

 
 <p>Uvas para el vino blanco:</p>
 <ul>
 <li><a href="ri.htm">Riesling</a></li>
 <li><a href="ch.htm">Chardonnay</a></li>
 <li><a href="pb.htm">Pinot Blanc</a></li>
 </ul>

 <p>Uvas para el vino tinto:</p>
 <ul>
 <li><a href="cs.htm">Cabernet Sauvignon</a></li>
 <li><a href="me.htm">Merlot</a></li>
 <li><a href="pn.htm">Pinot Noir</a></li>
 </ul>  

Los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.

Se  asigna una clase para cada tipo de enlace, usando el atributo class.

 
 <p>Uvas para el vino blanco:</p>
 <ul>
 <li><a href="ri.htm" class="whitewine">Riesling</a></li>
 <li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
 <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
 </ul>

 <p>Uvas para el vino tinto:</p>
 <ul>
 <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
 <li><a href="me.htm" class="redwine">Merlot</a></li>
 <li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
 </ul>

A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.

 
 a {
  color: blue;
 }

 a.whitewine {
  color: #FFBB00;
 }

 a.redwine {
  color: #800000;
 }

Identificación de un elemento usando el atributo id

Identificar un elemento único. Esto se hace con el atributo id.

Con un atributo id no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único.

IMPORTANTE: Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando #nombredelidentificador en la hoja de estilo del documento.

Sería normal asignar un id a cada capítulo de la siguiente manera:

 
 <h1 id="c1">Capítulo 1</h1>
 ...
 <h2 id="c1-1">Capítulo 1.1</h2>
 ...
 <h2 id="c1-2">Capítulo 1.2</h2>
 ...
 <h1 id="c2">Capítulo 2</h1>
 ...
 <h2 id="c2-1">Capítulo 2.1</h2>
 ...
 <h3 id="c2-1-2">Capítulo 2.1.2</h3>
 ...

Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:

 
 #c1-2 {
  color: red;
 }

TOMADO DE: http://es.html.net/tutorials/css/lesson7.php