3.1 Identificando e Agrupando Elementos Classes e Id

Curso Tcnico Integrado em Informtica para Internet
Web Design I Prof. Mauricio Covolan Rosito
Notas de Aula
3.1 Identificando e agrupando elementos (classes e id)

3.1.1 Introduo
Em alguns casos voc deseja aplicar estilos a um elemento ou grupo de elementos em particular. Nesta aula veremos como usar class e id para estilizar elementos. Como definir uma cor para um determinado cabealho, diferente da cor usada para os demais cabealhos do website? Como agrupar links em diferentes categorias e estilizar cada categoria diferentemente? Estas so algumas das questes que vamos ver agora.
3.1.2 Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na produo de vinho branco e de vinho tinto. O cdigo HTML conforme mostrado abaixo: <html> <head> <title> Exemplo class </title> </head> <body> <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> </body> </html> Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na pgina permaneam 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: <html> <head> <title> Exemplo class </title> </head> <body> <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>

Notas de Aula
<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> </body> </html> Agora podemos definir propriedades especficas para links pertencentes as classes whitewine e redwine, respectivamente. <html> <head> <title> Exemplo class </title> <style type="text/css"> a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; } </style> </head> <body> <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> </body> </html> Como mostrado no exemplo acima, pode-se definir propriedades para estilizao dos elementos pertencentes a uma determinada classe usando um .nomedaclasse na folha de estilos do documento.

Notas de Aula 3.1.3 Identificando um elemento com uso de id

Alm de agrupar elementos podemos querer atribuir identificao a um nico elemento. Isto feito usando o atributo id. O que h de especial no atributo id que no 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 identificao usamos o atributo class. A seguir um exemplo de possvel uso de id: <html> <head> <title> Exemplo 2 class </title> </head> <body> <h1>Captulo 1</h1> <p> texto texto texto </p> <h2>Captulo 1.1</h2> <p> texto texto texto </p> <h2>Captulo 1.2</h2> <p> texto texto texto </p> <h1>Captulo 2</h1> <p> texto texto texto </p> <h2>Captulo 2.1</h2> <p> texto texto texto </p> <h3>Captulo 2.1.2</h3> <p> texto texto texto </p> </body> </html> O exemplo acima simula os cabealhos de um documento estruturado em captulos e pargrafos. comum atribuir uma id para cada captulo como mostrado a seguir: <html> <head> <title> Exemplo 2 class </title> </head> <body> <h1 id="c1">Captulo 1</h1> <p> texto texto texto </p> <h2 id="c11">Captulo 1.1</h2> <p> texto texto texto </p> <h2 id="c12">Captulo 1.2</h2> <p> texto texto texto </p> <h1 id="c2">Captulo 2</h1> <p> texto texto texto </p> <h2 id="c21">Captulo 2.1</h2> <p> texto texto texto </p> <h3 id="c212">Captulo 2.1.2</h3> <p> texto texto texto </p> </body> </html>

Notas de Aula
Vamos supor que o cabealho do captulo 1 deva ser amarelo e o captulo 1.2 deva ser na cor vermelha. Isto pode ser feito conforme mostrado na folha de estilo a seguir: <html> <head> <title> Exemplo 2 class </title> <style type="text/css"> #c1 { color: yellow; } #c12 { color: red; } </style> </head> <body> <h1 id="c1">Captulo 1</h1> <p> texto texto texto </p> <h2 id="c11">Captulo 1.1</h2> <p> texto texto texto </p> <h2 id="c12">Captulo 1.2</h2> <p> texto texto texto </p> <h1 id="c2">Captulo 2</h1> <p> texto texto texto </p> <h2 id="c21">Captulo 2.1</h2> <p> texto texto texto </p> <h3 id="c212">Captulo 2.1.2</h3> <p> texto texto texto </p> </body> </html> Como mostrado no exemplo acima, podemos definir propriedades para um elemento especfico usando um seletor #id na folha de estilos para o documento.

3.1 Identificando e Agrupando Elementos Classes e Id

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

3.1 Identificando e Agrupando Elementos Classes e Id

Загружено:

Авторское право:

Доступные форматы

Curso Tcnico Integrado em Informtica para Internet

Web Design I Prof. Mauricio Covolan Rosito