Usted puede aplicar fácilmente un estilo para todos los elementos de un tipo particular en una página HTML5, pero a veces es posible que desee tener un control más estricto de sus estilos. Por ejemplo, es posible que desee tener más de un estilo de párrafo. A modo de ejemplo, mire la página classes.html.

Una vez más, múltiples formatos están en esta página:

• Preguntas tienen un gran sans serif cursiva. Hay más de una pregunta.

• Las respuestas son más pequeños, azul, y en una fuente cursiva. Hay más de una respuesta, también.

  

Preguntas y respuestas son todos los párrafos, por lo que no pueden simplemente el estilo de párrafo porque necesita dos estilos distintos. Hay más de una pregunta y más de una respuesta, por lo que el truco ID sería problemático. Dos elementos diferentes no pueden tener el mismo ID. Aquí es donde la noción de clases entra en juego. Cada ID pertenece a un solo elemento, pero muchos elementos pueden compartir la misma clase.

Cómo agregar clases a la página

CSS permite definir clases en su HTML y tomar las definiciones de estilo que se aplican a través de una clase. Funciona así:

1. Agregue el clase atribuir a sus preguntas HTML.

   A diferencia de ID, varios elementos pueden compartir la misma clase. Configuración de la clase de pregunta indica serán labrados en forma de preguntas estos párrafos:

    
   ¿Qué tipo de vaca vive en el Ártico?

2. Agregar atributos de clase similares a las respuestas mediante el establecimiento de la clase de las respuestas a responder:

    
   Un Eskimoo!

   Ahora usted tiene dos subclases diferentes de párrafo: pregunta y responder.

3. Crear un estilo de clase para las preguntas.

   El estilo de clase se define en el CSS. Especifique una clase con el período (.) Antes de que el nombre de la clase. Las clases se definen en CSS como esto:

   En esta situación, el pregunta clase se define como una gran fuente sans serif alineados a la izquierda.

4. Define el aspecto de las respuestas.

   La clase utiliza un derecho; fuente cursiva justificada.

 .respuesta {font: 120% "Comic Sans MS", cursiva-text-align: right; color: # 00F-}

Utilización de clases

Aquí está el código de la página, que muestra cómo utilizar las clases CSS:

Bromas favoritos
¿Qué tipo de vaca vive en el Ártico?
Un Eskimoo!
Lo que va en la parte superior de una casa de perro?
La trama!

A veces ves selectores, como

p.fancy

que incluyen tanto un elemento y un nombre de clase. Este estilo se aplica sólo a los párrafos con la clase adjunto. En general, las clases son grandes, ya que se pueden aplicar a todo tipo de cosas, así que usted puede dejar el nombre del elemento a cabo para que el estilo como reutilizable posible.

Combinando clases

Un elemento puede utilizar más de una clase.

Los párrafos parecen estar en tres estilos diferentes, pero sólo el rojo y el guión se definen. El párrafo tercero utiliza ambas clases. Aquí está el código:

Múltiples Clases
Este párrafo se utiliza la clase roja
Este párrafo se utiliza la clase de la escritura
Este párrafo utiliza ambas clases

La hoja de estilo introduce dos clases. los rojo clase hace que el rojo el párrafo (bueno, texto blanco con un fondo rojo), y el guión clase corresponde un tipo de letra cursiva al elemento.

Los dos primeros párrafos tienen cada uno una clase, y las clases actúan como era de esperar. La parte interesante es el tercer párrafo, ya que tiene dos clases.

Ambos estilos se aplicarán al elemento en el orden en que se escriben. Tenga en cuenta que los dos nombres de las clases se dan citas dentro y no se necesitan comas (o mascotas). Usted puede solicitar más de dos clases a un elemento si lo desea. Si las clases tienen reglas en conflicto (por ejemplo se hace el elemento verde y el siguiente hace que sea azul), la última clase en la lista se sobreponen a los valores anteriores.

Un elemento puede tener un ID. El estilo de ID, el estilo elemento, y todos los estilos de clase se tienen en cuenta cuando el navegador intenta mostrar el objeto.

Por lo general, lo mejor es nombrar las clases en función de su significado (como mainBackgroundColor). Usted puede decidir que el verde es mejor que el rojo, así que o bien tener que cambiar el nombre de la clase o usted tiene que tener un rojo clase que cosas de color verde. Eso sería raro.