RicardoHorta.Net - CSS - O atributo ID
Parceria RicardoHorta.Net + SUBMARINO !!
Padrão.
- Utilizando o HTML puro, você insere no mesmo local a definição
da estrutura, o conteúdo e a formatação da página.
- No documento HTML abaixo, não há separação entre as tags <p> ( estrutura ), o texto ( o
conteúdo ) e <font face="Arial" size="2" color="blue"> ( formatação ).
- A proposta, com a criação da linguagem de estilos Cascadying Style Sheets, é um pouco diferente.
- Estrutura e conteúdo ficam separados da formatação. Esta, fica num único local, que pode ser um
arquivo externo ( extensão .css ) ou entre o cabeçalho do documento ( <head>...</head> ).
- Utilizando CSS, você definiria assim a formatação dos parágrafos acima.
P {font-family:Arial,sans-serif; font-size:12; text-align:justify}
- Aqui, foi criada uma formatação para todos os parágrafos da página.
font-family:Arial, sans-serif
- Você não sabe se o computador do visitante tem a fonte Arial.
Então, passe como 2a. opção o nome genérico. Na ausência de Arial,
será utilizada outra fonte da mesma "família" sans-serif ( qualquer dúvida, veja
font-family ).
- O tamanho da fonte ( font-size ) será 12 e o alinhamento do texto ( text-align ), justificado.
- Em seguida, crie variações ( neste exemplo, utilizando a cor da fonte )
para a tag <p>, com a seguinte sintaxe:
tag#identidade { atributos }
ou seja
P#azul { color:"blue" }
P#vermelha { color:"red" }
P#verde { color:"green"}
- O próximo passo será associá-las aos parágrafos, utilizando o atributo ID. Este,
é único e só pode estar associado a uma tag no documento.
- O resultado será este aí.
- Você não precisa definir a fonte, o tamanho e o alinhamento do texto para cada variação da tag <p> ...
P#azul { color:"blue" }
...porque elas herdam a formatação da tag padrão: <p>.
P {font-family:Arial,sans-serif; font-size:12; text-align:justify}
E se eu utilizar outra fonte para, por exemplo, P#azul ?
- A sintaxe seria:
P#azul {font-family:Courier, color:"blue"}
- Neste caso, o atributo font-family
de P#azul prevalece sobre a tag padrão P.
JavaScript e Dynamic HTML.
- Criando ID para os elementos HTML, eles serão tratados como objetos.
- Objetos possuem propriedades que poderão ser alteradas através de funções
JavaScript.
É ai que entra em campo o interessante
DHTML ( Dynamic HTML ).
Facilidade para manutenção.
- Para alterar o tamanho ( de 12 para 14 ) da fonte de todos os parágrafos, mude somente
o atributo font-size desta linha e...
- ... todo o documento será alterado.
E se eu inserir mais parágrafos nesta página ?
Como eles serão formatados ?
- Veja, criei mais 2 parágrafos, sem o atributo ID.
- A formatação das 2 últimas tags <p> foi definida pelos atributos da tag padrão.
Parceria RicardoHorta.Net + SUBMARINO !!
RicardoHorta.Net
Parceria RicardoHorta.Net + SUBMARINO !!
www.ricardohorta.net - Direitos adquiridos - Autor: Ricardo Horta do Nascimento - 05/01/2001
