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