DEFINICIÓN DE ESTILOS POR MEDIO DE CLASES

Transcripción

1 DEFINICIÓN DE ESTILOS POR MEDIO DE CLASES Una clase es una definición de un estilo CSS que en principio no está asociado a alguna etiqueta HTML, pero que se puede asociar a etiquetas concretas. Generalmente las reglas de estilo puede ser iguales para un conjunto de etiquetas HTML, en esos casos es conveniente plantear una regla de estilo con un nombre genérico o identificación que se aplique solo a las etiquetas que lleven esta identificación. Mediante la definición de clases se establecen estilos que pueden aplicarse a cualquier etiqueta de HTML. El estilo no se vincula a una etiqueta sino a la clase. Esta clase, actúa como atributo de cualquier etiqueta, cada vez que se quiera llamar a ese estilo, basta con incluir el nombre de esa clase dentro de la etiqueta correspondiente. Para aplicar el estilo de una clase a una etiqueta se utiliza el parámetro CLASS dentro de una etiqueta específica, así 1

2 <etiqueta CLASS="nombre_de_la_clase">... </etiqueta> Donde nombre_de_la_clase es el nombre que le asignó a la clase Observemos los siguientes ejemplos: Antes de comenzar se debe crear el archivo CSS donde crearemos los estilos. Este archivo debe guardarse en la carpeta css del sitio. En este ejemplo tenemos el siguiente código HTML digitado para crear el archivo index.html Vamos a crear una clase llamada Textos, la cual se utilizará para aplicar formatos a los textos digitados en la página. Abrimos el archivo estilos.css y se genera el siguiente código: Se inicializa el estilo utilizando el caracter punto y seguidamente un nombre de clase, en este caso.textos, dentro de la llave { se definen las reglas de estilo como hemos venido trabajando anteriormente. 2

3 Tenga en cuenta que el nombre de la clase no puede comenzar con un número. Luego en el código HTML, se indica en la etiqueta donde se desea aplicar el estilo, el nombre de la clase (sin el punto), así: En este caso, sólo se indica el nombre de la clase textos, en la primera etiqueta <p> de la página, si se abre la vista previa el resultado será: Observe que solo el primer párrafo quedará afectado con los formatos indicados en los estilos de la clase textos, las demás etiquetas <p> que no se les colocó la clase, no quedarán con estos formatos. Veamos otro ejemplo: En el tema anterior, pudimos observar que se pueden aplicar formatos a todas las imágenes que forman el sitio, pero si se inserta la imagen en el cabezote, dentro de la etiqueta <header>, esta imagen también 3

4 tendrá los mismos atributos. Para evitar esto, se crea una clase exclusiva a las imágenes de la página, así: En la hoja de estilo se crea la clase.fotos (recuerde que se debe iniciar con punto) Luego en el código HTML se agrega la clase fotos, a las etiquetas HTML <img> que forman la página. Para este ejemplo se tienen tres etiquetas <img>, se le colocará la clase fotos solo a dos para observar el siguiente resultado: El resultado será: 4

5 Si agregamos en la etiqueta <header> la imagen que forma el cabezote, esta no se vería afectada por los estilos. Observemos: En el código HTML insertamos la etiqueta <img> para insertar la imagen del cabezote, pero no le colocamos la clase fotos que creamos para las imágenes de la página, pues si hacemos esto la imagen del cabezote quedaría afectada con esos formatos. El resultado será el siguiente: la imagen del cabezote aparecerá sin formatos específicos y las imágenes a las que se le coloco la clase fotos, se observaran con los formatos especificados en la clase fotos, así: 5

6 Cuando trabajamos con tablas también podemos utilizar clases para definir los formatos que las filas y celdas tendrán. Hemos creado una tabla en nuestro código que se observa en vista previa de la siguiente manera: El código HTML que se utilizó para su creación es: 6

7 Ahora vamos a crear los estilos utilizando clases: Comenzaremos creando una clase para modificar los formatos del <caption> la cual permite colocar un título a la tabla, para este ejercicio, la clase tendrá el nombre de titabla y tendrá los siguientes formatos: Luego en el código HTML colocamos el nombre de la clase en la etiqueta <caption>, así: En vista previa observaríamos la tabla de la siguiente manera: 7

8 Ahora crearemos una clase llamada cabeceras para aplicar formatos a los títulos de la tabla, así Los atributos border-right y border-bottom se utilizan para el borde derecho y el borde inferior respectivamente. El resultado será 8

9 El resto de estilos que utilizaremos para esta tabla, serán creados de forma que afecten a los selectores tbody td, es decir a las celdas normales de la tabla, en este caso no se utilizarán clases, el código sería: Al final la tabla se observará de la siguiente manera: 9