En CSS, podemos definir estilos por Clases, esto quiere decir que podemos definir mas de un estilo para cada etiqueta HTML, en otras palabras las clases dividen una determinada etiqueta en varios tipos, en las cuales cada clase recibe un nombre diferente....
¿Por Qué utilizar Clases?, Utilizar las clases en CSS, como ya dijimos nos permite que una misma etiqueta HTML ejecute diferentes operaciones, lo explicare con un ejemplo:
Supongamos que tengamos 4 etiquetas de párrafo:
<p> parrafo1 </p>
<p> parrafo2 </p>
<p> parrafo3 </p>
<p> parrafo3 </p>
Ahora queremos que el parrafo1 y parrafo2 sean de color azul, mientras que los parrafos restantes sean de color verde, podemos darles color a cada uno de ellos, como son pocas etiquetas seria cosa fácil pero el problema seria si fueran 50 de color verde y 50 de color azul, un caso exagerado pero eficaz para este ejemplo.
Siguiendo con los 4 párrafos, si nosotros queremos ponerle color a la etiqueta <p> por medio de CSS, este cambio afectaría a todas las etiquetas <p> y nosotros no queremos que todas sean del mismo color.
Ahora ya llegamos a la intervención de las Clases, esta seria la mejor solución ya que podemos identificar con una clase diferente a cada una de las etiquetas <p> que queremos que muestren el texto en azul y otras que muestren el texto de color verde:
La codificación seria la siguiente:
<p class="azul"> parrafo1 </p>
<p class="azul"> parrafo2 </p>
<p class="verde"> parrafo3 </p>
<p class="verde"> parrafo3 </p>
Esta seria la manera correcta de definir las clases dentro de la etiqueta <p> .
Ahora el código CSS seria el siguiente:
p.azul { color : blue ; }
p.verde { color : green ; }
estas serian la forma de invocar las clases CSS referidas a las etiquetas <p>.
Ahora aplicaremos todo lo mencionado en un ejemplo:
Código HTML con CSS Incluido:
si desea puede visitar las formas de incluir CSS en un documento HTML
Resultado:
parrafo1
parrafo2
parrafo3
parrafo3
Cualquier Duda o Aporte Hacerlo por Comentarios. Gracias por su Tiempo!.
0 comentarios: