CSS - Manual básico sobre estilo

juliaojunior

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

Por: Juliao Junior em 23/06/2009

0 0

Denuncie Favoritos Indicar Impressora

Sintaxe

A sintaxe das CSS é composta por três partes: um seletor, uma propriedade e um valor, da forma abaixo:

selector (propriedade: valor)

O selector é normalmente o elemento HTML, ou tag, que você deseja definir, a propriedade é o atributo que você deseja mudar, e cada propriedade pode ter um valor. A propriedade e o valor são separados por dois pontos, e cercado por chavetas, por exemplo:

body (color: black)

Nota: Se o valor possui mais de uma palavra, devemos colocar aspas em torno do valor:

p (font-family: "sans serif")

Se você quiser especificar mais de uma propriedade, deve separar cada propriedade com um ponto e vírgula. O exemplo abaixo mostra como definir um parágrafo centralizado, com texto de cor vermelha:

p (text-align: center; color: red)

E para tornar as definições de estilo mais legíveis, podemos descrever uma propriedade por linha, como visto abaixo:

p {
   text-align: center;
   color: black;
   font-family: Arial
}

Agrupamento

Você também pode agrupar seletores. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos de cabeçalho. Todos os elementos de cabeçalho serão exibidos com texto de cor verde:

H1, H2, H3, H4, H5, H6 {
color: green
}

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

Octave - Programação científica no Linux (parte 2)

Alinhamento em folhas de estilo - CSS

Grace - Usando a função "Regression"

Por que os GAMES não são a chave para o Linux em desktops

GRIP - Conversão e ripagem de CDs em Linux

Leitura recomendada

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

DesignCap - Ferramenta de design gráfico para leigos

Criando JPG animado com o JpegAnim

Aplicações para webdesign

Web sites para TODOS

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}

0 0

[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

0 0

[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

0 0

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

0 0

[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 :)

0 0

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

0 0

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

0 0

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

0 0

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

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

Abraço.

0 0

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

Muito interessante o tutorial.

[]'s

0 0

[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!

0 0