841cdc567c
Improved meaning in one sentence by removing words and using a shorter version. Consolidates some of the use of third and first person
2.4 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| CSS Classes | Clases de CSS |
Clases de CSS
Las clases son una forma eficiente de agrupar elementos HTML para que puedan compartir los mismos estilos. Las clases de CSS (hojas de estilo en cascada) se pueden utilizar para organizar y decorar elementos de páginas web.
Al escribir HTML, se pueden agregar clases a un elemento. Simplemente agregue el atributo class="myclass" al elemento. Varios elementos pueden tener la misma clase y un elemento puede tener varias clases. Puede asignar varias clases a un elemento agregando todos los nombres de clase deseados separados por un espacio al atributo de class en HTML.
<h1 class="super-man other-class third-class">"Here I come to save the day!"</h1>
<p>is a popular catchphrase that <span class="super-man">Super Man</span> often said.</p>
A continuación, puede diseñar estos elementos con CSS. Se hace referencia a las clases con punto (.) Delante de ellas en CSS, pero no debe poner puntos en su HTML.
.super-man {
color: red;
background-color: blue;
}
Este código da un fondo azul y un color rojo texto a todos los elementos que tienen la clase super-man. Ver este ejemplo en CodePen .
También puede declarar más de una clase a su elemento, como:
<div class="ironMan alfred">
We're going to save you.
</div>
Luego en tu archivo css:
.ironMan{
color:red;
}
.alfred{
background-color: black;
}
Nota: los nombres de las clases se escriben tradicionalmente en minúsculas, separadas por guiones si hay más de uno (por ejemplo, "super-man").
También se pueden combinar clases en la misma línea:
.superMan .spiderMan {
color: red;
background-color: blue;
}
Puedes ver el resultado del código anterior aquí . Aprende cómo combinar clases de css usando selectores aquí .