Jose Hamizaki
Designer Grafico
Dom 27 Jan 2013, 2:26 pm | |
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Exemplo
Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na página permaneçam na cor azul.
Para conseguir isto, dividimos os links em duas categorias. Isto é feito atribuindo uma classe para cada link, usando o atributo class.
Vamos especificar esta classe no exemplo a seguir:
- Código:
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Agora podemos definir propriedades específicas para links pertencentes as classes whitewine e redwine, respectivamente.
- Código:
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Exemplo
Como mostrado no exemplo acima, pode-se definir propriedades para estilização dos elementos pertencentes a uma determinada classe usando um .nomedaclasse na folha de estilos do documento.
Identificando um elemento com uso de id
Além de agrupar elementos podemos querer atribuir identificação a um único elemento. Isto é feito usando o atributo id.
O que há de especial no atributo id é que não poderá existir dois ou mais elementos com a mesma id, ou seja em um documento apenas um e somente um elemento poderá ter uma determinada id. Cada id é única. Para casos em que haja necessidade de mais de um elemento com a mesma identificação usamos o atributo class. A seguir um exemplo de possível uso de id:
- Código:
<h1>Capítulo 1</h1>
...
<h2>Capítulo 1.1</h2>
...
<h2>Capítulo 1.2</h2>
...
<h1>Capítulo 2</h1>
...
<h2>Capítulo 2.1</h2>
...
<h3>Capítulo 2.1.2</h3>
...
O exemplo acima simula os cabeçalhos de um documento estruturado em capítulos e parágrafos. É comum atribuir uma id para cada capítulo como mostrado a seguir:
- Código:
<h1 id="c1">Capítulo 1</h1>
...
<h2 id="c1-1">Capítulo 1.1</h2>
...
<h2 id="c1-2">Capítulo 1.2</h2>
...
<h1 id="c2">Capítulo 2</h1>
...
<h2 id="c2-1">CCapítulo 2.1</h2>
...
<h3 id="c2-1-2">Capítulo 2.1.2</h3>
...
Vamos supor que o cabeçalho do capítulo 1.2 deva ser na cor vermelha. Isto pode ser feito conforme mostrado na folha de estilo a seguir:
- Código:
#c1-2 {
color: red;
}
Exemplo
Como mostrado no exemplo acima, podemos definir propriedades para um elemento específico usando um seletor #id na folha de estilos para o documento.
Fonte: " target="_blank" rel="nofollow">http://pt-br.html.net/tutorials/css/lesson7.php">