:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: https://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

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

mostra #fff=#ffffff em cores

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.

tres linhas de 16 cubos de cores em tons de escuro a claro para vermelho verde e azul

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.

formando cores, fff=branco, 93f=violeta, 999=cinza

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á representado numa cor verde escura acinzentada sobre um fundo cinza. Veremos adiante casos especiais em que iremos alterar isto.

Veja na prática o que acabamos de fazer »

  1. » Introdução - página básica
  2. » Folha de estilos
  3. » Estilizando texto
  4. » Mais texto
  5. » As listas
  6. » Os links
  7. » Boxes CSS
  8. » DIV's
  9. » Juntando tudo
  10. » DOCTYPE
  11. » Estilos externos
  12. » Estilizando tabelas
  13. » Estilizando formulários
  14. » Browsers
  15. » O futuro

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

Criado em: 2005-04-07