Para evitar a repetição de código, usamos várias classes em HTML e CSS. Com CSS, também podemos definir e estilizar ambas as classes juntas e usar várias classes em um elemento, atribuindo a elas diferentes IDs de classe. Essa abordagem pode ser seguida usando a sintaxe separada por espaços para adicionar várias classes a um elemento HTML.
Neste artigo, aprenderemos como adicionar várias classes a um elemento.
Como usar várias classes em CSS?
Para usar duas ou mais classes em um elemento, cada id de classe será separado por um espaço.
Você deve seguir a seguinte sintaxe para usar várias classes em um elemento:
< h1 classe = 'class_1 classe_2 classe_3' > entregando... h >
Em um único elemento HTML, você pode incluir mais de uma classe separando-as com um espaço. Para sua conveniência, aqui está um exemplo.
Exemplo: usando várias classes em CSS
No exemplo abaixo, vamos criar:
- Um cabeçalho usando a tag
e atribua o nome da classe “ cabeçalho ”.
- Em seguida, criaremos outro cabeçalho e o atribuiremos a duas classes diferentes: “ cabeçalho ' e ' linha ”. Esses IDs de classe são separados por um espaço:
HTML
h1 >
< h1 classe = 'linha de título' >
Várias classes dentro Um elemento
h1 >
Agora, vamos passar para o arquivo CSS e aplicar algumas propriedades CSS listadas abaixo:
- Defina a cor de fundo para o título usando a função rgb() como “ (69, 51, 151) ”.
- Defina o estilo da fonte “ itálico ” para o título.
Na classe HTML, o primeiro título utiliza o nome da classe “ cabeçalho ”. Assim, o estilo especificado na classe especificada será implementado no primeiro título:
.cabeçalho {
cor de fundo: rgb ( 69 , 51 , 151 ) ;
estilo da fonte: itálico
}
Para o ' linha ” classe, temos:
- Defina a cor do título usando a função rgb() como “ (255, 0, 0) ”.
- Aplique text-decoration-line como “ sublinhado ”.
O segundo título utilizará os estilos de ambas as classes: “ cabeçalho ' e ' linha ' classe:
.linha {cor: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Após a implementação, verifique o resultado:
A partir da saída, você pode observar que o segundo título utiliza as duas classes CSS.
Conclusão
Para usar várias classes em um único elemento, use diferentes IDs de classe separados por espaços em branco. Usando isso, podemos aplicar diferentes propriedades CSS de uma só vez. Ele nos permite reutilizar a classe onde existem elementos semelhantes. Este artigo explicou como usar várias classes em um único elemento e estilizá-lo junto com um exemplo.