2.4 KiB
| title | localeTitle |
|---|---|
| CSS Classes | Classes CSS |
Classes CSS
Classes são uma maneira eficiente de agrupar elementos HTML para que eles possam compartilhar os mesmos estilos. As classes CSS (Cascading Style Sheets) podem ser usadas para organizar e decorar elementos de páginas da web.
Ao escrever HTML, você pode adicionar classes a um elemento. Basta adicionar o atributo class="myclass" ao elemento. Vários elementos podem ter a mesma classe e um elemento pode ter várias classes. Você pode atribuir várias classes a um elemento adicionando todos os nomes de classes desejados separados por um espaço ao atributo de class em 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>
Você pode, então, estilizar esses elementos com CSS. As classes são referenciadas com um ponto final (.) antes do nome dado à elas. O ponto não deve ser usado no HTML.
.super-man {
color: red;
background-color: blue;
}
Este código atribui um fundo azul e uma cor de texto vermelho para todos os elementos que têm o super-man como classe.
Você também pode declarar mais de uma classe para seu elemento, como:
<div class="ironMan alfred">
We're going to save you.
</div>
Então no seu arquivo CSS:
.ironMan{
color:red;
}
.alfred{
background-color: black;
}
Nota: nomes de classes são tradicionalmente todos minúsculos, com cada palavra em um nome de classe com várias palavras separadas por hífens (por exemplo, "super-homem").
Você também pode combinar classes na mesma linha:
.superMan .spiderMan {
color: red;
background-color: blue;
}
Você pode ver o resultado do código acima aqui . Aprenda como combinar classes CSS usando seletores aqui .