Formatando o HTML usando a Subclasse Style

Nos artigos introdutórios sobre DHTML falei bastante sobre a subclasse style, que está presente em praticamente todos os exemplos que desenvolvemos. Agora vamos nos aprofundar um pouco mais no estudo sobre ela, conhecendo seus principais atributos e a forma correta de usa-la em nossas paginas HTML.

A Subclasse Style

Subclasse nada mais é que uma classe que define um objeto que deve ser incluído como atributo de um objeto pai, alterando as caracteristicas desse objeto pai. Complicou? até parece, mas fora a definição, o conceito é simples: o objeto definido por uma subclasse não pode existir sozinho, deve ser sempre atributo de outro objeto, pois seus métodos e propriedades não afetam diretamente à ele, mas sim ao objeto que o contém. Assim acho que fica mais simples. Vamos ver então o que é a subclasse Style:

A Subclasse Style define um objeto com atributos próprios, mas que não pode existir sozinho no Html, deve sim ser um atributo de qualquer tag Html (salvo raras excessões). Os atributos desse objeto não alteram diretamente o próprio objeto, mas sim propriedades do objeto Html que o contém. Mais adiante isso ficará mais claro. Para que o objeto pai reconheça o objeto criado pela subclasse Style e para que este possa alterar propriedades diretamente no objeto pai, é convencionado que ele deve ser atribuido a um atributo do objeto pai chamado style. Adiante veremos a sintaxe correta de declaração e definição do objeto style e suas propriedades.

A Subclasse Style não acompanha o Html desde o advento da Internet, pois só se fez necessário o acesso à propriedades internas dos objetos Html após o advento do DHTML. Por isso a Subclasse Style só pode ser encontrada no HTML 4.0, e só é reconhecida nos navegadores IE e Netscape a partir das versões 4.0. Outros navegadores também podem reconhecer a subclasse style se estes interpretarem Html 4.0.

Como navegadores que interpretam o Html 3.0 estão fora de linha ha mais de 8 anos, creio que vale a pena usar a subclasse style para programar os comportamentos DHTML. Vai ser muito raro um usuário nos dias de hoje, cujo navegador não interprete Html 4.0. Mesmo os usuários de outros Sistemas Operacionais, como o Linux e o Mac OS/2 já contam com suporte à DHTML e JavaScript há anos...

Definição e Sintaxe do Objeto Style

Por definição, qualquer atributo de objeto Html deve ser declarado seguindo a sintaxe a seguir:

nome_atributo="valor"

Assim também se faz para declarar o objeto style em um objeto Html:

style="definição_do_objeto"

A definição do objeto style nada mais é que uma sequencia de caracteres que definem as propriedades do objeto. Como o objeto style possue mais de uma centena de atributos, todos eles já possuem um valor default definido, e só devemos informar na definição do objeto os atributos para os quais desejamos alterar o valor default.

A sintaxe da definição dos atributos da subclasse style se parece muito com a definição dos atributos dos objetos Html. Abaixo a sintaxe da declaração de cada atributo da subclasse style:

nome_atributo: valor;

Como você pode ver, as diferenças mais relevantes são: não se usa aspas (") no valor, o sinal de atribuição é o dois-pontos (:) e após o valor usa-se ponto-e-virgula (;).

A definição do objeto nada mais é que uma sequencia de duplas nome_atributo: valor;. Todo valor deve ser sucedido de ponto-e-virgula, exceto o ultimo, onde este sinal é facultativo (eu gosto de usar...).

Assim a declaração de um objeto style segue a sintaxe seguinte:

style="nome_atributo1: valor1; nome_atributo2: valor2; ... nome_atributoX: valorX"

Um exemplo de definição de um objeto style (este define o tamanho da fonte, a cor do texto e a cor de fundo):

style="font-size: 12px; color: green; background-color: #E9F7E1;"

Os Principais Atributos da Subclasse Style

Vamos conhecer os principais atributos da subclasse style. Alguns deles tem atributos correspondentes em grande parte dos objetos Html, mas mesmo assim é necessário conhecê-los, pois quando iniciarmos nosso estudo sobre CSS (proximo artigo) será necessário conhecer os nomes e valores permitidos de cada atributo.

Vamos primeiro aos mais usados, depois vou passar a definição dos mais simples e menos usados.

font-family

É um dos atributos mais complexos de se usar, por ter uma sintaxe diferenciada. Não definimos qual a fonte que será usada, mas sim sugerimos uma lista, que o navegador deve analizar e usar a primeira fonte da lista que estiver instalada no cliente.

O termo family se refere ao fato de normalmente informarmos famílias de fontes, e não seus nomes, nessa lista. Por exemplo: quero que um paragrafo meu seja exibido com a fonte Comic Sans MT2, mas pode ser que meu cliente não tenha essa fonte instalada, então informo apenas Conic como sendo a família da fonte, e se ele não possuir a fonte Comic Sans MT2, será exibida a fonte Comic Sans MS (padrão do windows, quase todo mundo tem) ou mesmo alguma outra da mesma família. Uma família define fontes com desenho gráfico parecidos, que tem sempre o primeiro nome em comum.

Mas ainda seguindo meu exemplo acima, pode ser que o usuário tenha as duas fontes (MT2 e MS) instaladas no seu micro. Então eu quero que o navegador exiba com a fonte Comic Sans MT2, mas a outra é padrão. Para que o navegador saiba qual é a minha primeira opção, normalmente eu inicio a lista com o nome da fonte que desejo, depois coloco o nome da sua família, para que seja usada outra fonte da família só se a fonte definida não estiver instalada.

Mas ainda pode ser que não tenha nenhuma fonte daquela família instalada, então devo informar outras famílias na lista, para que a primeira que for encontrada no cliente seja usada. Se nenhuma fonte, das famílias informadas for encontrada, então será usada a fonte padrão do navegador.

Sintaxe: A sintaxe do font-family segue algumas regras:

• Os itens da lista são separados por virgulas, sussedidas sempre por espaço (antes do próximo item);
• Os nomes de fonte devem estar entre aspas (") ou apóstrofes (');
• Os nomes de famílias de fonte não devem estar entre aspas ou apóstrofes.

Assim, um exemplo de definição da fonte seria:

font-family: "Times New Roman", Times, serif;

Assim, se for encontrada a fonte Times New Roman, ela será usada, senão será usada qualquer uma da família Times. Se não existir nenhuma instalada, será usada a fonte pradrão da família serif (que é default do IE).

font-size

O atributo font-size é um dos que não podem ser acessados diretamente. As definições de tamanho de fonte nos objetos Html usam a notação de pontos que variam de 1 a 7, e os tamanhos reais (pixels ou pontos de impressão) variam de navegador para navegador. Por exemplo: no IE o tamanho 2 equivale a 14 pixels, já no Netscape equivale a 12 pixels.

Mas o atributo font-size permite definir o tamanho da fonte em pixels (px) ou pontos de impressão (pt), bastando informar o número seguido da notação px ou pt.

Exemplo: font-size: 18px;

font-weight

Atributo que define o peso da fonte. Assume valores como Negrito, Negrito Forte, Negrito Claro ou um valor em uma escala numérica. Não vou entrar na definição da escala numérica, vou me ater aos valores definidos. São eles:

• bold: Negrito
• boder: Negrito Forte
• lighter: Negrito Claro
• normal: Normal

Como normal é o valor defautl, não é comum definir esta propriedade com esse valor. Os valores bolder e lighter dependem de como o navegador interpreta-os. Já o valor bold é equivalente as tags <b> ou <strong>.

Exemplo: font-weight: bold;

font-style

O Estilo define se a fonte é inclinada. Os estilos disponíveis são Itálico e Oblícuo, sendo o estilo oblícuo identico ao itálico tanto no IE quanto no Netscape. O Estilo Itálico é equivalente as tags <i> ou <em>. Vamos aos valores:

• italic: Itálico
• oblique: Oblícuo
• normal: Normal

Novamente, o valor normal é default, por isso não se usa definir a propriedade com esse valor.

Exemplo: font-style: italic;

text-decoration

A decoração do texto são os efeitos gráficos que podem ser alcançados para exibição do texto. Os valores permitidos são:

• underline: Sublinhado. Equivale a tag <u>
• line-through: Tachado. Equivale a tag <s>
• overline: Sobrelinha.
• blink: Piscar. Equivale a tag <blink>

Estes valores podem ser combinados, devendo ser separados por um espaço em branco, sem virgulas ou qualquer outro sinal de pontuação. O valor default desse atributo é none, que define que o texto não deve ter nenhuma decoração.

Exemplo: text-decoration: underline blink;

text-align

Define o alinhamento do texto. Os valores são:

• left: alinha à esquerda.
• center: alinha ao centro.
• right: alinha à direita.
• justify: justifica o texto, ou seja, alinha às duas margens.

Exemplo: text-align: center;

vertical-align

Define o alinhamento vertical do texto na área do objeto. Os valores são:

• top: alinha junto à margem superior do objeto.
• middle: alinha ao centro vertical do objeto.
• bottom: alinha junto à base do objeto.

Exemplo: vertical-align: middle;

color

Define a cor da fonte. São permitidas todas as palavras-chaves do Html, como green, blue, black ... Também são permitidos valores Hexadecimais que definem a cor (precedidos sempre por #).

Exemplo: color: #FF9966;

background-color

Define a cor de fundo do objeto. São permitidos os mesmos valore do atributo color.

Exemplo: background-color: yellow;

background-image

Define a imagem de fundo da página web ou de um objeto. Deve ser informada a URL da imagem, seguindo a sintaxe seguir:

URL(url_da_imagem)

Exemplo: background-image: url(../imagens/fundo.gif);

background-attachment

Define como a imagem deve ser anexada ao Html. Só funciona para a imagem de fundo da página. Alguns navegadores permitem que o fundo permaneça fixo, e que o texto role por cima dele. Esse comportamento é obtido atribuindo a esse atributo o valor fixed. O valor default desse atributo é scroll, onde a imagem do fundo rola junto com o texto.

Exemplo: background-attachment: fixed;

background-repeat

Define se a imagem de fundo será repitida quando a area da página ou do objeto for maior que a imagem. Os valores permitidos são:

• no-repeat: não ha repetição. A imagem é mostrada apenas uma vez, e o restante da área (se houver) fica sem fundo.
• repeat-x: a imagem é repetida horizontalmente, mas verticalmente só é exibida uma vez.
• repeat-y: a imagem é repetida verticalmente, mas horizontalmente só é exibida uma vez.
• repeat: valor default, faz com que a imagem se repita em ambas as direções.

Exemplo: background-repeat: no-repeat;

background-position

Define a posição que a imagem de fundo será exibida em um objeto ou página Html. Se o atributo background-repeat tiver o valor no-repeat, define a posição em que a imagem será exibida. Se a imagem for ser repetida, em qualquer direção, esse atributo define a posição que deverá ser tomada como ponto de partida para as repetições.

O valor da propriedade background-posititon é composto por um par de valores, onde o primeiro deve informar a posição horizontal e o segundo a posição vertical. Os valores da posição horizontal são:

• left: alinha à esquerda. A imagem (ou sua primeira ocorrencia, se houver repetição) é exibida junto à margem esquerda da página ou do objeto. Este é o valor default.
• center: alinha ao centro. A imagem (ou sua primeira ocorrencia) é exibida no centro horizontal da página ou objeto. Se houver repetição, a repetição ocorrerá para ambos os lados.
• right: alinha à direita. A imagem (ou sua primeira ocorrencia) é exibida junto à margem direita da página ou objeto. Se houver repetição, as imagens se sussederão da direita para a esquerda, e se for necessário cortar uma imagem para caber, o corte ocorrerá junto à margem esquerda.

Os valores da posição vertical são os seguintes:

• top: alinha no topo. A imagem (ou sua primeira ocorrencia) é exibida no topo da página ou objeto. É o valor default.
• center: alinha no centro. A imagem (ou sua primeira ocorrencia) é exibida no centro vertical da página ou objeto. Se a imagem for fundo da página, a posição dependerá também do valor de background-attachment, pois se o valor desta propriedade for fixed, a imagem aparecerá no centro da tela do navegador, já se for scroll, a imagem aparecerá no centro da pagina Html.
• bottom: alinha na base. A imagem (ou sua primeria ocorrencia) é exibida na base da página ou objeto. Se a imagem for fundo da página, a posição dependerá também do valor de background-attachment, pois se o valor desta propriedade for fixed, a imagem aparecerá na base da tela do navegador, já se for scroll, a imagem aparecerá na base da pagina Html.

O valor da propriedade background-position deve sempre ser formado por uma dupla de valores, os quais devem ser separados por espaço em branco, sem nenhum sinal de pontuação entre eles. Se apenas um dos valores for informado, o atributo será ignorado, e será assumido o valor default que é left top.

Exemplo: background-position: center top;

border

O atributo border é sem dúvida o mais complexo. Vamos estudá-lo por partes.

Primeiro vamos ver como definir quais bordas serão afetadas pela formatação. Um objeto Html que possue bordas, terá sempre quatro bordas, acima, abaixo, à esquerda e à direita. O atributo border pode ser escrito de cinco formas. São elas:

• border-top: a formatação é aplicada apenas à borda superior.
• border-left: a formatação é aplicada apenas à borda esquerda.
• border-right: a formatação é aplicada apenas à borda direita.
• border-bottom: a formatação é aplicada apenas à borda inferior.
• border: a formatação é aplicada às quatro bordas do objeto.

As quatro primeiras notações são usadas como se fossem atributos distintos. Por exemplo: border-top: 1px solid #CCCCCC;

Pode-se combinar as notações de bordas específicas, definindo-se formatação diferenciada à cada borda do objeto. Se for usada a notação border, ela anula qualquer outra notação de alguma borda específica.

Agora vamos aos valores do atributo border. Esse assunto já foi abordado no artigo Introdução ao DHTML - Parte II, mas vamos voltar a falar sobre ele.

O valor do atributo border é composto por três valores, separados por espaços em branco. O primeiro valor é a expessura da borda, o segundo valor é o estilo da borda e o terceiro valor é a cor da borda. Se o estilo for tridimensional, o terceiro valor deve representar a variante da cor (pois serão usados efeitos de sombra).

A tabela abaixo mostra os valores permitidos:

O valor do atributo border deve ser formado pela combinação dos valores acima descritos. Se o estilo da borda for tridimensional, a espessura não pode ser definida por valores numéricos, deve ser definida por thin, medium ou thick.

Vamos a um exemplo completo para exemplificar melhor. Observe o código abaixo (a definição da borda aparece destacada):

<div align="center" style="width: 200px; border-top: thin solid #CCCCCC; border-left: thin solid #FFFFFF; border-right: thin solid #FFFFFF; border-bottom: thin solid #CCCCCC;">Observe as bordas desse paragrafo.</div>

Abaixo está o resultado do código acima. Note que as bordas top e bottom tem cor cinza (#CCCCCC), já as bordas direita e esquerda tem com branca (#FFFFFF), e assim não aparecem, pois o fundo também é branco.

Poderia ter usado a espessura das bordas para que as laterais não fossem exibidas, mas existem algumas limitações de utilização do atributo border. Veja as principais:

• Nem todos os navegadores aceitam valores numéricos na espessura. Por isso procure sempre usar as notações.
• Nem todos os navegadores aceitam estilos tridimensionais. Alguns exibem linhas sólidas se o estilo for tridimensional.
• Somente o IE permite que as bordas tenham espessuras distintas entre si. Qualquer outro navegador vai considerar a borda mais espessa para todo o contorno. Por isso usei a cor para fazer as bordas laterais ficarem invisíveis.

Os atributos de configuração das bordas de um objeto, junto com os atributos color, backgrond-color e display são os mais usados em projetos graficos de DHTML (animações e outros recursos visuais).

display

O atributo display determina se o objeto será exibido ou não. Deve ser usado com cuidado, pois pode provocar efeitos indesejáveis no Html, como por exemplo alterar toda a visualização de uma tabela se uma célula é ocultada.

O único valor aceito é none, que deternima que o objeto não será exibido. Para que o objeto seja exibido, basta não incluir esse atributo na declaração do objeto Style.

Exemplo: display: none;

top

Atributo que determina a posição inicial de um objeto. Se o objeto estiver solto na extrutura da página (um <div> ou <span> por exemplo) ele terá sua borda superior na altura determinada por essa propriedade, lembrando que isso não funciona com objetos contidos em outros objetos, mas somente em objetos soltos, independente do Html.

Exemplo: top: 150px;

left

Esse atributo também determina a posição inicial de um objeto. Se o objeto estiver solto na extrutura da página ele terá sua borda esquerda na posição determinada por essa propriedade. Também não funciona se o objeto estiver contido em outros objetos.

Exemplo: left: 300px;

width

Determina a largura de um objeto, em pixels (px) ou pontos (pt).

Exemplo: width: 250px;

height

Detemina a altura de um objeto, em pixels (px) ou pontos (pt)

Exemplo: height: 180px;

position

Esse atributo tem uma função específica no Html: criar o objeto livre da estrutura do restante da página. Sempre que um objeto tiver posição absoluta (absolute), estará solto sobre o Html, e os valores top e left contarão a partir das bordas superior e direita da página. O valor defautl dessa propriedade é relative, que prende o objeto ao Html. Se o valor dessa propriedade tentar ser alterado via Javascritp, vai gerar um erro.

Exemplo: position: absolute;

margin

Define a largura da margem de uma página. É usado apenas na tag <body>, não tendo efeito em outras tags. Pode ser configurado como da mesma forma que o atributo border, ou seja, definido cada margem com uma medida. Para isso, usamos os valores:

• margin-top
• margin-left
• margin-right
• margin-bottom

Para definir valores iguais para todas as margens, basta usar a notação margin.

Os valores são definidos em pixels. O valor default é auto, e determina que deve ser usada a margem que está definida nas configurações do navegador.

Exemplo: margin: 25px;

padding

Alguns objetos permitem reservar um espaço entre as bordas internas e o conteúdo. Isso ocorre por exemplo em células de tabelas, divs e spans. A esse espaço chamamos enchimento (padding). A configuração pode ser feita como a das margens, usando-se as notações seguinte:

• padding-top
• padding-left
• padding-right
• padding-bottom

Para definir valores iguais para todos os lados do objeto, basta usar a notação padding.

Os valores são definidos em pixels.O valor defautl é 0.

Exemplo: padding-left:5px;

Herança de Formatações em HTML

Em Html temos um comportamento muito interessante, que é a herança de formatações. Posso definir uma tag font e incluir dentro dela uma tabela com um div com um paragrafo dentro que o texto do paragrafo terá a formatação da tag font. Para contornar isso, é comum usarmos a formtação da subclasse style, para não incluir outras tags font dentro da mesma estrutura, que pode tornar-se de dificil manutenção quando houver muitos objetos indentados.

Alem disso, usamos também a subclasse style para limpar a formatação em determinados objetos, bastando para isso atribuir os valores default.

Existe também a possibilidade de se atribuir, em tempo de execução, a formatação do objeto pai, atribuido-se a qualquer atributo da subclasse style o valor "" (em branco).

Mas isso tudo será assunto de próximos artigos, pois todos os conceitos contidos nesse artigo serão usados no estudo sobre CSS.

Nesse artigo conhecemos os principais atributos da subclasse Style. Muitos deles não serão usados diretamente no Html, pois existem tags correspondentes, ou atributos diretos das tags com o mesmo efeito.

A importancia de se usar a subclasse style está no fato de ser mais facilmente configuravel. Alem do mais, alguns desses atributos não estariam disponíveis para o Javascript acessar diretamente se fossem definidos no Html.

Outra razão pela qual conhecer esses atributos é o uso dos estilos CSS, que é o assunto do proximo artigo. Até lá, vale a pena dar mais uma lida nesse artigo, para compreender melhor o funcionamento de cada propriedade, pois durante os artigos de CSS vou ser pouco específico quanto ao funcionamento e sintaxe das declarações contidas nesse artigo. Este artigo será uma espécie de referência pra os proximos...

Até lá...

Elieser Carlos Topassi
Web Master - elieser_topassi@yahoo.com.br

São José do Rio Preto, SP