Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Selectores de clase CSS

Las clases de CSS le brindan flexibilidad adicional para especificar qué elementos recibirán un estilo particular.
Hace unas lecciones, aprendimos sobre los selectores . Puede recordar que los selectores son las cosas contra las que aplicamos un estilo. En nuestros ejemplos, nuestros selectores fueron todos elementos HTML. Por ejemplo, decidimos hacer el <h1>elemento azul.
Ahora, eso funciona bien si quieres que todos los encabezados sean azules. Pero, ¿qué pasa si solo quieres que algunos de tus encabezados sean azules? Quizás desee que el color de sus encabezados refleje la sección del sitio en el que se encuentra.
¡Parece que necesitas usar clases!
En CSS, las clases le permiten aplicar un estilo a una clase dada de un elemento. Para hacer esto, vincula el elemento al estilo declarando un estilo para la clase y luego asignando esa clase al elemento.

Sintaxis de la clase CSS

Declara una clase CSS utilizando un punto (.) Seguido del nombre de la clase. Usted mismo inventa el nombre de la clase. Después del nombre de la clase, simplemente ingrese las propiedades / valores que desea asignar a su clase.
.class-name { propiedad : valor ; }
Si desea utilizar el mismo nombre de clase para varios elementos, pero cada uno con un estilo diferente, puede prefijar el punto con el nombre del elemento HTML.
Por ejemplo:
p .large { font-size : 2em ; }

Ejemplo de clase CSS

<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  div .css-section {
    borde : 1px  punteado  rojo ;
    relleno : 20px ;
    }
  p .css-section {
    color : verde ;
    }
</ estilo >
< div  class = "css-section" > Clase CSS </ div >
< p  class = "css-section" > Las clases CSS pueden ser muy útiles </ p >
También puede seleccionar elementos (o clases) que están anidados dentro de otro elemento o clase. Por ejemplo, div.css-section pseleccionará todos los <p>elementos que están anidados dentro de un <div>elemento que usa la .css-sectionclase.
Una de las principales ventajas de hacer esto es que no necesita aplicar una clase a cada instancia de un elemento cuando está anidado dentro de otro elemento que usa una clase.
Aquí hay un ejemplo:
<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  div .css-section {
    borde : 1px  punteado  rojo ;
    relleno : 20px ;
    }
  div .css-section  p {
    color : verde ;
    }
</ estilo >
< div  class = "css-section" > Clase CSS
  < p > Las clases de CSS pueden ser muy útiles </ p >
</ div >

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas