ETAPA 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 os diferentes 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 ... como mostrado a seguir...

Código:

<style type="text/css" title="mystyles" media="all">
<!--


-->
</style>

Note o par de tags 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 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 ... 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 ... terá este estilo ou conjunto de estilos que lhe for aplicado.

Basicamente a definição de estilos para body se parece com...

Código:

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 ':' .

Código:

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, adiciona-se 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.



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

Código:

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.

Código:

body { background-color: #e8eae8; color: #5d665b;

  margin: 50px }

Agora tudo o que digitarmos na página será representado numa cor verde escura acinzentada sobre um fundo cinza. Veremos adiante casos especiais em que iremos alterar isto.

OBS: Bom gente, eu vou postar um total de + - 15 tutoriais aqui para o Visual, eu preciso de tempo para isso, então sejam pacientes =D


ETAPA 1 - Página Básica

Introdução:

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.

Código:

<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 .... A primeira é 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 existem mais dois pares de tags.

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

Código:

<html>

 <head>

  <title>Minha Página</title>

 </head>

 <body>

  Este é o conteúdo da minha página Web!

</body>

</html>

O par de tags ... 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.



Este é um HTMLfante. Sim concordo, ele não é tão original, mas pelo menos você não irá esquecê-lo!

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!

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

...

. 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

...

até o mais baixo

...

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

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 ... contudo, trata-se de um estilo de apresentação para impressão e na Web é preferível usar-se 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 .... E aqui também, é melhor você não se utilizar de estilização visual, mas usar .... 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 ... , 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
. 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 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 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.

Código:

font-family: Verdana, Geneva, Arial, sans-serif;

E, para fontes com serifas

Código:

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"

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ão 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 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.

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.

Código:

body {
    background-color: #e8eae8;
    color: #5d665b;
    margin: 50px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: small;
    line-height: 180%;
       }

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

...

. Para manipular os estilos a aplicar em um parágrafo nós adicionaremos p { } logo após às regras já definidas para body e a seguir, do sinal de chaves { }, acrescentaremos a declaração text-indent: 3em

Código:

<style type="text/css" title="mystyles" media="all">

Código:

<!--

 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>

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.

Código:

h3 {color:#966b72;

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

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

isto não vai funcionar pois sempre é necesário existir alguma coisa dentro das tags. Colocar um espaço em branco dentro de

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

Código:

<p> </p>

O caracter 'non-breaking space' é bastante útil também para você evitar que certas palavras sejam quebradas ao fim de uma linha - palavras como nomes de pessoas ou 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:

Código:

 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.

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 ² 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.

Código:

TÍTULO ESPAÇADO

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.

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

Código:

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 , 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.

Código:

<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

...

...

com numeração no início de cada item da lista

...

. Cada tipo de lista é fornecido com algumas opções, que podem ser definidas no HTML -

coloca um marcador tipo um 'quadradinho',

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

Ordered list item 1
Ordered list item 2
Ordered list item 3

Lista ordenada com opção de numeral romano minúsculo

Item 1 da lista ordenada
Item 2 da lista ordenada
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.

Código:

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

Código:

 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.

Código:

ul { list-style-image: url(smiley.gif) }
 
  ul li { margin: 1em 0 1em 0}

E, por fim, uma imagem para cada item da lista...

Sabemos sobre pessoas

Sabemos sobre imagens

Sabemos sobre idéias

Sabemos escrever

[/code]

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

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

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.

Código:

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

Código:

<a name="myanchor"></a>

Um par de tags 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...

Código:

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

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'.

Código:

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

Código:

 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.

Código:

 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.

Código:

a:link {color: #696; text-decoration: none;

  background-color: transparent}

  a:visited {color: #699;text-decoration: none;

  background-color: transparent}

  a:hover {color: #c93;text-decoration: underline;

  background-color: transparent}

  a:active { color: #900;text-decoration: underline;

  background-color: transparent }

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.

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 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 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 encontra-se 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 assegurando-se 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.

Etapa número 8 - Personalizando DIV's

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 em uma página e assim devemos dar-lhes nomes que os identifique. Isto é feito através de um 'identificador' - que abreviadamente 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.

Código:

#header {...}

#navbar {...}

#logo {...}

#midsection {...}

#footer {...}

Então colocamos as definições de estilo para o box, dentro de sua respectiva 'id' como mostrado abaixo...

Código:

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

Código:

<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

Código:

.redtext { #c00 }

Código:

<span class="redtext">This is red text!</span>

Em lugar de colocar as palavras que queremos em vermelho, dentro de

...

, usamos .... Isto é conhecido como elemento inline por aplicar-se a uma porção de texto dentro de uma

...

Use ... 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 à esquerda, de largura reduzida, normalmente, é usada em uma página Web para menu de navegação.

Código:

 .leftcol {}

A coluna do meio é para o conteúdo principal .

Código:

.midcol {}

E, à direita uma outra coluna também de largura reduzida, usada para links relacionados ou de anunciantes e parceiros.

Código:

.rightcol {}

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.

Código:

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

Etapa número 10 - Fazendo as coisas certas

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 antigo e 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 . Assim como mostrado abaixo...

Código:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD
  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 11 - Folhas de estilo externas

Todas as folhas de estilo que construi até agora, foram colocadas dentro da seção 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.

Para fazer uso de uma folha de estilo externa, basta lincá-la ao documento como mostrado a seguir:

Código:

<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 do documento, imediatamente abaixo daquele para mídia tela.

Código:

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

Código:

<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 12 - 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 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.

Etapa número 13 - Estilizando formulários

A estilização de formulários em páginas Web, não se constitue em uma grande prioridade. Os formulários normalmente são deixados como são - e por várias boas razões.

As convenções padrão usadas para formulários, funcionam muito bem.
Se um formulário não tiver o aspecto padrão esperado, os usuários poderão se confundir.
Não é bom o suporte para estilização de formulários pelos diferentes tipos de navegadores.
Vamos examinar cada um destes aspectos com mais detalhes.

'As convenções padrão usadas para formulários, funcionam muito bem.'

Talvez. Ainda encontra-se uma grande quantidade de formulários mal projetados, tanto para mídia impressa quanto para a Web.

Basicamente eu detesto preencher formulários e conheço muitas pessoas que também detestam.

Contudo os formulários se constituem em um meio eficaz de se coletar informações facilitando seu processamento. Então, o que há de errado com o design dos formulários?

A primeira questão diz respeito a um formulário de aparência complicada. Isto intimida o usuário e faz com que ele 'entre em modo defensivo'.

A seguir vem as perguntas que aparentemente são irrelevantes ou indiscretas. Por que eles querem saber o dia do meu aniversário?

O aspecto complicado do formulário é um problema de layout. Você pode 'descomplicar' ou tornar simples um formulário projetando-o de uma forma clara e ordenada. A atenção inicial deve ser dispensada a ordenação dos textos e clareza do layout.

Há que se considerar ainda o tamanho e posicionamento dos textos dos rótulos e também de notas explicativas. Os textos devem ser posicionados acima, abaixo ou à direita dos boxes. Se você preferir colocar os rótulos à esquerda, use align: right; para evitar que um espaçamento maior entre o texto e o box traga complexidade ao layout, dificultando a identificação. Tente também evitar o uso de diferentes tamanhos de boxes input e não preencha espaços vazios, simplesmente porque eles existem. Se um box para código postal é menor que os demais destinados ao endereço, deixe-o menor mas, não use o espaço que sobrou para colocar outro box, simplesmente porque há o espaço.

Em uma página Web você não precisa economizar espaços. Racionalize o tamanho de seus boxes de input. Alinhe-os verticalmente. Projete-os claros e ordenados.



O formulário acima parece complicado. Ele tem dois eixos verticais e o movimento dos olhos para a leitura não flui naturalmente, tendo que pular na vertical e na horizontal para localizar o box seguinte.



Um projeto mais simples com um só eixo vertical propicia um movimento natural de leitura.

Ao contrário de um formulário impresso, na Web os formulários podem ter alguma parte fora da visão do usuário pois a área de apresentação está limitada à janela do navegador. Assim, um formulário muito longo em uma página pode requerer seguidas rolagens de tela, o que se torna inconveniente. Neste caso é preferível dividir o formulário em múltiplas páginas - com o cuidado de facilitar a eventual volta às partes do formulário, caso o usuário necessite alterar algo já informado.

'Se um formulário não tiver o aspecto padrão esperado, os usuários poderão se confundir.'

Sim, você não deve 'queimar a cuca' com o design de formulários. Um box de input para texto deve comunicar ao usuário a sua função, assim como um pop-up ou um botão de submit. Não há muito a acresentar a um fundo branco com texto em preto - até porque alguns navegadores não permitem nada mais, além disto!

É uma má idéia confundir um box de input com um texto comum, ele terá que ser diferenciado e comunicar seu propósito.

Os elementos que você pode estilizar são input, textarea e select mas esteja ciente de que ao estilizar um campo de input não só o campo será estilizado como também os outros inputs como radio boxes, check boxes e os botões Submit (Enviar) e Clear (Limpar).

É seguro estilizar font-family e font-size. text-color pode ser estilizado se você assim preferir. Com background-color deve-se ser mais criterioso. Estilizar o fundo com uma cor em tonalidade mais suave do que a da página, dará ao campo um aspecto menos agressivo.

Ao alterar a borda de um box para input de texto estaremos afetando também a borda do botão submit e ele poderá ficar parecido com um box de texto se você não tomar suas precauções. Para evitar isto você deverá criar e estilizar uma div que englobe o box de texto, tal como mostrado para #typein logo abaixo...

Código:

#typein { }

#typein input {

color: #633;

font-size: 10px;

background-color: #ebebd9;

padding: 3px;

border: double 3px orange

}

Se você quiser estilizar uma textarea de maneira semelhante ao box de texto, faça assim...

Código:

#typein input, #typein textarea {

color: #633;font-size: 10px;

background-color: #ebebd9;

padding: 3px; border: double 3px orange;

}

Select (popups) são apresentados de modo diferente de acordo com o navegador ou plataforma em que são visualizados. Definir para eles um tamanho e uma família de fontes é o máximo que devemos fazer. A aparência que eles assumem quando são clicados está fora do seu controle.

'Não é bom o suporte para estilização de formulários pelos diferentes tipos de navegadores. '

A mesma estilização renderizada em Explorer (Win), Mozilla, Safari (Mac) e Opera mostra as variações de apresentação. Mais considerações sobre diferenças entre navegadores, veremos mais adiante.

A questão fundamental é que não estamos tentando criar uma obra prima com formulários. Estamos sim, tentanto fazê-los fáceis de usar sem serem intimidadores e com uma apresentação bem intuitiva.

Aperfeiçoar a experiência do usuário com auxílio de scripts de validação é uma outra história que não abordarei agora.

Etapa número 14 - Navegadores (Browsers)

Grande. Onde estaríamos sem eles? Quantas vezes eu ouvi pessoas dizendo que gostariam que existisse apenas um tipo de navegador. Qual deles, eu penso?

Cada navegador tem sua própria folha de estilos padrão. Esta folha, será utilizada caso você não defina uma personalizada. Naturalmente, as folhas de estilos padrão dos navegadores são diferentes entre si. Elas foram definidas por diferentes fabricantes e comportam-se de maneira diversa nos variados tipos de computadores e plataformas.

É maravilhoso que elas sejam bem semelhantes, contudo as diferenças existentes não são tão insignificantes. Se você assumir que outros navegadores irão renderizar sua página Web de maneira 'similar' àquela que você vê no seu navegador, rapidamente perceberá que 'similar' não significa 'igual' e pode até significar 'bem diferente' em determinados casos - mesmo com uma folha de estilos CSS válida.

Eu não poderia entrar em uma exaustiva comparação cross-browser aqui, mas existe na Web uma grande quantidade de material a respeito. Vou citar algumas que mais me incomodam. Usualmente resumem-se a uma questão entre o navegador Explorer e os demais navegadores - mas nem sempre é isto. Uma lista dos navegadores atuais esta disponível em WPDFD News page (NT: no site do autor da matéria). A maioria dos navegadores é gratuito ou oferece um 'test-driven' sem custos.

Microsoft Internet Explorer é o navegador mais usado. Nas suas variadas formas é responsável por algo em torno de 85% dos navegadores. Lamentavelmente ele se comporta segundo suas regras próprias e não segue as normas standards, tal como os demais navegadores. Ele segue a maior parte das standards, mas os grandes problemas ocorrem exatamente onde há divergências das standards.

O Box Model

Em todas as versões do IE, a implementação do padding é diferente dos demais navegadores. O resultado disto é que se você especifica uma largura para um box em pixel e define um padding à esquerda ou à direita, o box terá uma largura total no IE diferente da dos demais navegadores - e isto poderá arruinar um layout preciso.



IE assume que o padding deve ser computado dentro do box, reduzindo desta forma a largura para o texto - o que, devo admitir me parece razoável. As standards do W3C definem que o padding deve ser adicionado fora da largura definida para o box, sendo assim toda a largura ocupada pelo texto. Qual é o conceito mais lógico é uma discussão que pode se prolongar para sempre, mas o fato é que existe esta diferença de interpretação pelos navegadores, que poderá derrubá-lo, caso você não confira sua página no IE e em outros navegadores.

O que significa 'Relative'


'Relative' no contexto das CSS é um conceito bem simples. Cada box ocupa uma posição em relação ao box imediatamente superior a ele. Atenção! Se você mover um box de seu 'fluxo natural' definindo para ele um valor para a propriedade top ou bottom, é de se supor que o box sairá do seu lugar natural, deixando vago o espaço que ali ocupava - como se um carro saísse de um estacionamento, deixando livre a vaga que ocupava. O IE (versão para Mac) "fecha' o espaço deixado vago, deslocando tudo que se encontra próximo, para cima ou para baixo.



No desenho à esquerda o que se supõe acontecer quando você move um box, o espaço ocupado transforma-se efetivamente em um box invisível. À direita o que acontece no IE (Mac) e que poderá arruinar seu layout se você não estiver ciente disto.

A maneira como a marcação é escrita não deve influir na estilização

Agora, aqui um 'bug' que me provoca 'bug' porque definitivamente não é consequência de uma interpretação errônea das standards e sim um 'bug' mesmo. É de se admitir que os navegadores ignorem totalmente a formatação da marcação do código HTML. Não faz a menor diferença se você escreve seu código em uma linha única ou se usa espaçamento duplo entre as linhas. Acontece um bug no IE (Mac) pois quando você define float boxes na horizontal e escreve a marcação HTML correspondente em linha separadas, fica estabelecida uma confusão para o navegador. Você tem que escrever a marcação em uma linha contínua para obter os resultados esperados. Agora, resolver este 'bug' não requer grandes malabarismos, no entanto o desenvolvimento do IE (Mac) parou, ele está condenado à morte e atualmente você dispõe de outras ótimas opções para escolher. - contudo tal como abandonar velhos hábitos, a morte de velhos Mac será árdua.

As especificações para as Folhas de Estilos em Cascata e suas possibilidades estão sendo continuamente atualizadas e os navegadores por sua vez também sendo atualizados para dar suporte às inovações introduzidas. Este é um processo contínuo sobre a coordenação do pessoal do W3C (World Wide Web Consortium).

Felizmente as diferenças de implementações hoje existentes serão minimizadas se não eliminadas completamente, contudo há outros fatores a considerar.

O conceito de visualização de uma página Web exclusivamente em uma tela de computador está mudando. As pessoas estão usando outros dispositivos que não um computador e os conteúdos disponibilizados para interfaces que não necessariamente sejam um navegador.

Aguarde mais!

Os fabricantes estão empenhados na tentativa de identificar novos caminhos para implementar facilidades de comunicação nos seus produtos - telefones, televisões, carros, geladeiras, fornos de micro-ondas são seus objetivos imediatos. Ultimamente a cultura da Web na cabeça das pessoas acabou por unir a todos e possibilitar acesso à raça humana a um mesmo nível de sofistificação em comunicação do que aquele constatado entre as comunidades de formigas!

Usando-se CSS, não importa qual é o dispositivo usado para visualizar o conteúdo. Com CSS é possível acomodar o conteúdo em uma grande diversidade de mídias apesar de na maioria das vezes usarmos somente para duas delas - tela e impressora ('screen' e 'print').

Bom, espero ter ajudado alguem! :cheers:

Abraços, seu amigo:

Zer0 :D