image
Valora:   3.92/5 de 26
Inicio » CSS » Manual » Clases y pseudoclases




Clases

Por Lola C�rdenas.
rinconprog.metropoli2000.com

Es normal querer definir unos estilos globales en hojas externas que homogeneicen el aspecto de nuestras p�ginas, y luego, en una p�gina concreta querer variar el estilo en alguna etiqueta concreta. Como ya sabemos, esto podemos hacerlo definiendo el estilo localmente en esa etiqueta.

Pero tambi�n puede suceder que esta definici�n de un estilo concreto queramos aplicarla a otra etiqueta. Lo primero que se nos ocurre es copiar esta definici�n del estilo a la otra etiqueta en la que tambi�n queremos aplicarlo. Sin embargo, este estilo concreto que queremos aplicar a algunas etiquetas concretas puede ser definido en un bloque de estilo global o, incluso, en la hoja externa, y aplicarlo, gracias a un identificador, a las etiquetas concretas en las que queramos que se aplique dicho estilo. Con este fin se definen las clases.

Una clase es una definici�n de un estilo que en principio no est� asociado a alguna etiqueta HTML, pero que podemos asociar, en el documento, a etiquetas concretas.

Para ello, en primer lugar definimos la clase (en el bloque de estilos o en la hoja externa) como un estilo m�s, de esta forma:

.Nombre_de_la_Clase {propiedad1:valor;...;propiedadN:valor}

Es decir, escribiendo un punto seguido del nombre que le queramos dar a la clase, y definiendo el estilo como lo definimos para cualquier otra etiqueta: pares propiedad:valor separados por punto y coma y encerrados entre llaves. Adem�s, podremos definir cuantas clases necesitemos.

Ahora, para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el par�metro CLASS como sigue:
<etiqueta CLASS="Nombre_de_la_Clase"> ... </etiqueta>
donde Nombre_de_la_Clase es el nombre que le hemos dado a la clase, sin el punto.
<!-- Manual de CSS de WebEstilo.com -->
<HTML>
<HEAD>
<TITLE> Ejemplo de uso de clases </TITLE>
<STYLE TYPE="text/css">
<!--
BODY {font-family:Verdana,sans-serif;font-size:x-small}
P,A,B {color:red}
.BAzul {color:blue}
//-->
</STYLE>

</HEAD>

<BODY BGCOLOR=white>

En este ejemplo vamos a ver c�mo se aplican las clases.
Por ejemplo, <B>esta negrita</B> utiliza el estilo definido
en el bloque, pero <B CLASS="BAzul">esta otra negrita</B>
tiene un color distinto. Y no s�lo podemos usar la clase
para la negrita. Por ejemplo, <SPAN CLASS="BAzul">este trozo
de l�nea tambi�n utiliza la clase para su estilo particular</SPAN>.

</BODY>
</HTML>

Ejecutar ejemplo Ver c�digo






Comparte


Aportaciones de usuarios A�adir una aportaci�n



Enlaces
Cocina Facil  
Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.