O documento discute conceitos importantes de layout e estilização em HTML e CSS, como: a importância do layout para a apresentação da página; a utilização de múltiplas colunas e divisões para organizar o conteúdo; e os principais atributos da subclasse de estilo CSS para formatar elementos como fontes, cores, bordas e posicionamento.

1. Html e CSS

2. Layout
● O layout de página web é muito importante para fazer um site
ficar bem apresentável.
● Sempre desenhe seu layout com muito cuidado.
● A maioria dos sites coloca seu conteúdo em múltiplas colunas,
com uma formatação parecida com uma revista ou jornal.
● Múltiplas colunas podem ser criadas usando-se tags de
<table> ou <div>.
● CSS é normalmente usado para posicionar elementos, ou para
criar cores de fundo ou aparências coloridas para as páginas.

3. Layout

4. Layout

5. 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.
● 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.

6. Subclasse 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.

7. Subclasse Style
● 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
● 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;"

8. Os Principais Atributos da
Subclasse Style
● Font-family: tipo da fonte
– Ex:
● font-family: "Times New Roman", Times, serif;
● Font-size: tamanho da fonte
– Ex:
● font-size: 18px;
●

9. Os Principais Atributos da
Subclasse Style
● 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
– EX:
● font-weight: bold;

10. Os Principais Atributos da
Subclasse Style
●
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;

11. Os Principais Atributos da
Subclasse Style
● 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;

12. Os Principais Atributos da
Subclasse Style
● 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;

13. Os Principais Atributos da
Subclasse Style
● 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;

14. Os Principais Atributos da
Subclasse Style
● 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;

15. Os Principais Atributos da
Subclasse Style
● 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;

16. Os Principais Atributos da
Subclasse Style
● 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;

17. Os Principais Atributos da
Subclasse Style
● 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);

18. Os Principais Atributos da
Subclasse Style
● 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;

19. Os Principais Atributos da
Subclasse Style
● 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;

20. Os Principais Atributos da
Subclasse Style
● Lef: 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;

21. Os Principais Atributos da
Subclasse Style
● 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;

22. Os Principais Atributos da
Subclasse Style
●
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;