CSS - Atributo Class

iSearchNotes is a FREE service that allows College Students to
Search and Share Class Notes.

Vote Up
0
Vote Down
By: profeinformatica 11
May 5, 2011 | Computer Science - Vicente Torregrosa
Save Notes for Word
.doc
4258
views

Atributo Class

Este atributo se utiliza para poder definir más de un estilo para cada etiqueta.

Supongamos que tenemos una página web con dos párrafos. El código HTML que nos encontraremos será este:

<p> Párrafo 1 </p>

<p> Párrafo 2 </p>

 

Si tenemos un fichero de estilos que contenga la siguiente regla:

p

{

        color: red;

}

El resultado sería este:

Párrafo 1

Párrafo 2

y, en general, cualquier párrafo de la página saldría en rojo.

 

¿Y si queremos que cada párrafo tenga su estilo propio?

La especificación CSS permite crear nuestros propios estilos. Los estilos propios se definen poniendo el carácter punto (.) antes del nombre del selector.

Para el ejemplo anterior, vamos a crear dos estilos:

  • un estilo que se llame p1 que ponga el color de texto azul
  • otro estilo que se llame p2 y que ponga el color de texto verde.

Para definirlos habría que poner en nuestro fichero de estilos lo siguiente:

.p1

{

        color: blue;

}

.p2

{

        color: green;

}

 

¿Qué habría que hacer ahora para que el párrafo 1 use el estilo p1 y el párrafo 2 use el estilo p2? Tendremos que usar el atributo class.

<p class="p1"> Párrafo 1 </p>

<p class="p2"> Párrafo 2 </p>

 

Ahora el resultado sería este:

Párrafo 1

Párrafo 2

 

 

 

 

 

Enjoyed These Notes?
Your support will help spread the extreme awesomeness that is iSearchNotes!

0 Comments

You must login to comment.
iSearchNotes.com on Facebook

Login - Register