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: 42.207 ]

Por: Juliao Junior em 23/06/2009


Inserindo comentários



Comentários em CSS

Como em qualquer linguagem, comentários são usados para explicar o seu código, e podem ajudar quando você editar o código-fonte em uma data posterior. Um comentário será ignorado pelos browsers, e em CSS começa com "/*" e termina com "*/", como este:

/ * Este é um comentário * /
p {
   text-align: center;
   / * Este é outro comentário * /
   color: black;
   font-family: Arial
}

Exemplos

O arquivo HTML abaixo utiliza uma folha de estilos externa com a tag "link". Veja:

<html>

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

<h1>Este cabeçalho tem 36 pt</h1>
<h2>Este cabeçalho é azul</h2>

<p>Este parágrafo tem uma margem esquerda
de 50 pixels</p>

Este é o conteúdo do arquivo com a folha de estilo (ex1.css) indicado na tag "link" visto acima:

body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}

Outro exemplo no uso de folhas de estilo externa:

<html>
<link rel="stylesheet" type="text/css" href="ex2.css" />

<h1>Este é um cabeçalho do tipo h1</h1>
<hr />

<p>Você pode ver que a folha de estilo
formata o texto</p>

<p><a href="http://www.w3schools.com" target="_blank">Este é um link</a></p>

Abaixo, como ficaria o conteúdo do arquivo com a folha de estilo indicado acima (ex2.css):

body {background-color: tan}
h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link     {color:green}
a:visited  {color:yellow}
a:hover    {color:black}
a:active   {color:blue}

Teste em seu computador e veja as mudanças que a folha de estilo causam na aparência da página.

Salve os arquivos HTML e os .css na mesma página, e depois acesse os arquivos HTML normalmente como você sempre faz. Você verá como o uso de folhas de estilo alteram a formatação dos elementos.

Página anterior     Próxima página

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

Debian Pure Blends - Distro-VOL?

Inkscape - Introdução (parte 1)

Real Football 2012 - Futebol de qualidade no Android

Grace - Gráficos em ciência

Guia (nem tanto) Introdutório do Linux

Leitura recomendada

CSS pela W3schools (Parte 1) - Uma introdução

CSS - Manual de Estilo (parte 3)

Web sites para TODOS

Aplicações para webdesign

DesignCap - Ferramenta de design gráfico para leigos

  
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

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts