English | >> Português << | По-русскиZVON > Tutorials > CSS tutorial
>> Exemplo 9 << | Anterior | Próximo | Conteúdos

Descrição

Por vezes gostaríamos de distinguir entre elementos do mesmo nome. Nestes casos o atributo "class" pode ser muito útil. Nas folhas de estilo o elemento é indicado pelo seu nome, seguido por um "." e o valor do atributo "class".

>> Case 1 <<
Documento HTMLfolha de estilos CSS

<div> div: 000 </div>
<div class = "aaa"> div: aaa </div>
<div class = "bbb"> div: bbb </div>
<div class = "ccc"> div: ccc </div>
<p> p: 000 </p>
<p class = "aaa"> p: aaa </p>
<p class = "bbb"> p: bbb </p>
<p class = "ccc"> p: ccc </p>
body {background-color: white;  color: black}

div {color: white; background-color:navy}
div.aaa {color: aqua; background-color: green}
div.bbb {color: maroon; background-color: yellow}

p.aaa {color: green}
p.bbb {color: maroon}
p.ccc {color: purple}

Resultado do Navegador