Cómo aplicar estilos de clases personalizadas en las hojas de estilo en cascada (css)

Los estilos de clase, que son también a veces llamado estilos de clases personalizadas, estilos personalizados, o clases personalizadas, en hojas de estilo en cascada (CSS) son para aquellos momentos en los que desea crear un estilo especial y luego aplicar de forma selectiva a un número ilimitado de elementos u objetos de una página web.

Por ejemplo, en la frase “nuestro boletín de ofertas diarias que trae las ventas, promociones y ofertas especiales más calientes en las tiendas más populares en un correo electrónico diario y fácil de leer,” podría crear un estilo de clase personalizada para modificar el palabras Ofertas diarias y luego aplicar ese estilo a esas palabras en el código HTML.

Al escribir los estilos de clase en el archivo CSS, asegúrese de incluir un período inmediatamente antes del nombre del selector, como se muestra aquí (.):

.Ofertas diarias {Font-family: Georgia, "Times New Roman", Times, serif-font-size: 23px; font-weight: bold-color: # 336699-}

La presencia del período realiza dos funciones:

  • Esto ayuda a identificar rápidamente, de un vistazo, los estilos de clase de otros tipos de estilos al revisar su código CSS.

  • Quizás lo más importante, se informa a los navegadores que el estilo es una clase personalizada que se aplica de manera selectiva hasta el contenido de la página.

Cuando se crea un estilo de clase, puede nombrar el selector de nada que te guste, con tal de que no es el nombre de una etiqueta HTML que se utiliza actualmente.

Por ejemplo, sería una muy mala idea de crear un estilo de clase llamada .cuerpo o .pag. Así, de acuerdo con el concepto de semántica HTML, tratar de asignar nombres a los estilos de clase después de la función que va a ser realizando, tales como .realce o .imageborder.

Cuando haya terminado de escribir las reglas de estilo en el CSS para su estilo de clase, se puede aplicar el estilo a cualquier objeto en el documento HTML mediante la adición de la clase atribuir a la etiqueta de contenedor de apertura del objeto o del contenido que se está labrado:

class ="Ofertas diarias"gt; nuestro boletín de ofertas diarias que trae las ventas más calientes, promociones y ofertas especiales en las tiendas más populares en un correo electrónico diario y fácil de leer.

Al especificar el estilo de clase en el código HTML con el clase atributo, el período que se requiere en el CSS al crear la definición de estilo no tiene que ser colocado en frente del nombre de estilo entre comillas, como se muestra en el código anterior.

Si prefiere que el estilo de clase se aplicará sólo a una o dos palabras o una frase corta en lugar de todos los elementos dentro de una etiqueta de contenedor, puede aplicar de forma selectiva el estilo de la clase a su objeto (s) utilizando la etiqueta con el clase atributo:

Nuestra "Ofertas diarias"gt;Ofertas diarias publicación le ofrece las ventas, promociones y ofertas especiales más calientes en las tiendas más populares en un correo electrónico diario y fácil de leer.

los la etiqueta es una etiqueta en línea se utiliza para aplicar un estilo a elementos dentro del flujo de texto del documento. Esta etiqueta es esencialmente una etiqueta HTML recipiente vacío que no hace nada hasta que le indique que hacer algo mediante la aplicación de un atributo a la misma, tales como la adición de la clase, carné de identidad, o estilo atribuir al contenido estilo.

La ilustración muestra la diferencia entre la adición de un atributo de clase a una

etiqueta (arriba) frente a añadiéndolo a una etiqueta que rodea contenido específico (abajo).

Artículos Relacionados