A Aldeia Numaboa ancestral ainda está disponível para visitação. É a versão mais antiga da Aldeia que eu não quis simplesmente descartar depois de mais de 10 milhões de pageviews. Como diz a Sirley, nossa cozinheira e filósofa de plantão: "Misericórdia, ai que dó!"

Se você tiver curiosidade, o endereço é numaboa.net.br.

Leia mais...

Informática Numaboa - Tutoriais e Programação

Pequeno laboratório de CSS I

Seg

17

Abr

2006


12:43
  • Imprimir
(14 votos, média 4.43 de 5) 
Detalhes
Categoria: CSS - Cascanding Style Sheet
Atualização: Quarta, 15 Abril 2009 12:03
Autor: vovó Vicki
Acessos: 13543


Pagina 1 de 7

Iniciante CSS é a abreviação de Cascading Style Sheets. Estilos (styles) normalmente definem a aparência de elementos HTML e são armazenados em folhas (sheets) de estilo. Múltiplas definições são cascateadas (cascading) em uma única.

Introdução

Aqui vão algumas considerações importantes.

A origem do CSS

Originalmente as tags da linguagem HTML foram projetadas para definir o conteúdo de documentos. Assim "isto é um cabeçalho", "isto é um parágrafo" e "isto é uma tabela" é definido com as tags <h1>, <p> e <table>. O layout do documento ficava por conta do navegador e não havia tags de formatação.

Como a evolução dos navegadores não parou, novas tags foram criadas (como <font> e atributos de cor) e foi ficando cada vez mais difícil separar o conteúdo do layout de apresentação. Para resolver este problema, o W3C, o consórcio responsável pela padronização do HTML, criou os STYLES (estilos) na versão 4.0 do HTML.

Características do CSS

Folhas de estilo definem COMO os elementos HTML são mostrados, da mesma forma que as tags font e os atributos de cor faziam em versões anteriores. Normalmente os estilos são guardados em arquivos externos do tipo .css e podem ser atrelados a uma, várias ou até a todas páginas de um site. Isto facilita enormemente a manutenção - ao invés de alterar trocentas páginas, altera-se apenas um (ou alguns poucos) arquivo de estilo.

As informações de estilo podem ser especificadas de várias formas. O estilo pode ser especificado dentro de um determinado elemento HTML, dentro do elemento <HEAD> de uma página HTML ou num arquivo externo. Até mesmo vários arquivos externos podem ser referenciados dentro de um único documento HTML. Quando há mais de uma fonte, os estilos são "cascateados" numa nova folha de estilos "virtual" obedecendo a seguinte prioridade:

  1. Estilo em linha (dentro de um elemento HTML)
  2. Folha de estilo interna (dentro da tag <head>)
  3. Folha de estilo externa
  4. Padrão (default) do navegador

Isto significa que, um atributo definido dentro da tag de um elemento terá preferência, mesmo que o mesmo atributo esteja definido numa folha de estilo interna, numa folha de estilo externa ou seja o default do navegador.

Sintaxe CSS

A sintaxe CSS pede três partes: um seletor, uma propriedade e um valor. O seletor, normalmente, é um elemento ou uma tag HTML e a propriedade é o atributo que se quer alterar atribuindo-lhe um novo valor. A propriedade deve ser separada do valor por dois pontos e ambos ficam entre chaves. Por exemplo, para definir que o corpo do documento seja preto, usa-se:

body { color: black }

Para um mesmo elemento podemos definir várias propriedades. Por exemplo:

p { font-family: "Sans Serif"; text-align: center; color: red; }

Observe algumas particularidades:

  • As propriedades e seus valores podem estar em várias linhas (o que facilita a leitura)
  • Os espaços no início das linhas são ignorados
  • Cada propriedade e valor é terminada por um ponto e vírgula (por isso podemos usar várias linhas!)
  • Pode-se usar quantas propriedades se quiser dentro das chaves referentes a um elemento (no exemplo, o parágrafo)
  • Caso o valor tenha mais de uma palavra, estas devem ser colocadas entre aspas ("Sans Serif")

Agrupamentos também são permitidos. Por exemplo, podemos indicar várias famílias de fontes ou vários elementos. Neste caso, o separador é a vírgula. No caso das famílias de fontes, o navegador procura pela primeira; se não encontrar a fonte, escolhe a segunda e assim sucessivamente. Veja os exemplos abaixo:

h1, h2, h3 { color: green; } p { font-family: "Sans Serif", Arial, Verdana; }

O seletor class

Pode-se criar classes para os seletores. A vantagem é que podemos usar o mesmo elemento de diversas formas. Por exemplo, se quisermos ter duas classes diferentes de parágrafos, um com o texto alinhado à direita e outro com o texto centralizado, basta definir:

p.direita { text-align: right; } p.centro { text-align: center; }

Depois, no documento HTML, é só indicar:

<p class="direita">Este texto ficará alinhado à direita</p> <p class="centro">Este texto ficará centralizado</p> Info

Apenas UMA classe de atributo pode ser usada num mesmo elemento! <p class="direita" class="centro">este é um parágrafo</p> está errado!

As classes não precisam necessariamente estar associadas a um elemento. Estas classes genéricas podem ser usadas com vários elementos que as aceitem, por exemplo:

.centro { text-align: center; } que depois pode ser usada em <h1 class="centro">Título centralizado</h1> <p class="centro">Parágrafo centralizado</p>

O seletor id

Também podemos definir estilos para elementos HTML com o seletor id. O seletor id é definido como #. Se definirmos um id como

#verde { color: green; }

poderemos atribuir este estilo para qualquer elemento identificado como "verde". Por exemplo:

<p id="verde">Este texto aparecerá em verde</p> <h2 id="verde">Este título aparecerá em verde</h2>

Se quisermos restringir a id a algum elemento, como por exemplo o parágrafo, determinamos:

p#vermelho { color: red; } Info

NÃO comece o nome de uma classe ou de uma id com um número.
O Mozilla/Firefox vai estrilar!

Comentários

Se você quiser inserir comentários nos seus arquivos .css (e deve mesmo, porque depois de alguns meses você não vai lembrar chongas do que fez), você pode usar os delimitadores de área /* e */ ou o comentário de linha //.

/* Toda esta área fica invisível. Os navegadores não tomam conhecimento da sua existência */ p { color : black; font-size: 10px; } // esta linha também será solenemente ignorada!

Informações adicionais