CLASES
| 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.
<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>
|
