Parceria RicardoHorta.Net + SUBMARINO !!

Review.

• Você aprendeu em O atributo ID, como criar um identificador para a tag e formatá-la, definindo os valores dos atributos.
• Você criou 3 ID para a tag <p> ( azul, vermelha e verde ),...

• ...definiu quais seriam os parágrafos formatados e...

• ... o resultado alcançado foi este.

• Utilizando DHTML, você pode alterar, por exemplo, a o estilo, o tamanho e a cor da fonte, quando o usuário mover o mouse sobre o texto ou clicar em algum objeto ( botão, imagem, etc. ).

O objeto Style

• Se você não irá manipulá-lo através de uma função JavaScript, você não precisar criar um ID.
• Você pode utilizar o objeto Style e definir a formatação da tag. Neste exemplo, estou definindo o tamanho da fonte apenas para este parágrafo .

• E somente ele será formatado com este tamanho da fonte.

O seletor Class

• Imagine que você precise vários parágrafos com o mesmo estilo. Criar varios IDs ?
• É um caminho, mas não é o mais conveniente. A solução ideal é utilizar o seletor Class.
• Você cria uma variação do elemento HTML, podendo aplicá-la quantas vezes você quiser.

Quero um exemplo.

• OK. Veja a página abaixo. Observe os títulos "Quantas colunas ...", "Posso ter colunas", "Posso criar colunas", etc., etc.
• Eles estão com a mesma formatação das outras tags, criando um layout meio sem graça.
• Você pode criar uma formatação para ser aplicada somente neste parágrafos-títulos. Basta criar uma variação para a tag <P>.

Mas e os outros parágrafos do meu texto ?

• Não tem problema. Somente os parágrafos que você definir como sendo daquela classe receberão a formatação especial.

E os demais...

• Continuarão com a formatação padrão, ou a que você definir.

E o que eu devo fazer ?

• Em primeiro lugar, criar uma classe para a tag <P>.
• Insira na sua página a tag <style type="text/css">...</style>.

• Em seguida, crie a classe. A sintaxe é: tag.nomedaclasse { atributos };

Agora, eu defino quais parágrafos serão da classe paragrafotitulo ?

• Isto mesmo. Vejo que você entendeu.
• Para cada parágrafo que você deseja formatar, digite: <p class="paragrafotitulo">.

• E o resultado será este.

Quero alterar a formatação. Tenho que fazer esta alteração parágrafo por parágrafo ?

• Não. Claro que não. Basta alterar apenas a linha P.paragrafotitulo { ... } e todos os parágrafos desta classe serão alterados.
• Altere o atributo background-color ( cor do fundo ) para #FF0000 ( vermelha ) e...

• ... o resultado será este aí.

Uau ! A formatação fica centralizada ...

• ... numa linha. Eu disse: numa linha.

Muito bom ! Mas, eu consigo criar uma formatação que valha para todas as páginas ?

• Sim. E este será o nosso próximo assunto. Até agora, você tem definido as formatações para uma página. Mas você pode aplicar o mesmo conceito de classe, só que para todo o site.
• Se o seu site tiver 1000 páginas, você poderá alterar ou definir uma formatação para todas as páginas, centralizando a definição dos atributos num arquivo, com extensão. css.

Parceria RicardoHorta.Net + SUBMARINO !!

RicardoHorta.Net

Parceria RicardoHorta.Net + SUBMARINO !!

www.ricardohorta.net - Direitos adquiridos - Autor: Ricardo Horta do Nascimento - 05/02/2001