Olá pessoal, aqui estamos para dar sequência na série sobre CSS no Delphi for PHP. Então vamos direto ao que interessa.
Class X ID
Em alguns casos você deseja aplicar estilos a um elemento ou grupo de elementos em particular. Como definir uma cor para um determinado cabeçalho, diferente da cor usada para os demais cabeçalhos do website? Como agrupar link em diferentes categorias e estilizar cada categoria diferentemente?
Simples, podemos identificar elementos ou grupos de elementos em nosso HMTL através de class e/ou ID e fazer referencia a eles em nossa Folha de Estilo, o fato é quando usar um ou outro.
Class são utilizadas em elementos que terão sofrerão alteração por um mesmo estilo, por exemplo: imagine que os links de uma lista específica receberão todos os mesmo estilo, diferente do restante do documento. Se fizéssemos pelo meto tradicional ( a { color: #00FF00 } ) todos os links do documento HMTL se apresentariam com a cor verde e não e o que queremos. Queremos que links específicos recebam esta formatação então identificamos estes links por uma classe desta maneira:
<p>Carros Nacionais:</p>
<ul>
<li><a href="gol.htm" class="nacional">Gol</a></li>
<li><a href="vec.htm" class="nacional">Vectra</a></li>
<li><a href="cel.htm" class="nacional">Celta</a></li>
</ul>
<p>Carros Importados:</p>
<ul>
<li><a href="cor.htm" class="importado">Corola</a></li>
<li><a href="civ.htm" class="importado">Civic</a></li>
<li><a href="fro.htm" class="importado">Frontier</a></li>
</ul>
Desta maneira podemos aplicar efeitos diferentes para cada um dos links bastanto para isso aplicar o estilo a classe específica:
Resultado Obtido:
Repare que para fazer referencia a uma classe em nosso HMTL utilizamos o caracter ( . ) ponto seguido do nome da nossa classe, no exemplo acima como a classe se referia a um elemento link colocamos a referencia completo a.nacional.
ID’s possuem a mesma função porém o estilo será aplicado a um e somente um elemento dentro do HTML, isto porque não podemos ter mais de um elemento com o mesmo ID. Geralmente ID é utilizado em conjunto com a tag <div> e <span> sendo mais comum sua utilização com a primeira.
Para fazermos referencia a um elemento identificado por um ID utilizamos o caracter ( # ) tralha nos arquivos CSS desta forma:
#Menu{
color: #45FFA0
}
#Menu ul li{
font: Arial, Garamond, sans-serif
}
Bem pessoal eu fico por aqui, na próxima quick veremos mais sobre CSS no Delphi for PHP. Abraços !!!!
