7da04a348b
<!-- Please follow this checklist and put an x in each of the boxes, like this: [x]. It will ensure that our team takes your pull request seriously. --> - [x] I have read [freeCodeCamp's contribution guidelines](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md). - [x] My pull request has a descriptive title (not a vague title like `Update index.md`) - [x] My pull request targets the `master` branch of freeCodeCamp.
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, puede 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 el super-man clase. 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 son tradicionalmente en minúsculas, con cada palabra en un nombre de clase de varias palabras separadas por guiones (por ejemplo, "super-man").
También puedes 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í .