As folhas de estilo em cascata definem a aparência de um elemento de página da web conectando-se aos atributos que você aplica a esse elemento. Esses atributos podem ser um ID ou uma classe e, como todos os atributos, eles adicionam informações úteis aos elementos aos quais estão anexados.
Uma ou mais classes em CSS?
Na maioria dos casos, você atribui um único atributo de classe a um elemento, mas na verdade não está limitado a apenas uma classe do jeito que está com IDs. Embora um elemento só possa ter um único atributo de ID, você pode dar a um elemento várias classes e, em alguns casos, isso tornará sua página mais fácil de estilizar e muito mais flexível. Se você precisar atribuir várias classes a um elemento, adicione as classes adicionais e simplesmente separe-as com um espaço em seu atributo. Por exemplo, este parágrafo tem três classes:
Este seria o texto do parágrafo type = “code”> Isso define as três classes a seguir na tag de parágrafo:
- Pullquote
- Apresentou
- Deixou
Observe os espaços entre cada um desses valores de classe. Esses espaços são o que os configuram como diferentes classes individuais. É também por isso que os nomes das classes não podem conter espaços, pois isso os definiria como classes separadas. Depois de ter seus valores de classe em HTML, você pode atribuí-los como classes em seu CSS e aplicar os estilos que deseja adicionar. Por exemplo.
.pullquote {…}
.apresentou { … }
p.esquerdo {…}
type = “code”> Nestes exemplos, as declarações CSS e os pares de valores aparecem dentro das chaves, que é como esses estilos seriam aplicados ao seletor apropriado. Se você definir uma classe para um elemento específico (por exemplo, p.esquerdo), você ainda pode usá-lo como parte de uma lista de classes; no entanto, esteja ciente de que isso afetará apenas os elementos especificados no CSS. Em outras palavras, o p.esquerdo estilo só se aplicará a parágrafos com esta classe, uma vez que seu seletor está realmente dizendo para aplicá-lo a “parágrafos com um valor de classe de deixou, “Por outro lado, os outros dois seletores no exemplo não especificam um determinado elemento, portanto, eles se aplicariam a qualquer elemento que use esses valores de classe.
Várias classes, semântica e JavaScript
Outra vantagem de usar várias classes é que aumenta as possibilidades de interatividade. Aplique novas classes a elementos existentes usando JavaScript sem remover nenhuma das classes iniciais. Você também pode usar classes para definir a semântica de um elemento – adicionar classes adicionais para definir o que esse elemento significa semanticamente. Esta abordagem é a forma como os microformatos funcionam.
Vantagens de várias classes
As camadas de várias classes podem facilitar a adição de efeitos especiais a elementos sem a necessidade de criar um estilo totalmente novo para esse elemento. Por exemplo, para flutuar os elementos para a esquerda ou direita, você pode escrever duas classes: esquerda
type = “code”> e à direita
type = “code”> com apenas float: left;
type = “code”> e float: right;
type = “code”> neles. Então, sempre que você tiver um elemento que precisa flutuar para a esquerda, você simplesmente adicionaria a classe “esquerda” à sua lista de classes. No entanto, há uma linha tênue a percorrer aqui. Lembre-se de que os padrões da web ditam a separação de estilo e estrutura. A estrutura é tratada em HTML, enquanto o estilo está em CSS. Se o seu documento HTML estiver preenchido com elementos que possuem nomes de classes como “vermelho” ou “esquerdo”, que são nomes que ditam como os elementos devem ser, em vez de como eles são, você está cruzando a linha entre estrutura e estilo.
Desvantagens de várias classes
A maior desvantagem de usar várias classes simultâneas em seus elementos é que isso pode torná-los um pouco difíceis de observar e gerenciar ao longo do tempo. Pode ser difícil determinar quais estilos estão afetando um elemento e se algum script o afeta. Muitos dos frameworks disponíveis hoje, como o Bootstrap, fazem uso intenso de elementos com várias classes. Esse código pode ficar fora de controle e difícil de trabalhar muito rapidamente se você não for cuidadoso. Ao usar várias classes, você também corre o risco de o estilo de uma classe substituir o estilo de outra. Essa colisão pode tornar difícil descobrir por que seus estilos não estão sendo aplicados, mesmo quando parece que deveriam. Fique atento à especificidade, mesmo com os atributos aplicados a esse elemento. Usando uma ferramenta como as ferramentas para webmasters no Google Chrome, você pode ver mais facilmente como suas aulas estão afetando seus estilos e evitar esse problema de estilos e atributos conflitantes.
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Como usar várias classes CSS em um único elemento.” ThoughtCo, 2 de junho de 2021, thinkingco.com/using-multiple-classes-on-single-element-3466930.
Kyrnin, Jennifer. (2021, 2 de junho). Como usar várias classes CSS em um único elemento. Obtido em https://www.thoughtco.com/using-multiple-classes-on-single-element-3466930
Kyrnin, Jennifer. “Como usar várias classes CSS em um único elemento.” ThoughtCo. https://www.thoughtco.com/using-multiple-classes-on-single-element-3466930 (acessado em 3 de junho de 2021).