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



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