Crie várias classes em HTML
- Atribuir várias classes a um contêiner em HTML
- Atribuir várias classes a um contêiner em HTML para escrever CSS eficiente
![Crie várias classes em HTML](/img/HTML/feature-image---html-multiple-classes.webp)
Este artigo apresentará como criar várias classes em HTML. O artigo discutirá os benefícios do uso de várias classes em HTML.
Atribuir várias classes a um contêiner em HTML
Em HTML, frequentemente vimos uma classe atribuída a um contêiner. Podemos atribuir uma classe nos elementos HTML com o atributo class
e depois escrever o valor. Podemos criar uma classe em nível de bloco e elementos inline. Podemos criar classes para as diferentes tags HTML como <img>
, <p>
, <h1>
e muitos mais. Geralmente, podemos criar um contêiner e atribuí-lo a uma classe e estilizar o contêiner com CSS. Podemos selecionar a classe de contêiner com .
Seletor de CSS. Vamos ver um exemplo disso.
<div class ="box">
<p> Hello World </p>
</div>
.box{
border: 2px solid black;
height:200px;
width:200px;
}
Criamos um elemento div
com uma classe box
no exemplo acima. Temos alguns conteúdos dentro do div
. Em CSS, selecionamos a classe box
e aplicamos alguns estilos a ela. Criamos uma caixa com alguma altura e largura. Possui uma borda preta.
Também podemos atribuir duas classes a um contêiner em HTML. Para isso, devemos escrever os dois nomes das classes, um após o outro separados por espaços em branco. Em seguida, podemos definir o estilo das classes que contêm o mesmo contêiner individualmente.
Por exemplo, crie um div
conforme mostrado no exemplo acima. Escreva as duas classes box
e wrapper
separadas por espaços em branco para o div
. Em CSS, selecione a classe box
primeiro e escreva a propriedade border
. Dê o valor como 2px solid black
para a propriedade border
. Em seguida, forneça a altura e largura de 200px
. Em seguida, selecione a classe wrapper
e forneça o valor de 20px
à propriedade margin
.
Adicionamos uma margem de 20px
ao contêiner usando duas classes no exemplo abaixo.
Código de exemplo:
<div class ="box wrapper">
<p> Hello World </p>
</div>
.box{
border: 2px solid black;
height:200px;
width:200px;
}
.wrapper{
margin:20px;
}
Atribuir várias classes a um contêiner em HTML para escrever CSS eficiente
Aprendemos como podemos usar várias classes em um contêiner. Agora, precisamos entender a vantagem de seguir essa abordagem. Podemos usar várias classes em um contêiner quando algumas classes têm atributos idênticos. Podemos estilizar as classes comuns uma vez e estilizar as classes individuais separadamente. Assim, podemos escrever o CSS de forma eficiente.
Por exemplo, crie três elementos div
em HTML. Para cada um dos elementos, escreva box
como o nome da primeira classe. Em seguida, escreva os nomes das classes redBox
para o primeiro div
, greenBox
para o segundo e blueBox
para o terceiro div
. A seguir, em CSS, selecione a classe box
e forneça a altura e largura de 200px
. Defina a margem de 20px
. Agora, selecione o nome da classe individual e forneça a respectiva cor de fundo. Selecione a classe redBox
e defina a propriedade background-color
como red
. Repita o mesmo para as demais classes com as respectivas cores como cor de fundo.
No exemplo abaixo, identificamos os atributos comuns dessas três caixas e criamos uma classe comum caixa
. Devido a isso, não precisamos escrever os estilos repetitivos para cada uma das caixas. Também atribuímos os contêineres com as classes individuais, por meio das quais podemos estilizar as caixas com cores exclusivas. Dessa forma, podemos usar várias classes para escrever códigos CSS eficientes.
Código de exemplo:
<div class ="box redBox"></div>
<div class ="box greenBox"></div>
<div class ="box blueBox"></div>
.box{
height:200px;
width:200px;
margin:20px;
}
.redBox{
background-color:red;
}
.greenBox{
background-color:green;
}
.blueBox{
background-color:blue;
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn