Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
aprender_css
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Manual de Programação
APRENDENDO C.S.S. , UMA ESTRUTURA PARA WEB.
Por André Marinho C.
O QUE É CSS?
Você não tem por que se intimidar com a perspectiva de usar as Folhas de Estilo em Cascata. Usar um
computador pode ser algo assustador quando se vai experimentar pela primeira vez, mas decorrido algum
tempo nem se pensa mais nas dificuldades iniciais. Tudo se resume, em se aprender por etapas e é isto
que eu vou fazer nesta série de tutoriais. Uma etapa de cada vez.
Quer você seja usuário de um editor WYSIWYG e conhecedor do código por ele gerado ou mesmo não
tenha sequer criado uma página Web, este tutorial vai orientá-lo na direção certa.
O tutorial pressupõe um pequeno ou nenhum conhecimento de produção de uma página Web. Ele trata o
assunto realmente ' do seu início'
O que vai ser preciso?
Nada especial. Se você tem acesso a um editor de página Web, ótimo. Se não, você pode usar qualquer
editor de texto - NotePad no PC ou SimpleText ou TextEdit em Mac. Se você é usuário do DreamWeaver
ou GoLive, iremos usar o modo de 'código'.
Não se apavore!
Um editor de imagens não será essencial, pois a princípio não irei me preocupar muito com criação de
imagens.
Oh, você irá precisar de um navegador, mas isto eu não precisava dizer. De fato, eu recomendo que você
tenha alguns diferentes navegadores. Se você só possui o Explorer, deveria instalar o Mozilla e alguns
outros que você poderá obter consultando qualquer listagem Browsers Atuais.
Se você desejar fazer upload de suas páginas para um servidor Web, vai precisar de um programa FTP,
mas não se preocupe com isto agora, pois poderá fazer tudo ensinado no tutorial, no seu próprio
computador.
ETAPA NÚMERO 1 - UMA PÁGINA BÁSICA
Antes de fazer qualquer coisa iremos precisar de uma página Web. E a seguir você tem uma página, a
mais básica possível.
<html>
<head>
</head>
<body>
Esta é a minha página Web
</body>
</html>
Temos aqui três conjuntos de 'tags' - as tags, normalmente são aos pares, mas nem sempre é assim.
Englobando toda a página temos o par de tags <html>...</html>. A primeira <html> é a 'tag de abertura' e
a 'tag' de fechamento é a mesma com uma / (barra) entre o sinal de 'menor que' (<) e html.
Dentro da tag <html> existem mais dois pares de tags.
<head>...</head> contém informações que não foram ainda colocadas no nosso exemplo, a mais
importante destas informações é o título da página que aparece na barra de títulos do navegador. Você
dá um título a sua página, escrevendo-o dentro da tag title, como mostrado a seguir...
<html>
<head>
<title>Minha Página</title>
</head>
<body>
Este é o conteúdo da minha página Web!
</body>
</html>
O par de tags <body>...</body> engloba todo o conteúdo da sua página Web, texto, imagens, filmes
Flash - e tudo mais. Você poderá digitar no seu editor de texto, na janela de código do seu editor
WYSIWYG - ou mesmo copiar colar o código da página básica mostrado acima.
Manual de Programação
Bem, agora temos uma página Web que é bem renderizada em qualquer navegador - depois que você
tiver 'salvado' ela. Dê a ela o nome de 'index.html' pois este é o nome apropriado para a primeira página
de qualquer Web site. Você poderá salvar o arquivo em qualquer lugar no hard disk do seu computador,
mas para tornar as coisas claras e em ordem, crie um novo diretório para salvar sua página Web.
O caminho normal para abrir sua página em um navegador é usar a opção 'Abrir' ('Open') no menu
'Arquivos' ('File') mas há um modo mais rápido. Crie um 'shortcut' do seu arquivo no desktop. Dali você
poderá arrastar o ícone do 'shortcut' direto para a janela do navegador e sua página será carregada e
mostrada!
Sua página deverá se parecer com esta »
Ainda que seja uma maravilha, sua página Web não possui um ingrediente vital - o conteúdo. Não há
sentido em uma página Web se ela não diz nada (ou outra coisa senão "Este é o conteúdo da minha
página Web!") mas isto eu vou deixar por sua conta.
Qualquer conteúdo deve ser colocado entre o par de tags<body>...</body> para que o navegador possa
renderizá-lo.
Encher de textos a página, assim como ela está, não dá uma estrutura e nem estiliza os textos. Por não
dar estrutura eu quero dizer que os textos simplesmente fluem da esquerda para a direita, de cima para
baixo, que as palavras não tem outra ênfase particular que não seja a ordem natural em que são escritas.
Faria muito mais sentido grupar palavras e sentenças em parágrafos, títulos, sub-títulos - bem, você deve
saber, aquelas coisas básicas de estruturação de textos que se aprende na escola.
Browsers ignoram qualquer pulo de linha ou parágrafos que você insira em uma porção de texto. Eles
ignoram também tabulações e até múltiplos espaços entre palavras que são interpretados como um
espaço único.
É útil em qualquer porção de texto marcar títulos, sub-títulos, alguns parágrafos e talvez até uma
assinatura final.
Em HTML, existem diferentes tags de marcação que se constituem no mecanismo apropriado para
estruturar os textos.
Cria-se um parágrafo, colocando texto entre o par de tags <p>...</p>. Em HTML, um parágrafo é um
bloco constituido de uma ou mais sentenças separado do próximo bloco por um espaço - tal como este
paragráfo que você vê aqui.
Para títulos, existem seis níveis distintos de ênfase, indo desde o mais alto nível <h1>...</h1> até o mais
baixo <h6>...</h6>. Eles são como mostrados a seguir...
Como você pode notar diminui o tamanho quando cresce o número que indica o nível sendo que o h4
equivale aproximadamente ao tamanho de texto chamado 'small' (pequeno). h5 e h6 são 'smaller'
(menor)
,mas em negrito.
Existem outros truques que podemos usar para dar ênfase a palavras ou frases. Antes de considerar
como eles devem ser apresentados (como deve se parecer), considere acima de tudo sua função.
Bold (negrito) é uma variante mais destacada que o texto normal e marcada com o par de tags
<b>...</b> contudo, trata-se de um estilo de apresentação para impressão e na Web é preferível usar-se
strong <strong>...</strong>. Embora elas (tags bold e strong) se pareçam iguais quando renderizadas na
tela de um monitor, o HTML deverá servir a outros dispositivos também. Softs leitores de tela usados por
pessoas portadoras de necessidades especiais para visão, entenderão perfeitamente <strong> e lerão
com a devida ênfase.
Você deve saber que itálico é conseguido com a tag <i>...</i>. E aqui também, é melhor você não se
utilizar de estilização visual, mas usar <em>...</em>. Este par de tags dá a funcionalidade do itálico ao
texto independentemente do dispositivo em uso.
Sublinhado pode ser conseguido com o par de tags <u>...</u> , mas sublinhados na Web tem um
significado especial. Usualmente indica um link. É melhor não usar sublinhado para enfatizar, pois esta
prática poderá confundir o visitante do site.
Uma importante tag é a de quebra de linha <br>. Ao contrário de outras tags, esta não requer uma tag de
fechamento, aliás tag de fechamento neste caso não faria qualquer sentido, não é mesmo?
Usando estas tags básicas de marcação, o texto começa a tomar forma. Ele se assemelhará a um texto
produzido em um processador de texto.
Esta página básica provavelmente se parecerá um pouco diferente quando visualizada em diferentes
Manual de Programação
navegadores e computadores. Cada navegador tem o seu próprio estilo padrão e a menos que você
configure seu navegador ele usará os estilos padrão. Para sobrescrever os estilos padrão dos
navegadores, nós criaremos nossos próprios estilos que serão agrupados em uma 'folha de estilos'.
ETAPA NÚMERO 2 - FOLHA DE ESTILOS
Uma folha de estilos é conceitualmente bem simples, ela é uma página contendo definições ou
especificações de estilos, que instrui o navegador como apresentar osdiferentes elementos de uma
página. Por enquanto, contenha sua curiosidade em saber o porquê de 'Cascata'. Eu voltarei a este
assunto mais tarde, quando começarmos a aplicar estilos no nosso HTML.
Para simplificar, começaremos construindo nossa folha de estilos dentro da própria página Web. Mais
adiante você descobrirá que pode ter sua folha de estilos em um 'arquivo externo de estilos' que pode ser
'chamado' por várias páginas, com a grande vantagem de se poder controlar através deste arquivo
mestre, os estilos de todas as páginas que lincam para ele.
Os estilos que iremos usar serão definidos dentro do par de tags <head>...</head> como mostrado a
seguir...
<style type="text/css" title="mystyles" media="all">
<!--
-->
</style>
Note o par de tags <style>...</style> e iremos explicar mais algumas coisas neste par.
type="text/css" diz ao navegador que estamos usando um arquivo de texto puro para descrever nossos
estilos, nada de especial aqui.
title="mystyles" tem por finalidade identificar seus estilos através de um nome de sua livre escolha.
media="all" aqui que as coisas começam a ficar interessantes. Você pode ter uma folha de estilos para
descrever como sua página será apresentada na tela de um computador (media="screen") e outra
completamente diferente para formatar sua página para impressão (media="print"). Existem outros tipos
de mídia, tais como 'projection', 'tv', 'braille' and 'aural' (projeção, televisão, escrita braille e áudio). Agora
você entenderá a lógica de não usar 'bold' e 'italic'. Por enquanto usaremos o tipo de mídia 'all' (todas as
mídias), que tem propósitos gerais.
Os caracteres <!-- e --> se constituem em um modo de se 'esconder' texto em uma página Web - você
verá os textos somente na marcação do código. Isto é denominado 'comentario', e uma vez que os estilos
estão dentro da seção <head>...</head> do documento, eles não deverão aparecer na apresentação.
A primeira coisa que faremos será definir os estilos para a página como um todo, o body da página. Tudo
que estiver dentro das tags <body>...</body> terá este estilo ou conjunto de estilos que lhe for aplicado.
Basicamente a definição de estilos para body se parece com...
body { }
body seguido por um par de 'chaves' { }.
Definiremos uma cor de fundo para a página...
Os navegadores por padrão, usualmente renderizam uma página na cor branca com textos na cor preta,
mas nós iremos definir um tom de cinza claro para o fundo da página. Abaixo a maneira pela qual
definimos uma cor de fundo para a página. Notar que não usamos sinal de igual '=' e sim dois pontos ':' .
body {background-color: #e8eae8 }
O que significa #e8eae8 ?
As cores na Web são definidas pela mistura de 256 tonalidades de vermelho, de verde e de azul em
diferentes proporções. Humanos tem dez dedos nas mãos e contam de dez em dez. Computadores foram
projetados para contar de dezesseis em dezesseis, não que eles tenham dedos, mas uma vez
ultrapassado o 9 (nove) não existe um numeral simples para representar 10, 11, 12, 13, 14, 15 assim
estes numerais foram substituidos por letras a, b, c, d, e , f. Desta forma, em um sistema de contagem
'hexadecimal' (base dezesseis) o 10 é representado pelo 'a' e o 15 pelo 'f'. Ao ultrapassar o 15, adicionase
mais um dígito e assim '10' representa o 16. Usando-se este sistema de contagem, qualquer número
entre 0 (zero) e 255 pode ser representado por dois números ou letras - 255 é ff. Então, #ffffff será o
branco e #000000 o preto.
A cor que escolhemos para nosso fundo é composta de vermelho e8(232), verde ea(234), azul e8(232). O
símbolo # ('tralha') indica que estamos usando numeração hexadecimal e não números decimais
ordinários.
Algumas vezes você encontrará a sintaxe com apenas três dígitos, por exemplo, #2a0. Isto é uma
abreviatura para #22aa00. Quando a cor é representada por uma numeração composta por três pares de
dígitos que se repetem dois a dois, você poderá omitir o segundo dígito que o navegador entenderá a
abreviatura.
Manual de Programação
Usando esta abreviatura com três dígitos você poderá obter 4096 cores diferentes, e com seis dígitos
mais de seis milhões de cores.
Com uso de um dígito por cor, vermelha, verde e azul, cada uma tendo 16 níveis de brilho é possível
combinações para obter todas as demais.
Se você estiver digitando seu código, esta técnica de usar abreviadamente três dígitos é bem mais
simples e eficiente.
De toda forma, vamos agora definir uma cor para os textos na nossa página, diferente da cor padrão
preta. Você poderá usar a ferramenta 'colour picker' do Photoshop (ou de outro programa gráfico) e
definir
então uma cor por um número hexadecimal de 6 dígitos...
body {background-color: #e8eae8; color: #5d665b }
Observe na regra acima que as cores do fundo e do texto estão separadas por um ponto e vírgula ';'.
Bastante cuidado com o uso apropriado de vírgulas e ponto e vírgulas pois a troca ou esquecimento delas
causará erros.
E agora, vamos definir margens ao redor da página para acertar o posicionamento dos textos
convenientemente na tela, vamos usar uma margem de 50px (margin: 50px) na definição das regras para
body. Esta nova definição separada da anterior por ponto e vírgula.
body { background-color: #e8eae8; color: #5d665b;
margin: 50px }
Agora tudo o que digitarmos na página será reprentado numa cor verde escura acinzentada sobre um
fundo cinza. Veremos adiante casos especiais em que iremos alterar isto.
ETAPA NÚMERO 3 - ESTILIZANDO TEXTO
Embora já tenhamos livrado nossa página do austero preto e branco, mudando para cores ao nosso
gosto, ainda podemos fazer muitas coisas. Podemos alterar o tipo e o tamanho das letras, o espaçamento
entre linhas e adicionar outros detalhes tal como indentação de parágrafos.
O estilo para fontes
Iremos trabalhar de início com o estilo das fontes (typeface) pois esta alteração fará uma diferença
marcante na página. Diferentemente de projetos para impressão, as páginas Web só conseguem mostrar
os tipos de fontes que estejam instalados na máquina do usuário, assim não podemos empregar no nosso
projeto um tipo de fonte de nossa livre escolha, mas teremos que escolher uma, dentre aquelas que mais
comumente encontram-se instaladas nos computadores - uma que venha pré instalada com o sistema
operacional. Isto limita consideravelmente nossa escolha. Você acabará descobrindo que está limitado a
duas ou três fontes do tipo serif (com serifas) duas ou três do tipo sans-serif (sem serifas) e uma do tipo
monospaced, (dactilográfica). Em lugar de escolher um tipo único de fonte, nós especificamos um
conjunto de fontes no pressuposto que uma delas esteja instalada no computador do usuário.
Abaixo um exemplo mostrando os tipos de fontes mais comuns pré instaladas em computadores Windows
e Machintosh. Você não pode assumir que a fonte que escolheu esteja instalada no computador do
usuário e por isso deverá fornecer alternativas.
A seguir uma especificação típica para escolha de uma família de fontes do tipo sem serifas.
font-family: Verdana, Geneva, Arial, sans-serif;
E, para fontes com serifas
font-family: Georgia, "Times New Roman", Times, serif;
Observe que nomes de fontes composto por mais de uma palavra devem ser escritos entre aspas -
"Times New Roman"
Vamos adicionar fontes sem serifas nos estilos para a nossa página e ver o que acontece.
Nossa página com fontes sem serifas »
O tamanho das fontes
A especificação do tamanho de fonte é um assunto controverso. Para impressão você poderá
tranquilamente especificar um tamanho em 'points' (pontos) e terá sempre aquele tamanho na
impressão.
A quantidade de espaço de impressão assim como as quebras de linha será sempre exatamente como
você as especificou. Na Web os tamanhos de fonte não seguem um padrão rígido variando de um
computador para outro, e em alguns casos,uma variação drástica. Dependendo do tamanho da tela do
usuário, do seu sistema operacional e do navegador usado um mesmo tamanho de fonte pode variar
Manual de Programação
desde de tão pequeno que se torne ilegível até tamanhos enormes semelhantes àqueles usados em livros
grandes, para crianças. Felizmente os navegadores permitem aos usuários definir suas preferências
pessoais de tamanhos, o que vem a atenuar as grandes variações, mas mesmo assim poderá haver
diferenças entre o que você projetou e espera, e aquilo que será de fato apresentado ao usuário.
Com a crescente popularidade dos dispositivos Wi-Fi (acesso sem fio) e portáteis, as condições de
navegação por sua página sofrerão uma mudança drástica nos próximos anos. Projetar hoje páginas Web
para o futuro implica em considerar designs fluídos que se auto adaptem aos diferentes tamanhos de tela.
Repita comigo, "A Web não é igual a uma impressora!"
Tamanhos relativos para fontes
Se você quer servir sua página Web ao maior número possível de usuários é melhor especificar um
tamanho de fonte relativo àquele escolhido como padrão pelo usuário. Várias são as maneiras de
especificar fontes relativas. Você pode usar percentagem (%) da fonte padrão do usuário ou uma unidade
de medida chamada 'em', o que é o mesmo que 100%. 1.2 em é o mesmo que 120%. A maneira
preferencial de especificar tamanhos relativos de fontes é através do método descritivo de tamanhos,
algo
parecido com a especificação de tamanhos de camisas ( T-shirt). 'Medium' (médio) é o mesmo que 100%
ou 1em. 'Smaller' (pequeno) é um tamanho menor que 'medium' e 'Larger' (grande) é um tamanho maior
que 'medium'. Há também os tamanhos x-small, xx-small, x-large e xx-large (algo como - extra pequeno,
super extra pequeno, extra grande, super extra grande). A vantagem deste sistema sobre as
percentagens e ems é que os navegadores não tornarão os textos ilegíveis. Você pode por exemplo,
especificar um tamanho de fonte de 0.7 em ou 70% e isto ficar perfeito no seu PC. Para alguém usando
um Mac com um tamanho de fonte definido smaller por padrão, 70% poderá resultar em um tamanho
ilegível. xx-small é o menor tamanho de fonte capaz de ser apresentado por um computador.
xx-largex-large large medium small x-small xx-small
xx-small type This type is small but not too small to render
This type is way too small This type is way too small>
Tamanhos absolutos para fontes
Se o público para o qual você projetar seu site for bastante específico e usa basicamente as mesmas
configurações e tipo de computador que o seu, você poderá especificar o tamanho de suas fontes em
pixels. Pixels não variarão muito de um para outro desktop e assim os tamanhos de fontes serão similares
quando não idênticos. Uma vez que você utilize laptops ou dispositivos portáteis ou mesmo monitores
com resolução muito alta, os tamanhos em pixel irão variar de acordo com o dispositivo usado.
Para que você tenha uma idéia exata destas variações, eu construi três parágrafos usando três métodos
diferentes para definir o tamanho da fonte - percentagens - tamanhos T-shirt e pixels. Na tela do meu
computador, usando um navegador Mozilla, os tamanhos são bem parecidos, mas poderão não ser para
você.
Para esta linha foi definido um tamanho de fonte de 85% do tamanho das fontes deste tutorial.
Esta linha foi definida com o tamanho de fonte x-small
Esta linha foi definida com um tamanho de fonte absoluto de 11px
Convém ressaltar que você nunca deverá usar 'points' para definir tamanhos de fonte para tela (screen),
use-o somente para impressão (print).
Espaçamento entre linhas
O espaçamento padrão entre linhas é de aproximadamente 120% do tamanho da fonte. Aumentar um
pouco este espaçamento em geral resulta em melhoria da legibilidade, especialmente se as linhas são
muito longas. Irei discutir esta questão mais adiante. Para a nossa página no estágio atual o comprimento
das linhas é determinado pela largura da janela do navegador, assim, talvez um pouco maior do que o
ideal.
Para definir o espaçamento entre as linhas podemos novamente optar por medidas relativas (% or ems)
ou absoluta (px). Neste exemplo eu defini para toda a página, a altura da linha (line height), que vem a ser
a altura do caracter (fonte) mais o espaço extra acima, em 180% do tamanho da fonte (small). Como as
definições de estilo para body estão crescendo, eu coloquei as regras, cada uma em uma linha diferente,
(isto não fará qualquer diferença para o browser) para que as regras de estilo fiquem mais fáceis de
serem lidas por humanos. É de boa prática sempre colocar um ponto e vírgula ao terminar de escrever
uma regra.
Manual de Programação
body {
background-color: #e8eae8;
color: #5d665b;
margin: 50px;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 180%;
}
Agora estamos com um página mais 'arejada'' »
Parágrafos
Tudo o que fizemos até agora afeta a página toda. Agora iremos ver como definir estilos para áreas
específicas da página.
Como eu já havia mencionado anteriormente, blocos de texto podem ser divididos em parágrafos para
facilitar a leitura. Existem várias maneiras de visualmente separar parágrafos uns dos outros. Você
poderá acrescentar espaços extras entre as linhas ou indentar a primeira linha.
Projetos tipográficos as vezes se utilizam de outras técnicas menos comuns tais como grandes
indentações ou mesmo exdentações (o oposto de indentação). Com CSS é possível conseguir todos
estes efeitos, mas por padrão o separador de parágrafos é o 'paragraph space' que equivale a metade da
altura da linha 'line-height'.
Para fazer com que um bloco de texto se transforme em um parágrafo, basta colocá-lo dentro de um par
de tags <p>...</p>. Para manipular os estilos a aplicá-los a um parágrafo, via CSS, nós adicionaremos p {
} logo a seguir às regras já definidas para body dentro da tag head. Dentro do sinal de chaves { },
acrescente esta declaração text-indent: 3em
<style type="text/css" title="mystyles" media="all">
<!--
body { background-color: #e8eae8;
color: #5d665b;
margin: 50px;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
line-height: 180%;
}
p { text-indent: 3em;}
-->
</style>
Nossa página com parágrafos »
Observe que o primero parágrafo não está indentado - ele não foi colocado dentro das tags <p>...</p> e
em consequência em termos de HTML ele não é oficialmente um parágrafo.
Títulos
Eu já expliquei os seis níveis de títulos padrão do HTML. Nós não temos que ficar restritos a eles, pois
podemos redefiní-los de acordo com nossas necessidades. Novamente, isto é uma simples questão de
definir mais umas regras de estilo.
Títulos por padrão são grandes e em negrito com um espaçamento extra acima e abaixo. Lembre-se que
títulos dos níveis h1, h2 e h3 são maiores que o texto normal e dos níveis h5 e h6 são menores. Vamos
trabalhar com o título h3 e alterar sua fonte e cor.
h3 {color:#966b72;
font-family:Georgia,"Times New Roman",Times,serif;}
Agora estamos com títulos »
Você deve ter observado que eu adicionei uma linha em branco acima do segundo título. Se você
simplesmente colocar ali um parágrafo vazio <p></p> isto não vai funcionar pois sempre é necesário
existir alguma coisa dentro das tags. Colocar um espaço em branco dentro de <p></p> também não vai
funcionar pois o HTML ignora espaços em branco que não estejam entre dois caracteres. O que nós
precisamos ali é de um caracter invisível e o HTML nos disponibiliza um, chamado de 'non-breaking
space' que é escrito desta forma veja a seguir...
<p> </p>
O caracter 'non-breaking space' é bastante útil também para você evitar que certas palavras sejam
Manual de Programação
quebradas ao fim de uma linha - palavras como nomes de pessoasou de instituições.
Dicas extras
Antes de passar para a próxima etapa vamos experimentar alguns 'truques' na nossa página.
Na tag body eu defini uma margem de 50px para os quatro lados (ao redor de toda a página). Nós
podemos definir margens diferentes para cima, para os lados direito e esquerdo e para baixo (top, right,
left e bottom). Para isto basta que se declare as margens separadamente como mostrado abaixo:-
margin-top: 70px;
margin-left: 120px;
margin-right: 50px;
margin-bottom: 70px;
Isto faz nossa página se parecer a uma página impressa, com uma margem maior no lado esquerdo.
Defini também na nossa página uma das palavras em negrito e outra em itálico. Atenção que o itálico
pode ser renderizado erroneamente em alguns computadores e tornar-se ilegível em tamanhos de fontes
pequenos.
Ver nossa página com textos estilizados »
Bem, agora você está com uma página onde acresentou algum estilo - sem muito esforço. Contudo a
página ainda se parece com um documento datilografado ou produzido em um processador de textos. A
seguir veremos algumas possibilidades interessantes de estilização para o layout.
Enquanto espera, você poderá fazer experiências com a página que acabamos de criar, modificando os
valores das declarações de estilos. Tente mudar os tipos e tamanhos de fontes e os espaçamentos entre
as linhas, porém o mais importante é que você carregue sua página em diferentes navegadores para
observar quão diferente sua página possa parecer.
ETAPA NÚMERO 4 - MAIS ESTILIZAÇÃO DE TEXTO
Antes de prosseguirmos com formatação de textos será interessante familiarizá-lo com alguns termos
básicos de tipografia.
Quando dizemos, tamanho de fonte ou em CSS font-size, estamos nos referindo à distância que vai
desde o topo de uma letra maiúscula tal como o 'A' até a base de uma letra que se estende o mais baixo
possível (letra descendente) tal como o 'p' ou 'y'. Existe ainda um espaço extra abaixo das letras,
chamado de 'leading'. Este nome vem do fato de as impressoras usarem este espaço como faixas para
colocação de uma guia ('lead') metálica com a finalidade de definir as entre linhas.
Hoje não usamos mais a 'lead', nós simplesmente determinamos o espaço total entre a base de uma linha
e a da linha seguinte. O espaçamento entre linhas em consequência vem a ser a altura da fonte mais o
espaço extra da 'lead'. Em CSS, dizemos line-height: 180%; com o valor especificado em percentagem,
ems ou pixels (px). Saiba mais sobre espaçamento de linhas, adiante.
Vertical-align permite ajustar a linha de base de letras individualmente dentro de uma palavra, mas esta
prática é bastante específica e usada em fórmulas matemáticas e não nos aprofundaremos muito nesta
propriedade agora. Para o exemplo mostrado abaixo eu poderia ter usado a marcação com as tags
<sup>2</sup> porém com CSS eu tenho muito mais controle..
E=MC2
CSS também possibilita o controle sobre o espaçamento horizontal entre as letras e as palavras.
Isto é apropriado para obter efeitos visuais em títulos.
T Í T U L O E S P A Ç A D O
letter-spacing: 0.5em; word-spacing: 0.5em
Projetando legibilidade.
Em épocas passadas em que os navegadores não ofereciam um bom suporte para as CSS um aspecto
de vital importância para formatação de textos, disponível até mesmo em máquinas de escrever mais
modestas, era impossível de se conseguir com a marcação HTML - trata-se do espaçamento entre as
linhas do texto, 'line spacing'. Quando o espaçamento entre as linhas de um texto é nulo ou muito
reduzido, a leitura torna-se difícil. Quanto mais longas forem as linhas tanto maior será a dificuldade de
leitura.
Linhas muito curtas provocam interrupções constantes na maneira natural de leitura da esquerda para a
direita.
Manual de Programação
Linhas mais longas que um tamanho considerado ideal são também de leitura cansativa e tornam difícil a
localização do início da próxima linha.
Para uma leitura confortável as linhas devem ter um comprimento entre uma vez e meia e duas vezes o
comprimento ocupado por todas as letras (minúsculas) do alfabeto - isto significa de 40 a 60 caracteres
ou de oito a dez palavras.
Se as linhas são mais longas, o aumento do espaço entre as linhas ajudará na legibilidade. Muitas das
antigas páginas web apresentam textos estendendo-se da esquerda para a direita, ocupando toda a
largura da tela, independente do tamanho do monitor. Alguns sites ainda adotam esta prática - e hoje em
dia as telas tornaram-se bem maiores.
Por padrão, há um espaçamento entre as linhas de um texto. Este espaçamento padrão é de
aproximadamente 20% do tamanho da fonte ('cap heigh't mais 'descender' ou seja, desde o topo de uma
letra maiúscula até a base de uma letra descendente - ver figura no primeiro título deste tutorial) . Com
CSS você poderá definir o espaçamento que desejar para as entre linhas. Se você está usando tamanhos
de fontes relativos, você poderá definir o espaçamento entre linhas como uma percentagem do tamanho
da fonte - font-size: 1em; line-height: 1.5em (o mesmo que 150%). Se você está usando tamanhos
absolutos você poderá definir o espaçamento entre linhas assim: font-size: 11px; line-height: 16px.
As especificações para este parágrafo são: font-size: small; line-height: 180% o que vem a ser
equivalente a uma vez e meia o espaçamento entre linhas de um processador de texto antigo.
Para uma demonstração, veja este exemplo onde o primeiro bloco de texto construido, não possui
margens e nem uma line-height (espaçamento entre linhas). As estilizações gerais para o body definem
somente o tamanho, família e cor das fontes, bem como a cor do fundo...
body {
color: #5d665b;
font-size: small;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #e8eae8;
}
O bloco de texto logo a seguir está dentro de um par de tags <div>...</div>, e é como se fosse uma
página dentro da página. Tem uma margem esquerda de 250px e direita de 200px e o espaçamento entre
linhas foi definido em 180%. Estes estilos foram acresentados ao corpo da página por um processo
conhecido como herança ('inheritance'). Exatamente como uma criança herda as características de seus
pais, as quais serão passadas para seus filhos, em CSS, este processo de "cascata" também acontece,
com elementos herdando os estilos definidos para elementos que os contém.
<div style="margin-left: 250px; margin-right: 200px;
line-height: 180%">...</div>
As 'divs' contidas nas páginas são uma parte muito importante das folhas de estilo em cascata e veremos
mais detalhes sobre elas, adiante neste tutorial.
Contraste
Diferentemente de uma página impressa que você lê por reflexão de luz, uma página em uma tela monitor
tem sua luminosidade própria. As diferenças de brilho entre um texto preto e um fundo branco tem
magnitude muito maior em uma tela do que em uma página impressa.
Porções grandes de texto preto sob fundo branco podem ser comparadas a uma caminhada sob sol
intenso sem uso de óculos escuro. Em casos extremos você apertaria os olhos para diminuir o efeito da
claridade e muito provavelmente no geral iria se sentir desconfortável e até mesmo sem saber bem
porque.
Diminuir o contraste numa página Web, faz com que ela se torne mais confortável e menos estressante
para leitura. Mas por outro lado, se você exagerar acabará dificultando a leitura para pessoas com
restrições visuais.
Em um artigo como este, onde há uma considerável quantidade de texto para leitura, onde o usuário terá
que passar um período longo de tempo em frente a tela do monitor, é importante tornar a tarefa o mais
confortável possível.
ETAPA NÚMERO 5 – LISTAS
Outra técnica de formatação muito usada em páginas Web é a lista ('list'). Ela é como um parágrafo,
porém tem uns detalhes adicionais.
HTML define listas que podem ser do tipo com marcadores(bullets - listas não numeradas) ou listas
ordenadas <ul>...</ul> <ol>...</ol> com numeração no início de cada item da lista <li>...</li> . Cada tipo
Manual de Programação
de lista é fornecido com algumas opções, que podem ser definidas no HTML - <li type="square"> coloca
um marcador tipo um 'quadradinho', <li type="i"> coloca um numeral romano minúsculo.
Lista não ordenada padrão
· Item da lista não ordenada
· Item da lista não ordenada
· Item da lista não ordenada
Lista não ordenada com opção de marcador tipo 'quadradinho'
_ Item da lista não ordenada
_ Item da lista não ordenada
_ Item da lista não ordenada
Lista ordenada padrão
1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3
Lista ordenada com opção de numeral romano minúsculo
i. Item 1 da lista ordenada
ii. Item 2 da lista ordenada
iii. Item 3 da lista ordenada
CSS possibilita mais opções e controle sobre as listas - basta você criar regras de estilo para ol ou ul .
ol {
list-style-type: lower-roman;
margin: 1em 0 1em 40px
}
O efeito destas definições de estilo é o mesmo que o de colocar a opção em cada item da lista no HTML
com a vantagem de proporcionar muito mais controle sobre as margens em volta da lista. Os quatro
valores : 1em 0 1em 40px são respectivamente para as margens de cima, à direita, em baixo e à
esquerda e podem ser definidos em ems, percentagens ou pixels.
Se você deseja controle sobre os itens da lista, você poderá definir as margens para eles também - para
aumentar o espaçamento entre eles por exemplo.....
ol li { margin: .5em 0 .5em 0 }
esta definição adiciona um espaço extra de 0.5 em acima e abaixo de cada item da lista ordenada. Para
uma lista não ordenada, bastaria você substituir o seletor por ul li .
E, melhor ainda, você pode definir seu próprio marcador usando uma imagem.
ul { list-style-image: url(smiley.gif) }
ul li { margin: 1em 0 1em 0}
· Se você gostou deste
· Vai gostar deste também
· E que tal este ?
E, por fim, uma imagem para cada item da lista...
<li style="list-style-image: url(icon1.gif);
margin: 1em 0 1em 0">Sabemos sobre pessoas</li>
<li style="list-style-image: url(icon2.gif);
margin: 1em 0 1em 0">Sabemos sobre imagens</li>
<li style="list-style-image: url(icon3.gif);
margin: 1em 0 1em 0">Sabemos sobre idéias</li>
<li style="list-style-image: url(icon4.gif);
margin: 1em 0 1em 0">Sabemos escrever</li>
· Sabemos sobre pessoas
· Sabemos sobre imagens
· Sabemos sobre idéias
· Sabemos escrever
Estilos definidos entre as tags head do documento aplicam-se à toda a página, o que não é o caso aqui.
Para aplicar estilos individualmente aos itens de uma lista, devemos definí-los nos itens ou 'inline'. Os
estilos são definidos na tag HTML de abertura <li> no corpo (body) da página. Notar que o IE6 (Windows)
coloca os ícones muito próximos ao texto do item. Eu adicionei um espaço em branco para compensar
isto, conforme mostro abaixo....
Sabemos sobre pessoas.
Manual de Programação
ETAPA NÚMERO 6 – LINKS
Na abreviatura HTML é de especial significado as letras HT para Hiper Texto (HyperText). Links em
palavras, frases ou imagens de uma página podem ser clicados para nos levar a outros lugares. Estes
outros lugares são chamados de "âncoras". Imagine navios ancorados no imenso mar que é a World Wide
Web formando uma cadeia composta de links conduzindo às âncoras do navio no fundo do mar. Os
navios estão ancorados em pontos específicos e não à deriva, o que facilita sua localização.
Cada página tem pelo menos uma âncora. Por padrão, está âncora localiza-se no topo da página, mas
você poderá iserir mais âncoras em qualquer lugar da página que precisar chegar por um link.
<a href="http://www.wpdfd.com/index.htm">
Este é um link para o topo da minha Home Page</a>
Assim, você tem um par de tags <a>...</a> mais uma marcação href="..." dentro da tag de abertura. Esta
é uma referência ao endereço do hipertexto ao qual você será conduzido.
Se você colocar uma âncora na página em um lugar específico - bem, na verdade a âncora deve ser
colocada imediatamente acima do lugar para o qual você irá - veja a seguir...
<a name="myanchor"></a>
Um par de tags <a></a> com um nome, por exemplo, name="myanchor" dentro da tag de abertura. Não
há nada dentro do par de tags.
Para ir àquele local ("myanchor") você acresenta mais o seguinte no fim do link...
<a href="http://www.wpdfd.com/index.htm#myanchor">
Este é um link para uma âncora na minha Home Page
</a>
Como você já deve saber, os links em uma página são visualmente diferentes do restante do texto com a
finalidade de serem facilmente identificados. Por padrão os links são na cor azul e sublinhados. Quando
você clica em um link eles mudam para a cor vermelha. Mais tarde quando você voltar àquele link sua cor
mudará novamente para púrpura, indicando que você já o visitou. Qualquer um que tenha navegado pela
Web percebeu rapidamente este comportamento dos links.
Por padrão são três os estados de representação dos hipertextos para links em HTML.
Link não visitado Link ativo (clicado) Link visitado
Observe que o cursor também muda. A seta padrão muda para uma 'mãozinha' quando aponta-se
sobre o link.
Certamente, como 'designers' não estamos satisfeitos com o visual padrão dos links. Texto sublinhado
pode ser prático mais é feio. O essencial é que o link seja destacado do restante do texto para mostrar-se
que ali há algo especial. O contexto então torna-se um fator importante. Alguns textos são óbvios que se
constituem em um 'menu' de opções quer estejam ou não sublinhados. Seu destaque e a posição que
ocupam na página e mais o fato de que aparentam convidá-lo a ir a algum lugar dão uma indicação
precisa da sua função.
De maneira semelhante, deve haver uma boa razão para uma palavra ou frase dentro de um texto ter um
visual diferente. A razão pode ser para dar ênfase, mas aqui novamente é o contexto quem vai dar uma
indicação e também o fato de outras palavras ou frases terem o mesmo tipo de alteração no visual. Isto
não vai funcionar se cada link tiver uma cor diferente.
CSS permite estilizar o visual dos links. Links não precisam ser sublinhados e nem azuis. Tudo que temos
a fazer é estabelecer definições para as âncoras - 'a'.
a:link { color: #696;text-decoration: none }
na definição acima a cor do link foi alterada e o sublinhado retirado com a definição text-decoration:none
Se você quiser mudar a cor do link visitado faça assim...
a:visited { color: #699; text-decoration: none }
CSS ainda permite estilizar um estado de link chamado 'hover'. Neste estado - quando o ponteiro do
mouse é passado sobre o link - mudei a cor do texto do link o que também fornece mais uma informação
adicional de que ali está um hipertexto para link.
a:hover { color: #c93; text-decoration: underline }
Neste estado, o sublinhado reaparece temporariamente enquanto o ponteiro está em cima do link, se
assim você desejar.
O estado 'active' do link acontece quando você clica. Normalmente o link muda de cor e em alguns
navegadores também aparece uma borda em volta do texto do link.
Para definir regras de estilo que se apliquem a todos os links de uma página você deve colocá-las dentro
das definições de estilo na tag head da página como mostrado abaixo.
a:link {color: #696; text-decoration: none;
background-color: transparent}
a:visited {color: #699;text-decoration: none;
Manual de Programação
background-color: transparent}
a:hover {color: #c93;text-decoration: underline;
background-color: transparent}
a:active { color: #900;text-decoration: underline;
background-color: transparent }
A ordem (sequência) que você escreve as definições de estilos para links é muito importante.
Normalmente a ordem não importa em CSS, mas neste caso é importante que a:hover e a:active venham
porúltimo, caso contrário não funcionarão.
Agora um outro estado para links não endossado pelas CSS.
Este é um link 'morto'. Ele não faz nada. Se você tem um link na sua página que leva a mesma página,
bem, não faz muito sentido clicar em link que leve para o mesmo lugar. Isto é como um sinal, instruindo
você a dar uma volta para ir ao lugar em você já se encontra.
Existem duas maneiras para tratar esta questão. Você poderá destacar o link de um modo visual diferente
dos outros links ou torná-lo invisível indicando assim que ele é um link não válido. Está técnica é chamada
de 'greying out' e você já deve ter visto isto em ação em outros programas instalados no seu computador.
Afinal, porque manter o link morto se ele não é uma opção válida?
Bem, um dos princípios mais importantes de projeto de interfaces diz que você deve manter as coisas o
mais consistente possível. Se você remover um item de uma menu por exemplo, os demais itens vão
sofrer um deslocamento de sua posição inicial. É menos confuso para o usuário uma interface que se
mantém sempre a mesma e inalterada.
Um outro elemento disponível é a cor do fundo do texto. Algumas vezes os 'designers' mudam a cor do
texto do link para o estado hover e/0u ative, simulando uma marca de iluminação.
Existem muitos outros efeitos que você pode conseguir com CSS para os links, nós apenas demos uma
partida aqui e você poderá agora começar com suas experiências. Esta página exemplo demonstra os
princípios que você aprendeu aqui..
ETAPA NÚMERO 7 - BOXES CSS
Vimos que um texto na Web pode ser dividido em títulos e parágrafos através da marcação HTML. Vimos
também como podemos definir estilos ao nosso gosto, de modo a sobrescrever os estilos padrão. Vamos
agora ver como definir estilos que possibilitam ir além do que permite o HTML e construir layouts mais
interessantes.
O corpo ('body') da página é a área total visível, mas conforme eu mostrei na etapa número 3, é possível
compartimentar a página em pequenas divisões com seus estilos próprios. Estas divisões podem ser tão
pequenas quanto um caracter ou grandes o suficiente para acomodar porções retangulares inteiras de
uma página. Tudo o que temos a fazer é englobar entre o par de tags <div>...</div> a área que
pretendemos transformar em uma divisão. Tais áreas, são como uma mini página que em CSS são
chamadas de boxes CSS. Boxes CSS se constituem na unidade básica de construção de layout de uma
página Web e eu passarei a explicá-los com detalhes pois eles são muito importantes.
Boxes CSS podem ter uma largura e uma altura (width e height), uma cor de fundo ou até mesmo uma
imagem de fundo que pode se repetir constituindo um padrão de preenchimento. Um box CSS por padrão
estende-se da margem esquerda à margem direita do corpo da página. Se você não especificar uma
margem para o corpo da página (body) um box CSS ocupará toda a largura da janela do navegador. Se
você não especificar uma altura para um box CSS ele não terá altura (será considerada zero). Ao colocar
texto dentro do box ele se expandirá em altura de modo a acomodar o texto colocado - ou uma imagem.
Para manter o texto afastado das bordas do box você deve usar o enchimento - padding...
Você deverá tomar precauções ao usar padding pois ele se comporta de maneira diferente no navegador
Microsoft Internet Explorer. Ao contrário do que foi mostrado no diagrama acima o IE coloca o padding
dentro do box, e em consequência seu comprimento e altura não se alteram. Todos os demais
navegadores colocam o padding fora do box, adicionando seus valores ao comprimento e altura do box.
Assim o seu box sofrerá alterações de acordo com o navegador em que for visualizado e isto poderá
trazer resultados desastrosos quando você depende de maior precisão.
Além dos limites do padding você poderá ter uma borda...
Bordas estão disponíveis em uma variedade de estilos e você poderá definí-las separadamente para cada
lado, em termos de espessura, estilo e cor. Elas são mostradas com pequenas diferenças de acordo com
o navegador em que são visualizadas, a seguir como elas aparecem no navegador Mozilla...
A espessura da borda aumenta o comprimento do box.
Para separar um box de outro usamos as margens.
Margens e paddings costumam ser confundidas pois o que nós chamamos de margem de uma página de
um livro ou de uma página Web, na verdade é um 'padding' porque obviamente este espaçamento não
Manual de Programação
poderia ficar fora da página. Lembre-se que este caso é especial. Para o body de uma página Web, as
margens são contadas para dentro e para todos os demais boxes CSS são contadas para fora do box.
Posicionamento absoluto
Além de ter um comprimento e uma altura os boxes CSS podem ser colocados em qualquer lugar da
página através da definição CSS position: absolute; Posicionamento absoluto é um conceito fácil de se
entender, pois é assim que as coisas funcionam na vida real. Por exemplo: a localização de uma casa
poderia ser descrita assim; à 50 metros da Rua Norte e à 100 metros da Rua Leste.
A maneira mais simples de posicionar um box seria definir algo como top:50px; left:100px (topo: 50px;
esquerda: 100px) mas não necessariamente terá que ser top e left, poderá ser top e right (topo e direita),
bottom e left (fundo e esquerda) ou bottom e right (fundo e direita).
Aqui você tem alguns boxes CSS estilizados e cada um deles com as definições de estilo mostradas. As
possibilidades de estilizações são infinitas.
Boxes com dimensões definidas e posicionados de forma absoluta, são semelhantes a recortes de
notícias e imagens de jornais que se faz para montagem de um álbum de recortes. O problema é que tais
álbuns permanecem com suas dimensões fixas - Páginas Web, não.
Posicionamento relativo
Se você quiser descrever a posição da porta da casa do seu vizinho você poderia dizer que ela encontrase
a 70 metros da Rua Norte e a 100 metros da Rua Leste, ou ainda, dizer que ela localiza-se a 5 metros
da sua casa. Posicionamneto relativo considera que boxes CSS localizam-se próximos a um outro box. O
primeiro box ocupa a posição mais acima, o próximo box localiza-se abaixo do primeiro, o seguinte abaixo
deste. Eles efetivamente flutuam colocando-se de cima para baixo na página. Este exemplo é um pouco
fora da vida real, mas imagine-se dentro de uma piscina coberta onde uma pilha de colchões de ar
flutuassem, o primeiro colaria na cobertura, o seguinte em baixo dele e seguinte em baixo e assim por
diante.
Para fazer com que boxes flutem um ao lado do outro em lugar de em baixo, você definirá float: left; ou
float: right; à semelhança dos colchões de ar na piscina coberta, os boxes vão flutuando um ao lado do
outro enquanto houver espaço lateral. Acabado o espaço lateral eles ocuparão a posição abaixo daqueles
que já flutuaram, começando uma nova camada. Você poderá evitar uma situação destas assegurandose
que a soma total das larguras dos boxes não ultrapasse a largura da página. Isto pode ser feito
especificando-se as larguras ('width') em pixel - mantendo a soma total abaixo da largura do navegador.
Ou ainda, definir as larguras em percentagens, mantendo a soma total igual a 100 - ou preferencialmente
um pouco abaixo de 100. Ao posicionar de maneira relativa, evite misturar pixel com percentagem, pois
os resultados podem ser imprevisíveis.
Esta página de exemplos para boxes flutuantes mostra o comportamento de boxes posicionados de
maneira relativa em colunas simples e múltiplas.
ID's
Ao criar seus boxes com definições de estilos segundo suas necessidades, não estarão disponíveis
elementos HTML para adicionar à eles. Você terá que inventar os seus próprios.
Provavelmente haverão alguns ou talvez muitos boxes CSS <divs> em uma página e assim devemos
darlhes
nomes que os identifique. Isto é feito através de um 'identificador' - queabreviadamente
denominamos id. Uma id deve ser única por box e identifica um box na sua página, permitindo que tanto
você quanto o navegador saibam como apresentar o box com aquele nome.
Um exemplo simples ocorre quando você divide sua página em três áreas horizontais. Um topo ('header')
contendo um logotipo e uma barra de navegação. A seção do meio a seguir contém textos e imagens. E
embaixo teremos o rodapé ('footer') com os direitos autorais e uma reprodução da barra de navegação
superior.
Este exemplo foi construido com 5 (cinco) boxes horizontais, sendo os dois boxes a mais, para a barra de
navegação e o logotipo, que foram posicionados logo abaixo do topo.
Observe que a margem à direita é menor que à esquerda para compensar visualmente as diferenças de
comprimento das linhas à direita, proporcionando melhor noção de centralização.
Nas definições de estilos usamos um símbolo # ('tralha') antes do nome que identifica 'id' o box.
Manual de Programação
#header {...}
#navbar {...}
#logo {...}
#midsection {...}
#footer {...}
Então colocamos as definições de estilo para o box, dentro de sua respectiva 'id' como mostrado abaixo...
<div id="header">...</div>
<div id="navbar">...</div>
<div id="logo">...</div>
<div id="midsection">...</div>
<div id="footer">...</div>
Caso tenhamos declarado estilos para o corpo da página 'body', nossos boxes herdarão aqueles estilos.
Qualquer estilo que você declare para o box tem prioridade sobre aquele declarado para 'body'. Isto é o
efeito 'cascata'.
Classes
Em alguns casos você irá se utilizar do mesmo box por várias vezes em uma página. Suponha que você
queira dividir a seção central da página mostrada em dois ou mais boxes separados. Neste caso
poderemos reutilizar um box em lugar de criar vários. Um box que pode ser reutilizado é nomeado com
uma classe. Exatamente como se tem 'classes' de flores ou insetos, uma classe aqui é basicamente um
mesmo box com conteúdo diferente. Para mostrar que temos uma 'classe' e não uma 'id' única, usamos
um . (ponto) em lugar de uma # ('tralha').
.midsection {} pode ser agora usado quantas vezes quisermos e a sintaxe para a div é conforme mostrado
abaixo...
<div class="midsection">...</div>
<div class="midsection">...</div>
<div class="midsection">...</div>
Span
Classes (mas não IDs) podem ser aplicadas em fragmentos de textos. Se desejarmos que algumas
palavras do texto tenham a cor vermelha, criamos uma classe chamada .redtext
.redtext { #c00 }
<span class="redtext">This is red text!</span>
Em lugar de colocar as palavras que queremos em vermelho, dentro de <div>...</div> , usamos
<span>...</span>. Isto é conhecido como elemento inline por aplicar-se a uma porção de texto dentro de
uma <div>...</div>
Use <span>...</span> sempre que você quiser estilizar diferentemente uma porção de texto que difere do
texto como um todo. Isto pode ser para cor, família de fonte, tamanho, peso ou qualquer outra
propriedade.
Assim, em CSS, existem elementos nível de bloco que são boxes com uma única ''id' ou uma 'classe'
reutilizavel. Podemos ainda ter os elementos inline que se referem a um nível de caracteres.
Agora estamos começando a chegar em algum lugar.
ETAPA NÚMERO 9 - JUNTANDO TUDO
A mais simples das páginas Web usará uma mistura de ids e classes e possivelmente uma combinação
de posicionamento absoluto e relativo. Vamos dar uma olhada na nossa página composta de cinco boxes
que estudamos na etapa número 8, e talvez, você queira dividir a seção central em colunas. Para isto
usaremos a declaração float:left tornando as coisas mais simples.
Uma coluna à direita, de largura reduzida, normalmente, é usada em uma página Web para menu de
navegação.
.leftcol {}
A coluna do meio é para o conteúdo principal .
.midcol {}
E, à direita uma outra coluna também de largura reduzida, usada para links relacionados ou de
anunciantes e parceiros.
.rightcol {}
Manual de Programação
Todas as três colunas terão sua largura definida em percentagens de modo a que possam se ajustar de
maneira fluida à largura da página.
Observe que eu usei classes para nomear as colunas de modo a que poderei reusá-las mais adiante.
Este exemplo mostra a seção central única .midsection transformada em três colunas flutuando à
esquerda.
<div class="leftcol">...</div>
<div class="midcol">...</div>
<div classs="rightcol">...</div>
Esta técnica amplia e torna mais interessante a construção do layout.
Não deixe qualquer uma das divs sem conteúdo, ainda que elas tenham que ser preenchidas com
espaços vazios. Coloque espaços dentro delas.
Doctypes e validação
Chegamos a décima etapa das lições 'CSS desde o início' e eu tenho uma confissão a fazer. Tudo o que
eu mostrei para vocês até aqui, - marcação de códigos e páginas de exemplos estão todas erradas! Bem,
tudo provavelmente funcionou muito bem a menos que você esteja usando um navegador muito antigo,
contudo se você testar o que fizemos em um verificador de sintaxe ou submeter a uma programa de
validação, tudo que fizemos será reprovado.
O que é um programa de validação? deve estar você perguntando.
Você já deve estar familiarizado com o conceito de checador de sintaxe. Provavelmente existe um deles
no seu programa processador de textos. O checador compara as palavras que você digita, com uma lista
de palavras de um dicionário e alerta quando encontra alguma palavra que não está no dicionário. Pode
ser que a palavra não esteja listada no dicionário, mas também pode ser que você tenha digitado errado.
Em processadores de textos mais sofisticados é possível checar a gramática, a existência de verbo em
uma frase, alertar para o uso repetido de uma mesma palavra 'e' importuná-lo incessantemente.
Para que um checador de palavras ou de gramática possa funcionar a contento, ele precisa saber qual é
a 'linguagem' usada. O meu checador de inglês da Inglaterra é diferente do inglês dos EUA - e se você
não estiver nos EUA?
Assim como suas escritas em inglês ou seja lá qual for o idioma usado é checado pelo processador de
texto, o HTML e as CSS podem e devem ser checadas também. Se você comete um erro na sua escrita,
as pessoas provavelmente julgarão tratar-se de um erro de datilografia, mas entenderão o que você quis
dizer e não haverá prejuizo para o entendimento. Um pequeno deslize no HTML ou nas CSS, por outro
lado, é uma história diferente. Algo aparentemente insignificante como uma vírgula ou uma aspas fora do
lugar, pode fazer toda a diferença entre uma página funcionando ou não - isto dependerá do erro e de
como o navegador tratará o erro. É uma boa idéia submeter seu HTML e as CSS a um checador de
sintaxe ou a um validador.
Uma das vantagens de se utilizar um editor de HTML decente é que ele vem com um checador de sintaxe
embutido. Você não dispõe de checadores em editores de textos simples e de propósitos gerais. Se você
possui um editor tipo HomeSite ou BBEdit ou um editor WYSIWYG tal como o Dreamweaver ou GoLive,
você terá um checador e ainda sugestões de como corrigir erros. Se você não possui um editor assim,
poderá usar um validador online fornecido pelo W3C - Validador HTML do W3C - Validador CSS do W3C
- onde você faz o upload de seu arquivo e obtém de imediato um relatório de erros ou de não existência
de erros!
É evidente que o programa tem que saber qual é a 'linguagem' que foi usada na marcação - existem
várias versões ('linguagens') do HTML. Todos os exemplos que mostrei, foram escritos usando o HTML
4.01 - esta é a versão atual e a mais utilizada. Existem sub-versões do HTML 4.01 - 'Strict', 'Transitional' e
'Frame Set'.
Strict é um conjunto de regras muito rígidas que definem o que pode e o que não pode ser escrito em
HTML.
Transitional é um conjunto um pouco mais flexível e permite escrever algum HTML mais antigoe para
algumas peculiaridades próprias de navegadores.
Frame Set não é muito usado nos dias atuais. Não temos nos utilizado do uso de 'frames' pois eles estão
em desuso desde o aparecimento das CSS.
A maioria das pessoas está satisfeita com o uso de 'Transitional' pois ele não é tão rígido com a
marcação, outras gostam de fazer tudo conforme 'reza o manual' e preferem usar 'Strict'.
Para dizer ao navegador qual a linguagem de marcação e a sub-versão que você está utilizando, coloque
a declaração de DocType logo no início da marcação, no topo da página - acima da tag de abertura
<html>. Assim como mostrado abaixo...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
Manual de Programação
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Não vou analisar a declaração agora, basta que você saiba por enquanto que esta declaração no topo da
página fornece ao validador as informações necessárias para ele fazer seu trabalho de validação. Agora o
validador saberá quais são as regras (normas) você esta utilizando na marcação e poderá fazer as
análises necessárias.
Ao adicionar o DocType, poderei checar minhas páginas em um editor de HTML que forneça esta
facilidade e estar seguro de que terei um código limpo. Agora que já sabemos da importância do Doctype,
podemos voltar ao assunto estilizações.
ETAPA NÚMERO 10 - FOLHAS DE ESTILO EXTERNAS
Todas as folhas de estilo que construi até agora, foram colocadas dentro da seção <head> das páginas.
Este procedimento facilita o entendimento, pois basta olhar o código de marcação da página e ver como
foram definidas as regras de estilo. Tudo está colocado em um único lugar. Contudo é muito raro termos
páginas isoladas, o mais comum é que tenhamos várias páginas com uma apresentação semelhante em
todo o Web site.
Em lugar de colocar as folhas de estilo repetidamente em cada uma das páginas construidas, seria uma
boa idéia que tivessemos uma única folha de estilos que pudesse ser lincada a cada uma das páginas.
Isto permite mudar a cor de fundo das páginas ou usar um tipo ou tamanho de fonte diferente para todo
o
site, bastando que você faça a alteração na folha de estilo 'mestre'. De fato, você pode mudar
completamente a apresentação de todo o site, alterando apenas um arquivo.
Dê uma olhada em http://www.csszengarden.com/ para ver este princípio em ação. Vários designers
construiram suas folhas de estilos para uma página padrão e isto demonstra de uma forma admirável
como pode-se projetar os mais variados 'skins' para um mesmo 'esqueleto' da página, alterando
completamente suas características. Para fazer uso de uma folha de estilo externa, basta lincá-la ao
documento como mostrado a seguir:
<link rel="stylesheet" href="basicsstyles.css"
type="text/css" media="screen">
Isto diz ao navegador para procurar as especificações de estilo em um arquivo chamado
'basicsstyles.css'. Trata-se de um arquivo de texto puro - type="text/css" e os estilos foram otimizados
para apresentação em uma tela de computador - media="screen".
As folhas de estilo não estão limitadas às telas de computador, você poderá criá-las para servir a outras
mídias como, impressão, projeção e até mesmo braille. Se você pensar sobre isto, concordará que uma
folha de papel para impressão não tem o mesmo formato de uma tela de computador e ninguém gosta de
desperdiçar preciosas quantidades de tinta em áreas preenchidas com cores sólidas, quando tudo o que
se quer impresso é um texto em preto e branco. Uma folha de estilo para impressão deve especificar uma
área de impressão compatível com uma folha de papel e ao contrário de estilizações para a tela deverá
usar tamanhos de fontes em 'points' (pt). Esquemas coloridos devem ser minimizados ou mesmo
abandonados completamente. Então tudo o que você precisar fazer é adicionar outro link na seção
<head> do documento, imediatamente abaixo daquele para mídia tela.
<link rel="stylesheet" href="printstyles.css"
type="text/css" media="print">
Se você decidir que sua folha de estilo serve tanto para tela como para impressora, você poderá usar um
link como mostrado a seguir...
<link rel="stylesheet" href="styles.css"
type="text/css" media="all">
Embora a maioria das minhas folhas de estilos sejam do tipo externa, eu começo meus projetos com a
folha de estilo declarada no próprio documento. Quando eu estou satisfeito com as definições de estilo
que construi copio-colo a folha em um arquivo novo e coloco um link para ele na página.
ETAPA NÚMERO 11 - ESTILIZANDO TABELAS
Embora as tabelas venham sendo usadas para layout desde as eras negras da Web, penso que devo
mostrá-las aqui, para mostrar que layout construido com CSS oferece muito mais escopo e versatilidade.
Tabelas tem por razão de ser e finalidade, a apresentação de dados tabulares, aquelas coisas que
normalmente são colocadas em 'folha de dados' onde você precisa de linhas e colunas para relacionar
textos ou mesmo figuras.
Nos tempos antigos (e de navegadores hoje ultrapassados) você alterava a apresentação de uma tabela
Manual de Programação
e de suas células, usando várias propriedades - cores de fundo, imagens de fundo, etc. Uma grande
quantidade destes atributos atualmente está em desuso e há algum tempo já não são mais válidos - muito
embora eles hoje ainda funcionem, para o futuro é bom não contar com eles. Na verdade é melhor que
você não conte com eles desde já. Se você tentar colocar uma imagem de fundo que seja renderizada no
Netscape 4 ou anterior tera que repetí-la para cada célula individualmente, como se tivesse dividido a
imagem em múltiplas partes, tornando a tarefa pouco usual e frustrante.
A prática usual de definir uma altura e uma largura para a tabela em pixel ou em percentagem não é mais
válida. Tabelas devem se auto ajustar em dimensões ao seu conteúdo.
A estilização de tabelas com CSS tem seus macetes próprios e nem sempre é simples e imediata. Você
poderá construir sua estrutura de tabela usando display:table; and display:table-cell; no qual cada célula é
uma div, e para fins de estilizações usar os elementos HTML de tabelas - table , tr , td , th , etc - com a
finalidade de facilitar a tarefa.
tr é uma linha da tabela, uma fila horizontal de células. td e uma divisão de uma linha da tabela. Você
deve estar pensando em coluna, mas o comportamento não é de coluna e você não pode colocar uma
imagem de fundo na coluna ou estilizar.
As tabelas herdam alguns estilos das DIV's em que forem colocadas, alguns, mas não todos os estilos.
Se você definir font-family: verdana, arial, sans-serif e color: #009 , para o corpo (body) de sua página, as
tabelas herdarão estas definições, mas não herdarão tamanhos de fontes e nem alinhamentos de textos.
Há também uma hierarquia para os elementos de tabelas. Uma definição para td prevalece sobre uma
para tr, que por sua vez prevalece sobre aquelas para table. Você pode tirar vantagem desta hierarquia.
Se você definir uma cor preta para fundo da tabela e uma cor branca para td e um cellspacing="2", você
terá uma tabela com com células brancas e uma borda preta de 2px ao redor.
Nota do tradutor: No original desta página o autor mostrou a seguir 5 tabelas estilizadas e comentadas,
com as regras de estilo para cada uma delas incorporadas na própria página. Como estou usando em
meu site marcação XHTML 1.1 que não admite alguns atributos usados pelo autor, criei uma página
separada para mostrar as tabelas estilizadas e assim continuar com minha página válida.
Veja o código fonte da página dos exemplos para estudar as regras de estilização das tabelas.
Ver Tabela 1. Esta simples tabela tem um fundo definido como transparent e uma cor cinza bem clarinha
pra o fundo das tds.
Ver Tabela 2. De acordo com os dados contidos na tabela você poderá dar maior ênfase às linhas
horizontais ou às colunas verticais.
Ver Tabela 3. Aquium efeito de alto relevo em 3D conseguido através de definições de estilos para as
cores das bordas. Para as linhas do cabeçalho da tabela foi definida uma cor escura.
Ver Tabela 4. Usei um gradiente para as linhas do cabeçalho e uma borda esquerda na cor cinza clara
para separar as colunas.
Ver Tabela 5. OK, eu sou um fã de Mondrian, mas minha intenção aqui é demonstrar que se você quiser,
poderá estilizar as células da tabela individualmente.
As possibilidades de estilização de tabelas são muitas. Quem disse que as tabelas tem que ser
entediantes.Materiais relacionados
122 pág.
286 pág.
Perguntas relacionadas
Compartilhar