Clases

Clases
(Classes)

Hasta ahora solo hemos visto el uso de las reglas de CSS para entallar a la medida etiquetas de HTML. Hemos usado reglas para crear nuevas versiones de omisi�n de etiquetas y para modificar el comportamiento de las etiquetas basado en cada caso individualmente. Pero, de hecho, podemos hacer mas de eso con esas hojas estilizadas. CSS tambi�n nos permite definir tipos. De un lado, �stas pueden ser usadas para entallar etiquetas existentes a nivel "intermedio" (proveyendo un territorio medio entre los avances que has visto hasta ahora que o alteran todas las situaciones o un solo incidente de etiquetaci�n). Pero los tipos tambi�n pueden ser usadas de tal manera que podamos, de forma effectivamente, define nuestros propios "ambientes de HTML".

Una regla para un tipo es similar en forma a las que ya hemos visto para etiquetas. La �nica diferencia es que la regla no comienza con el nombre de una etiqueta HTML. En vez, comienza con un punto seguido de un nombre que t� escojas. El punto la identifica como una regla para un tipo, no una etiqueta; el nombre despu�s del punto es lo que tu desees com el nombre del nuevo tipo que est�s creando.

Ahora vamos a ver unos ejemplos de tipos y c�mo se pueden usar.

Usando un Tipo para modificar una Etiqueta de HTML

Aunque un tipo es una entidad que nosotors creamos, no una etiqueta de HTML, un tipo puede ser usado para reconfigurar unas etiqueta. De hecho, la �nica manera de hacer uso de un tipo es referirlo a una etiqueta de HTML. Es hecho specificando el valor de un nuevo atributo de la etiqueta que deseamos cambiar. El atributo se llama clase (class); puede ser un atributo de cualquier etiqueta de HTML que pueda ser reconfigurada con css.

Como simple ejemplo, vamos a definir las dos siguientes clases:

.blueslant {color: #669999; font-style:italic;}    
.orangeline {color: #996699; text-decoration:underline;}

Ahora, vamos a usar las clases para alternar algunas versiones de las etiquetas <h3>: Example 9. El ejemplo de archivo de HTML usa las clases nuevas en la equaci�n:

   
<h3 class="blueslant">Slanted H3 Heading</h3>   
<h3 class="orangeline">Underlined H3 Heading</h3>

Toma nota de que no inclu�mos el periodo cuando asignamos el nombre de la clase al atributo de la clase en la etiqueta de HTML.

Ahora tenenmos disponibles tres versiones diferentes de la etiqueta <h3>: 1) Una versi�n que es usada si especificamos class="blueslant", 2) una versi�n que es usada si especificamos class="orangeline", y 3) la versi�n por omisi�n que es usada si no se especifica una clase (en el presente caso, la nueva omisi�n que creamos cuando reconfiguramos la etiqueta con una regla css para h3).

Si colocamos las tres reglas en un archivo externo, podemos usar cualquiera de las definiciones de cualquier p�gina de HTML enlazada al archivo externo.

Esto fue un ejemplo bien simple, pero similarmente podemos usar clases para definir versiones alternas de otras etiquetas.

Clases y ID

(Classes and IDs)

P�ginas con estilo de cascadas tambi�n te permiten crear un regla para un ID. El formato de la regla para un ID es el miso que para una clase excepto que el nombre del ID al principio de la regla debe ser precedido por el car�cter de n�mero (#) en vez de por un punto. Para usar una regla ID, el nombre de ID debe de estar mencionado en la etiqueta de HTML; el nombre del ID es asignado como un valor del atributo de la etiqueta de ID.

En muchas maneras, Classes y IDs funcionan de la misma manera. De hecho, aqu� est� nuestro ejemplo anterior modificado para usar IDs en vez de Classes: Example 10. La mayor diferencia es que una ID en particular es usada a menudo una sola vez en una p�gina de HTML singular. De esta manera, cada etiqueta puede ser "etiquetada e identificada". Esto puede ser �til cuando se est� implementando alguna de las caracter�sticas m�s avanzadas de css, por ejemplo para controlar la pocisi�n de los elementos de una p�gina.

Creando Ambientes Entallados de HTML

(Creating Custom HTML Environments)

Estas pueden ser creadas con etiquetas de DIV y SPAN. Actualmente, DIV y SPAN son solo dos etiquetas HTML m�s, y classes y IDs son espec�ficamente con ellas as� como con cualquier otra etiqueta. Pero, por la naturaleza especial de �stas dos etiquetas, ellas nos proveen con una manera de definir e implementar nuestros propios ambientes de HTML. Por ejemplo, podr�as utilizar publicaci�n por doquier (span) para crear una perscepci�n entallada emfatizando una secci�n del texto: Example 11.

La etiqueta DIV es casi una placa en blanco: no tiene ning�n efecto visible excepto de evitar marcar el �rea rectangular de una p�gina y poner una l�nea en blanco antes y despu�s de ella. SPAN es una t�bula rasa completa y absolutamente no contiene ningunas caraceter�sticas de preparaci�n (formatting) de por s�. Classes y ID's solo efect�an cuando son aplicadas a una etiqueta de HTML; porque a lo que el "en blanco" se refiere de DIV y SPAN, puedes pensar en �stas dos etiquetas como envases vac�os que te permiten entrar un conjunto de definiciones entalladas a tu medida cada vez que lo desees.

Esto no es para decir que �stas etiquetas ya no contienen un conjunto de atributos por omisi�n que puedas ser espec�fico. De hecho, lo tienen, incluyendo atributos que te permiten controlar la pocisi�n exacta en una p�gina y las "propiedades de visibilidad" de los art�culos contenidos dentro de las etiquetas de DIV y SPAN. Estos atributos, cuando se integran con Javascript, hacen posible crear animaciones y producir elementos de HTML puramente din�micos en una p�gina. Pero �stos t�picos pueden ser considerablemente mas complicados de lo que los hemos descrito aqu�. (Mant�nte informado/a de futuras actualizaciones al webTeacher para una introducci�n a algunas de �stas capacidades m�s avanzadas de estilos de p�ginas.)