|
Parabéns! Você chegou à
última lição da
fase Iniciante do Cantinho da Formatação!
Em algumas
lições anteriores dissemos que era possível usar 2 tags STYLE (um
embaixo do outro), o primeiro contendo as definições de posição de
background, margens, fonte e o segundo com o código da moldura e da
barra de rolagem colorida. Vejamos como reuni-los em um
só.
Vamos supor que estivesse assim a
Origem, com o código das margens e da moldura/barra de rolagem
colorida:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML><HEAD>
<META
http-equiv=Content-Type content="text/html;
charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16587" name=GENERATOR>
<STYLE>BODY {
BACKGROUND-POSITION:
left top; MARGIN-TOP: 20px; FONT-SIZE: 10pt; MARGIN-LEFT: 200px;
COLOR: #000080; BACKGROUND-REPEAT: repeat; FONT-FAMILY: Comic Sans
MS
}
</STYLE>
<STYLE>BODY {
BORDER-RIGHT: #9386a2
5px inset; BORDER-TOP: #9386a2 5px outset;
SCROLLBAR-HIGHLIGHT-COLOR: #9386a2; BORDER-LEFT: #9386a2 5px outset;
SCROLLBAR-SHADOW-COLOR: #9386a2; SCROLLBAR-3DLIGHT-COLOR: #632d45;
SCROLLBAR-ARROW-COLOR: #9386a2; SCROLLBAR-TRACK-COLOR: #f7e189;
BORDER-BOTTOM: #9386a2 5px inset; SCROLLBAR-BASE-COLOR:
#f7e189
}
</STYLE>
</HEAD>
Vamos
reuni-los em um só tag STYLE?
Delete as duas partes que marquei
em amarelo e algum espaço que tiver entre eles
Vai ficar
assim:
MODO 1
<STYLE>BODY
{
BACKGROUND-POSITION: left top; MARGIN-TOP: 20px;
FONT-SIZE: 10pt; MARGIN-LEFT: 200px; COLOR: #000080;
BACKGROUND-REPEAT: repeat; FONT-FAMILY: Comic Sans
MS
}
BODY {
BORDER-RIGHT: #9386a2 5px inset;
BORDER-TOP: #9386a2 5px outset; SCROLLBAR-HIGHLIGHT-COLOR:
#9386a2; BORDER-LEFT: #9386a2 5px outset;
SCROLLBAR-SHADOW-COLOR: #9386a2; SCROLLBAR-3DLIGHT-COLOR:
#632d45; SCROLLBAR-ARROW-COLOR: #9386a2;
SCROLLBAR-TRACK-COLOR: #f7e189; BORDER-BOTTOM: #9386a2 5px
inset; SCROLLBAR-BASE-COLOR:
#f7e189
}
</STYLE> |
A DICA então é
essa: copie o código acima em um .txt e guarde em uma pasta de fácil
acesso.
Sempre que quiser usá-lo, basta deletar o tag STYLE
marcado em amarelo abaixo
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML><HEAD>
<META
http-equiv=Content-Type content="text/html;
charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16587" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY
bgColor=#ffffff>
<DIV> </DIV></BODY></HTML>
E
colar no mesmo lugar o código que está acima (MODO 1).
Depois,
claro, a cada formatação deverão ser feitas as adequações
necessárias nos valores das margens, cores, estilo de moldura,
espessura de borda, fonte, etc.
Já sei que alguém vai
perguntar: "Tia Zoia... e eu não posso reunir mais ainda?
Retirando aquele } que está no meio dos dois códigos ... e a palavra
BODY { que está logo a seguir? "
Pode sim... e ficaria
dessa forma:
MODO 2
<STYLE>BODY
{
BACKGROUND-POSITION: left top; MARGIN-TOP: 20px;
FONT-SIZE: 10pt; MARGIN-LEFT: 200px; COLOR: #000080;
BACKGROUND-REPEAT: repeat; FONT-FAMILY: Comic Sans MS;
BORDER-RIGHT: #9386a2 5px inset; BORDER-TOP: #9386a2 5px
outset; SCROLLBAR-HIGHLIGHT-COLOR: #9386a2; BORDER-LEFT:
#9386a2 5px outset; SCROLLBAR-SHADOW-COLOR: #9386a2;
SCROLLBAR-3DLIGHT-COLOR: #632d45; SCROLLBAR-ARROW-COLOR:
#9386a2; SCROLLBAR-TRACK-COLOR: #f7e189; BORDER-BOTTOM:
#9386a2 5px inset; SCROLLBAR-BASE-COLOR:
#f7e189
}
</STYLE>
|
Para quem está
iniciando no estudo destes códigos de HTML creio que o MODO 1 fica mais
fácil na
hora de fazer as alterações (dimensões, cores, etc.), mas fica a seu
critério adotar o Modo 1 ou o 2 (o código é exatamente o
mesmo).
O importante é:
a) sempre que possível use as
MARGENS e EVITE usar as setas de recuo ou avanço de texto;
b) nenhuma formatação
estará completa se não contiver a moldura e a barra de rolagem
colorida. O conhecimento e uso dos códigos de moldura e barra de
rolagem colorida é obrigatório em todas as lições da fase Avançada do Cantinho da
Formatação.
c) o lugar do tag
STYLE é lá no alto, no início da Origem, dentro do HEAD e deve-se
evitar usá-lo no meio ou final do HTML (no BODY). Isso porque nossas
formatações a partir da fase Avançada trarão novas linguagens,
usaremos scripts, a Origem vai ficar bem mais complexa .. e se você
tiver de alterar apenas as cores da moldura, por exemplo, vai ficar
mais difícil localizar o código da moldura no meio de tantos
comandos. Habitue-se, pois, a usar os códigos de estilo SEMPRE no
início da Origem.
d) presentinho:
pegue AQUI um arquivo .txt que
traz o código a ser colado no tag STYLE quando usamos um background
tile, ou um top, ou um background com imagem na lateral esquerda. Os
valores e cores são exemplificativos. Você deverá adequar sempre à
sua formatação. Guarde esse .txt em uma pasta de seu uso diário e
use-o nas lições da fase Avançada sempre que for necessário.
Sua Lição:
apresentar à lista uma formatação de top, conforme orientado na
lição 19, mas agora englobando os dois tags STYLE em um único.
Acrescente o código do alinhamento centralizado para o texto (não
centralize pela aba Editar) e a margem direita em igual valor ao da
margem esquerda. Apresente-a com texto, som, cuide do tamanho em kb
para não exceder o limite e use recursos antibanner. Capriche!
... E seja
bem-vindo (a) à fase Avançada do Cantinho da
Formatação! |
