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

Por: Juliao Junior em 23/06/2009

0 0

Denuncie Favoritos Indicar Impressora

Introdução

Há pouco tempo passei a estudar um pouco sobre HTML/XHTML. Daí, acredito que como todos que fazem isso, dei de cara com as CSS, folhas de estilo em cascata. Encontrei boas matérias, mas uma única fonte, com boa referência para CSS "em geral", demorei um pouco ver. Com um pouco de pesquisa, encontrei.

Neste artigo estou trazendo mais uma tradução livre de bom material disponível apenas em inglês. Para quem quiser se aventurar no original, o link é www.w3schools.com/ e possui material não apenas sobre CSS, mas sobre HTML, XHTML, XML, ASP, PHP, JavaScript, e sei lá mais o quê! É muita coisa mesmo.

Vamos ver uma compilação sobre os principais pontos das folhas de estilo, e você só precisa saber o básico sobre HTML. Acredito que será útil tanto para os iniciantes como para os mais avançados, estes últimos podendo utilizar o artigo como fonte de referência rápida. Portanto, mãos à obra.

O que é CSS

CSS significa Cascading Style Sheets, algo como Folhas de Estilo em Cascata.
Estilos definem como mostrar elementos HTML na tela.
Estilos normalmente são guardados em ´folhas de estilo´.
Estilos foram adicionados ao HTML 4.0 para resolver um problema.
Folhas de Estilo Externas podem evitar um bocado de trabalho.
Definições de estilo múltiplas serão usados em cascata.

O uso de estilos resolveram um grande problema

O HTML nunca teve o objetivo de conter tags para a formatação de um documento. Tags HTML deveriam ser destinadas a definir o conteúdo de um documento, como:

Este é um parágrafo.

Este é um título

Quando tags como <font> e atributos como ´color´ foram adicionadas à especificação HTML 3.2, começou um pesadelo para os desenvolvedores web. Desenvolvimento de grandes sites, onde fontes e cores tiveram de ser organizados a cada página do site, acabou sendo um processo longo, caro e indevidamente tortuoso.

Para resolver este problema, a World Wide Web Consortium (W3C) - responsável pela padronização do HTML - criou as CSS em adição ao HTML 4.0. Com o HTML 4.0, toda a formatação pode ser removida do documento HTML e armazenada em um arquivo CSS separado. Todos os navegadores atuais suportam CSS.

Usar estilos economiza um monte de trabalho

Folhas de estilos definem como elementos HTML devem ser exibidos. Os estilos normalmente são salvos em arquivos ´.css´ diferentes dos arquivos HTML. Tais folhas de estilo salvos assim nos permitem alterar a aparência e o layout de todas as páginas em um site, editando apenas um documento CSS.

Vários estilos "cairão" em cascata sobre um único objeto

Folhas de estilo permitem que o estilo das informações possam ser indicados de diversas maneiras.

Estilos podem ser indicados:

dentro de um elemento HTML
dentro da seção head de uma página HTML
em um arquivo CSS externo

Dica: Múltiplas folhas de estilo externas podem ser usadas no interior de um único documento HTML.

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

Atualização para o Ubuntu 10.10

Alinhamento em folhas de estilo - CSS

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

Baixando ISOs-Linux em altíssima velocidade

Guia Introdutório do Linux III

Leitura recomendada

DesignCap - Ferramenta de design gráfico para leigos

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

Web sites para TODOS

BlueGriffon, o dreamweaver do Linux

Criando JPG animado com o JpegAnim

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