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

mtavares

Estive na w3schools vendo algumas especificações, a forma correta de fazer as coisas e lendo tudo de novo como quem não soubesse nada. Por isso surgiu a idéia de escrever, traduzir em forma de resumo, o que a w3schools ensina em termos CSS básico.

[ Hits: 33.649 ]

Por: Manuel Tavares em 13/06/2008

0 0

Denuncie Favoritos Indicar Impressora

Sintaxe CSS

Vamos ver aqui a sintaxe básica de CSS. Outros exemplos mais avançados farão parte de um outro artigo, convém aprender o simples, principalmente tratando de CSS.

A sintaxe padrão é composta por um "selector" que normalmente está associado a um elemento ou tag Html. Exemplo: p, body, a, font, table. E através deste podemos definir para toda a página como é que estes elementos devem ficar.

A outra parte é composta pela propriedade que queremos manipular sobre o "selector" e, naturalmente, o valor associado que vai fazer variar as formatações. Deste modo, para definir um estilo para um link, teríamos:

a{color:#cccccc} ou seja selector{propriedade:valor}.

Neste caso, temos apenas uma propriedade, caso tenhamos mais propriedades estes deverão ser separados por ";", por exemplo:

a{color:#cccccc;font-size:15pt;text-decoration:none;}

Agrupando vários elementos

Podemos ainda dizer que todos os "Headers", H1,H2,H3,H4 são iguais, isto é, tem o mesmo estilo. Como?

h1,h2,h3,h4,h5,h6
{
color: green
}

Outras características/sintaxe vamos ver nos próximos tópicos, incluindo um caso prático de formatação utilizando folhas de estilos.

Página anterior Próxima página

Páginas do artigo

   1. O que é CSS??
   2. Sintaxe CSS
   3. Como criar/aplicar?
   4. Efeito cascata
   5. A magia do CSS

Outros artigos deste autor

Google AdSense vs Layout de websites

Eu aprendi!

Leitura recomendada

Criando JPG animado com o JpegAnim

Web sites para TODOS

Aplicações para webdesign

CSS - Manual de Estilo (parte 3)

DesignCap - Ferramenta de design gráfico para leigos

Comentários

[1] Comentário enviado por fmpfmp em 13/06/2008 - 20:58h

Amigo, se é para apenas traduzir, é mais fácil então sugerir que as pessoas façam um curso de inglês.

0 0

[2] Comentário enviado por rafastv em 14/06/2008 - 01:23h

Parabéns!
Não há nada errado em traduções. nós devemos valorizar nossa língua nativa. Ao traduzir um texto, você o torna mais acessível para um conjunto bem maior de pessoas. Poderia ter explorado mais aspectos, mas vamos ver o próximo artigo. :-)
Apenas cuidado, pois o material da w3schools tem copyright e não garante a livre modificação e reprodução.

0 0

[3] Comentário enviado por mtavares em 14/06/2008 - 09:11h

O "traduzir" aqui não significa pegar no artigo da w3school e passar para português mas sim utilizar-la como suporte(standard) principal, pois se fosse só por traduzir eu não conseguiria fazer o artigo. Eu poderia simplesmente não citar a fonte, além do mais não foi utilizado somente a w3school, junta-se sempre as experências adquiridas noutras fontes e no dia a dia.

0 0

[4] Comentário enviado por thelinux em 14/06/2008 - 09:36h

mtavares parabéns pela iniciativa.

0 0

[5] Comentário enviado por skywishrfz em 14/06/2008 - 11:33h

só faltou deixar uma referencia para quem gosta ou quer ver a magia do css
aqui tem tudo isso, alem de um desafio para os quem deseja:

http://www.csszengarden.com/

bem legal, alem de ter zilhões de temas

0 0

[6] Comentário enviado por Teixeira em 14/06/2008 - 13:32h

"CASCADE STYLE SHEET"

Minha opinião:

Falo e escrevo Inglês, sou profissional de informática há muitos anos e, considerando apenas esses fatores, eu poderia muito bem 'desprezar' artigos traduzidos ao Português.

No entanto, acho que é muito mais valioso encontrarmos um artigo já traduzido - inclusive em seus aspectos mais difíceis - do que muitas vezes procurar entender o texto original.

Hoje em dia todo profissional de TI sabe o que é 'queue' e a diferença entre 'sort' e 'merge' (por exemplo), mas há poucos anos atrás isso não era verdade, e eram o terror dos aprendizes.

Portanto as traduções têm SIM, o seu valor.
Além do que, algum valor foi agregado a essa tradução em especial, sem o que simplesmente não passaria pelos critérios da moderação do VOL.
Quem já escreveu algum artigo ou dica para esta comunidade sabe do que estou falando.

Embora de forma incipiente, o artigo aborda um assunto muito interessante, e que talvez seja considerado 'difícil' por algumas pessoas, já que muitos têm dificuldades até mesmo com HTML.

A dificuldade que alguns poderiam ter, cai portanto por terra.

No entanto, não me pareceu muito clara a explicação da cascata, que dá nome ao estilo. Porém, essa explicação pode ser dada mais adiante, sem prejuízo algum.

Não acrescentou a mim, neste exato momento, nenhum conhecimento novo. Porém há apenas dois anos atrás, teria sido para mim o caminho das pedrinhas, já que o meu conhecimento de CSS era ZERO.
Há portanto uma considerável diferenciação.

Conclusão:
O autor está de parabéns pela iniciativa e espero que continue com essa mesma disposição.
Não se deixe abater pela oposição, porque ela sempre existirá.
Procure melhorar sempre, não importa o que você esteja fazendo, e tenha boa sorte!

PS.: o csszengarden (o jardim 'zen' do css) é uma excelente fonte de conhecimentos, bem como o site do maujor, que não deve ser esquecido.
O link é www.maujor.com

[ ]'s

0 0

[7] Comentário enviado por flpe007 em 17/06/2008 - 08:17h

Parabéns Brother, ótima iniciativa!!!!
quero ver a parte 2!!! =)

0 0

[8] Comentário enviado por iagoaugusto em 18/06/2008 - 09:42h

ParABens kRa foi Muito LeSgal...=/

0 0

[9] Comentário enviado por cvv em 18/06/2008 - 15:21h

Fera,

Não sabia disso ainda.

Valeu!

0 0

[10] Comentário enviado por comfaa em 28/10/2008 - 12:03h

muito bom

0 0

[11] Comentário enviado por rbn24 em 23/01/2009 - 14:44h

Meu caro Tony, Ctrl+C, Ctrl+v, mas pelo menos tem fonte e não liga pros outro, gostei, força

0 0

[12] Comentário enviado por stephy509487 em 19/11/2014 - 02:32h

Very Good Site and awesome writing too , and great thanks to the writer

http://supernsetips.com/Best-Options-tips-basic-Intraday-positional.html

0 0