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

Por: Juliao Junior em 23/06/2009

0 0

Denuncie Favoritos Indicar Impressora

Seletores

As classes

Com as classes é possível definir diferentes estilos para o mesmo tipo de elemento HTML. Suponha que você gostaria de ter dois tipos de parágrafos em seu documento: um alinhado à direita, e um centralizado. Aqui está como fazer usando CSS:

p.right (text-align: right)
p.center (text-align: center)

A partir daí, para inserir esses estilos, precisaremos usar o atributo class no documento HTML:

<p class="right"> Este parágrafo será alinhado à direita. </p>
<p class="center"> Este parágrafo será centralizado. </p>

Para aplicar mais de uma classe em um mesmo elemento,, a sintaxe é:

<p class="center bold"> Este é um parágrafo. </p>

O parágrafo acima terá os estilos indicados da classe "center" e da classe "bold". Você também pode omitir o nome da tag ou do elemento quando escrever a definição de sua classe. Isso servirá para definir um estilo utilizado por todos os elementos HTML que possuem uma determinada classe. No exemplo abaixo, todos os elementos HTML com class = "center" serão centralizados:

.center (text-align: center)

No código abaixo tanto o elemento h1 como o elemento p possuem o seletor class = "center". Isto significa que ambos os elementos seguirão as regras do ".center" indicado acima:

<h1 class="center"> Este cabeçalho será centralizado</h1>
<p class="center"> Este parágrafo também será centralizado. </p>

Lembre-se: Não comece o nome de uma classe com um número! Não funcionará no Mozilla / Firefox.

Adicionar estilos a elementos com atributos particulares

Você também pode aplicar estilos para elementos HTML com atributos particulares. A regra de estilo abaixo irá funcionar com todos os elementos de input do tipo "text":

input [type = "text"] (background-color: blue)

O seletor id

Você também pode definir estilos para elementos HTML com o seletor id. O seletor id é definido com um "#". O exemplo do uso de estilos visto abaixo mostra a definição de um atributo ao seletor id com um valor "green":

#green (color: green)

Já a regra de estilo seguinte vale para o elemento p com um id com um valor "para1":

p #para1 {
text-align: center;
cor: red
}

Lembre-se: não inicie um ID com um número! Não funcionará no Mozilla / Firefox.

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

Inkscape - Introdução (parte 1)

Usando variáveis de ambiente

Instalação ou Recuperação do GRUB

Administração de sistema via WEB

Guia (nem tanto) Introdutório do Linux

Leitura recomendada

Criando JPG animado com o JpegAnim

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

CSS - Manual de Estilo (parte 3)

DesignCap - Ferramenta de design gráfico para leigos

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}

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