CSS - Manual básico sobre estilo

Aprenda como desenvolver sites web mais bonitos, com uma melhor apresentação visual e, ao mesmo tempo, fácil de administrar. Conheça a CSS, as folhas de estilo em cascata.

[ Hits: 40.458 ]

Por: Juliao Junior em 23/06/2009


Inserindo as folhas de estilo



Quando um navegador lê uma folha de estilo, ele irá formatar o documento de acordo com ela. Existem três maneiras de inserir uma folha de estilo:

Folha de estilo externa

Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas. Com uma folha de estilos externa, você pode mudar a aparência de um site inteiro, alterando um único arquivo. Cada página deve indicar a folha de estilo usada como base por meio da tag "link", como já vimos anteriormente. A tag link deve estar dentro da seção "head" do arquivo HTML. Veja:

<head>
<link rel="stylesheet" type="text/css" href="meuestilo.css" />
</head>

O browser lerá as definições de estilo a partir do arquivo meuestilo.css e formatará o documento de acordo.

Uma folha de estilos externa pode ser escrita em qualquer editor de texto. Porém, sugiro os editores bem "simples", como nano, gedit ou mesmo o vim ou emacs. Nada de OpenOffice e companhia, pois esses editores mais sofisticados alteram o conteúdo do arquivos para melhorar sua aparência e seu uso pelo programa. O arquivo .css não deve conter quaisquer tags HTML. E, obviamente, a folha de estilo deve ser salva com extensão .css. Veja um exemplo de folha de estilo:

hr (color: sienna)
p (margin-left: 20px)
body (background-image: url ( "images/back40.gif"))

Lembre-se: Não deixe espaços entre o valor da propriedade e as unidades! Por exemplo, usar "margin- left: 20 px" (e não usar "margin-left: 20px") só irá funcionar no IE, mas não funcionará no Firefox ou Opera.

Folha de estilo interna

Uma folha de estilo interna deve ser utilizada quando um determinado documento tem um estilo único.

Você define os estilos internos na seção "head" usando a tag <style>, como neste exemplo:

<head>
<style type="text/css">
hr (color: sienna)
p (margin-left: 20px)
body (background-image: url ( "images/back40.gif"))
</style>
</head>

O browser agora lê as definições de estilo e formata o documento de acordo com elas.

Lembre-se: Um browser normalmente ignora tags desconhecidas. Isto significa que um browser que não suporta estilos, vai ignorar a tag "style", mas seu conteúdo será exibido na página. É possível evitar que um browser antigo faça isso, ou seja, não exibir o conteúdo das definições de estilo. Para isso incluímos as definições entre comentários do HTML. Veja:

<head>
<style type="text/css">
<! --
hr (color: sienna)
p (margin-left: 20px)
body (background-image: url ( "images/back40.gif"))
->
</style>
</head>

Estilos em linha

Um estilo "em linha" perde muitas das vantagens das folhas de estilo, misturando conteúdo com apresentação. Use este método o mínimo possível, por exemplo quando um estilo será aplicado uma única vez em um elemento.

Para utilizar estilos "em linha" usar o atributo "style" na respectiva tag. Este atributo style pode conter qualquer propriedade CSS. Veja um exemplo de como alterar a cor e a margem esquerda de um parágrafo:

<p style="color:sienna;margin-left:20px"> Este é um parágrafo. </p>

Múltiplas folhas de estilo

Se algumas propriedades foram indicadas para o mesmo seletor em diferentes folhas de estilo, os valores serão herdadas da folha de estilo mais específica. Por exemplo, uma folha de estilos externa tem estas propriedades para o seletor h3:

h3 {
   color: red;
   text-align: left;
   font-size: 8pt
}

E uma folha de estilo interna tem estas propriedades para o seletor h3:

h3 {
   text-align: right;
   font-size: 20pt
}

Se a página com a folha de estilo interna também tem links para a folha de estilo externa, as propriedades de h3 serão:

color: red;
text-align: right;
font-size: 20pt

O que aconteceu? A cor foi herdada da folha de estilos externa, mas o alinhamento do texto e o tamanho da fonte foram substituídos pela folha de estilo interna. Traduzindo, o que estiver indicado na folha de estilos mais específica será utilizado, depois a segunda folha de estilos mais específica é usada, e assim por diante.

Conclusão

É isso, pessoal. Para os iniciantes, já serviu como uma boa base para começar. E para os avançados, aí está uma referência rápida. No próximo artigo veremos pontos mais específicos: como aplicar estilos de background (cor, imagem, etc), de texto, de fonte, e o importante conceito do modelo da caixa.

Até o próximo!

O segundo artigo desta série está na página Manual de Estilo - Parte 2.

Página anterior    

Páginas do artigo
   1. Introdução
   2. Sintaxe
   3. Seletores
   4. Inserindo comentários
   5. Inserindo as folhas de estilo
Outros artigos deste autor

Programação: Uso de funções

Convença outros a usar Linux!

Instalação ou Recuperação do GRUB

APT - Fantástico gerenciador de pacotes

Emacs - Poderoso ambiente de trabalho

Leitura recomendada

Criando JPG animado com o JpegAnim

Web sites para TODOS

DesignCap - Ferramenta de design gráfico para leigos

Aplicações para webdesign

BlueGriffon, o dreamweaver do Linux

  
Comentários
[1] Comentário enviado por tayma em 23/06/2009 - 17:33h

selector (propriedade: valor) esta errado, o correto seria selector {propriedade: valor}

[2] Comentário enviado por tayma em 23/06/2009 - 17:36h

Não consegui editar o comentário, faltou a fonte também. Texto traduzido de http://www.w3schools.com/css/css_intro.asp

[3] Comentário enviado por ribafs em 23/06/2009 - 19:21h

Olá Cícero!

Gostei muito do seu artigo. Bem didático.
O CSS não é algo tão intuitivo quanto o HTML, portanto não é fácil algo tão didático.
Parabéns.

Eu escrevi um breve artigo sobre Sprites em CSS, onde apanhei bastante para entender como funcionam as várias formas de posicionar algo na tela com CSS. Acredito que possa interessar também:
http://ribafs.org/portal/colaboracoes/1-ribamar-fs/123-sprites-em-css

[4] Comentário enviado por juliaojunior em 23/06/2009 - 19:42h

Oi rebafs,

lerei seu artigo. E sugiro que pense em publicar suas matérias no VOL, afinal sempŕe é bom disponibilizar material de qualidade. para a comunidade.

[5] Comentário enviado por juliaojunior em 24/06/2009 - 00:23h

Olá, tayma.

Acho desnecessário o link indicado por você, pois logo no início da matéria falei claramente que era uma tradução livre. Inclusive indiquei o endereço do site, comentando que a fonte tem matéria muito mais extensa do que apenas CSS. Bem, talvez você não tenha lido com a devida atenção. Mas tudo bem, fica o registro :)

[6] Comentário enviado por Teixeira em 24/06/2009 - 08:12h

juliaojunior:
Excelente a sua iniciativa. Em lingua portuguesa, quando se fala em CSS lembra-se logo do Maujor, que é um dos pouquíssimos que abordam esse tema com propriedade e leveza. Estava realmente faltando um trabalho como o seu, de vez que o texto da W3C por vezes não é muito amigável para iniciantes.

ribafs:
Por que você não escreve a respeito aqui no VOL? Seria bastante útil.


A princípio, e devido a necessidade de trabalhar com inúmeros browsers antigos, fiquei restrito ao uso de tabelas e coisas típicas do HTML, e passaram a ser muito comuns para mim, já que eu passei a dominá-las.

Achei a princípio CSS uma coisa supérflua (já que eu conseguia fazer "tudo" em HTML); penei com os "floatings" que "não funcionavam", mas depois percebi que era problema de bios ("Botaram um Imbecil Operando o Sistema").

Aí resolvi criar vergonha e coragem, e realmente APRENDER alguma coisa de CSS.

Hoje, embora ainda use HTML (às vezes 1.0) para os sites referentes a distros antigas, uso constantemente CSS nos sites
institucionais contemporâneos.

Agora não quero saber de outra vida.

Como o meu pequeno conhecimento da matéria não me permite escrever a respeito, esse artigo veio a calhar, pois sempre é bom rever alguns conceitos conhecidos enquanto aprendemos algo de novo.

Espero que o tema continue e que seja enriquecido cada vez mais.







[7] Comentário enviado por removido em 13/07/2009 - 15:18h

Referente a inserção do CSS no HTML também faltou a opção @import:

<style type="text/css">
@import url('exemplo1.css');
@import url('exemplo2.css');
</style>

Bastante prático.

[8] Comentário enviado por rodrigozanuzzo em 11/08/2009 - 16:09h

Bom artigo Cicero.
Gosto de trabalhar com HTML, não sou nenhum profissional, mas gosto de brincar de vez em quando, sei pouco de CSS e esse artigo vai me ajudar muito.
Abraço.

[9] Comentário enviado por felipemartinsss em 27/08/2009 - 11:01h

Valeu.
Bom artigo.
Mas ta precisando de uma continuação.

Abraço.

[10] Comentário enviado por removido em 06/11/2009 - 20:44h

Muito interessante o tutorial.

[]'s

[11] Comentário enviado por wos- em 19/11/2009 - 15:29h

Cara, ótimo, eu já conhecia o W3schools. mas meu inglês
é pessimo, e seu tutorial resolve o problema. valeu!


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts