Back
Você está aqui: Home 
Tutoriais HTML/CSS CSS CSS - Classes e IDs
Tutoriais HTML/CSS CSS CSS - Classes e IDs
CSS
CSS - Classes e IDs
Às vezes um parágrafo tem uma aparência diferente dos outros parágrafos em uma certa parte do texto. Para mudar o estilo dele, pode-se incluir as declarações em um atributo STYLE. Mas, se tal procedimento torna difícil a localização e a gerência dos estilos, pode-se usar um recurso para marcá-lo de forma que seja considerado diferente. Isto pode ser feito atribuindo-lhe uma identificação única. Em HTML 3.2, pode-se usar o atributo id:
<p id=w779>Texto especial</p>
Para alterar as características deste parágrafo agora, pode-se usar o seu id como seletor, da forma:
#w779 { color: cyan;
}
Se isto estiver em um arquivo CSS, todas as páginas que o usam e que tiverem um elemento com o id #w779 serão afetadas. Se houver mais de um com o mesmo id apenas o primeiro será afetado.
Melhor que usar id é agrupar características semelhantes em classes. Uma classe é uma variação de um determinado objeto. Por exemplo, um texto teatral pode ter três parágrafos com apresentação diferente, representando as falas de três personagens. Se quiséssemos que cada um tivesse uma cor diferente, poderíamos declarar cada um como sendo de uma classe distinta:
<p>Eu retiro o que disse, João</p>
<p>Retirando ou não retirando, o fato é que o cachorro
enterrou-se em latim</p>
<p>Um cachorro? Enterrado em latim? </p>
<p>Enterrado latindo, Senhor Bispo, Au, au, au, não sa-
be? </p>
Para dar a cada parágrafo de um mesmo personagem (mesma classe) os mesmos atributos, usa-se:
p.grilo {
color: maroon;
}
p.padre {
color: black:
}
p.bispo {
color: navy;
}
Desta maneira, todos os textos que deverão ser lidos pelo personagem "Bispo" estarão em azul marinho.
Uma classe também pode conter descritores diferentes. Se todos os textos citados por um certo autor tivessem que estar em outra cor ou fonte, poderíamos criar uma classe sem citar o descritor:
.verde {
color: green;
}
Todos os descritores que tiverem o atributo serão afetados, por exemplo:
<p>, <h3>, <table>, etc.
