Selector Clase

El siguiente es el Selector “Clase”.
Lo usamos cuando queremos crear un estilo personalizado que queramos aplicar a cualquier elemento HTML en nuestra página.
Un selector de clase puede ser aplicado repetidamente a diferentes elementos en nuestro documento.

Un selector clase siempre comienza con un punto seguido de un nombre. No importa que nombre es, mientras tu sepas donde se encuentra. Entonces dale un nombre apropiado.

Para añadir un selector “Clase” hacemos click otra vez en el botón “Nueva Regla CSS” en la parte inferior del panel CSS.
Selecciona “Clase”, e introduce un nombre precedido por un punto en el “Nombre:”.
En “Define en”, escogemos un estilo externo CSS “mystyle.css” y hacemos click en el botón Aceptar.

En este ejemplo, quiero una línea roja para el primer párrafo en mi documento.
Para esto yo escojo la primer categoría “Borde”.
Quito la verificación en casillas de arriba. ¿Por qué? Bueno, quiero una línea a la izquierda del párrafo.
Abajo a la “Izquierda”, escojo una opción de estilo “continuo”, en la segunda columna “ancho” escojo la opción “Normal” y en la tercer columna “Color” escojo un color del botón de la paleta de colores.

Es lógico que cuando tienes una línea en la derecha, arriba o abajo, ajusta éstas cajas. Y si quieres una caja alrededor de la selección, ajusta todas las cuatro cajas para ésto.

Escoge la segunda categoría “Cuadro” en la caja “Izquierda” en la columna “Alto de Línea”, esto es, dar los números de pixeles que deseas usar como margen entre una línea y el texto. En éste caso escribo un 10.
Esto da un margen de 10 pixeles entre la línea y el texto.
Haz click en el botón ACEPTAR.

La nueva regla CSS es añadida al panel CSS, pero no la selección.

Ahora, para aplicar la nueva regla CSS insertada, a un elemento HTML, en este caso la etiqueta P, coloca el cursor en el párrafo, haz click en la flecha que apunta hacia abajo a un lado de la caja “Estilo” en la “Ventana de Propiedades”.
Como puedes ver el estilo-Clase “Línea Verticual” es añadido a la lista.
Haz click para aplicarla.

Cuando notemos en nuestra fuente de nuestra base de datos, vemos que ésta clase de estilo es aplicada a la etiqueta P, esto es la etiqueta de párrafo de nuestra página.

Y cuando abrimos el archivo mystyle.css, vemos abaja que la nueva regla es añadida.

Si estás planeando aplicar éste estilo para cada etiqueta P en tu documento, entonces debes saber que estás mal y que es mejor con el selector de etiqueta, nómbrala como etiqueta P.
(Véase en lecciones anteriores)

Este estilo-Clase no puede sólo ser aplicado al párrafo. Si quiero añadir una diagonal al logo, no hay problema, coloca el cursor en el logo, y haz click en la flecha que apunta hacia abajo a un lado de la caja “estilo” en la “Ventana de Propiedades”. Y escoje “Línea Vertical” en la lista.

 

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats