INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO
A partir do HTML 4.01, o único modo de alterar a letra (cor, tamanho, tipo, etc.) ou o fundo (cor ou imagem) é utilizando o atributo style Note-se que o documento inteiro pode ser alterado usando estilos Também podemos alterar partes do documento usando a tag div ou apenas algumas palavras numa linha usando a tag span 2
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" 3
A definição do objeto style nada mais é que uma sequência de caracteres que definem as propriedades do objeto Como o objeto style possui 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 4
A sintaxe da definição dos atributos do objeto style se parece muito com a definição dos atributos dos objetos HTML A sintaxe da declaração de cada atributo do objeto style: nome_atributo: valor; As diferenças mais relevantes são: não se usa aspas (") no valor, o sinal de atribuição é o doispontos (:) e após o valor usa-se ponto-e-virgula (;) 5
A definição do objeto nada mais é que uma sequência de duplas nome_atributo: valor; Todo valor deve ser sucedido de ponto-e-virgula, exceto o último, onde este sinal é facultativo Assim a declaração de um objeto style segue a sintaxe seguinte: style = "nome_atributo1: valor1; nome_atributo2: valor2;... nome_atributox: valorx" 6
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;" 7
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 analisar e usar a primeira fonte da lista que estiver instalada no cliente 8
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 seja exibido com a fonte Comic Sans MT2, mas pode ser que meu cliente não tenha essa fonte instalada, então informo apenas Comic 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 9
Uma família define fontes com desenho gráfico parecidos, que tem sempre o primeiro nome em comum 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. 10
Sintaxe: A sintaxe do font family segue algumas regras: Os itens da lista são separados por virgulas, sucedidas 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 11
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 padrão da família serif (que é default do IE) 12
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 variam de navegador para navegador Por exemplo: no IE o tamanho 2 equivale a 14 pixels, já no Netscape equivale a 12 pixels 13
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; 14
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 Os valores definidos são: bold: Negrito bolder: Negrito Forte lighter: Negrito Claro normal: Normal 15
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; 16
font style Define se a fonte é inclinada. Os estilos disponíveis são Itálico e Oblícuo, sendo o estilo oblícuo idêntico ao itálico tanto no IE quanto no Netscape. O Estilo Itálico é equivalente as tags <i> ou <em>. Valores: italic: Itálico oblique: Oblícuo normal: Normal 17
Novamente, o valor normal é default, por isso não se usa definir a propriedade com esse valor. Exemplo: font style: italic; 18
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> overline: Sobrelinha. line-through: Tachado. Equivale a tag <s> blink: Piscar. Equivale a tag <blink> 19
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; 20
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; 21
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; 22
color Define a cor da fonte. São permitidos os valores Hexadecimais que definem a cor (precedidos sempre por #). Exemplo: color: #FF9966; 23
background color Define a cor de fundo do objeto. São permitidos os mesmos valore do atributo color. Exemplo: background color: #00FF00; 24
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.jpg); 25
Esses são apenas alguns dos 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 importância de se usar a subclasse style está no fato de ser mais facilmente configurável Outra razão pela qual conhecer esses atributos é o uso dos estilos CSS 26