CSS pela W3schools (Parte 1) - Uma introdução
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: 31.216 ]
Por: Manuel Tavares em 13/06/2008
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:
Neste caso, temos apenas uma propriedade, caso tenhamos mais propriedades estes deverão ser separados por ";", por exemplo:
Outras características/sintaxe vamos ver nos próximos tópicos, incluindo um caso prático de formatação utilizando folhas de estilos.
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
}
{
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á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
Leitura recomendada
CSS - Manual básico sobre estilo
Criando JPG animado com o JpegAnim
BlueGriffon, o dreamweaver do Linux
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.
Amigo, se é para apenas traduzir, é mais fácil então sugerir que as pessoas façam um curso de inglês.
[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.
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.
[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.
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.
[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
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
[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
"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
[7] Comentário enviado por flpe007 em 17/06/2008 - 08:17h
Parabéns Brother, ótima iniciativa!!!!
quero ver a parte 2!!! =)
Parabéns Brother, ótima iniciativa!!!!
quero ver a parte 2!!! =)
[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
Meu caro Tony, Ctrl+C, Ctrl+v, mas pelo menos tem fonte e não liga pros outro, gostei, força
[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
Very Good Site and awesome writing too , and great thanks to the writer
http://supernsetips.com/Best-Options-tips-basic-Intraday-positional.html
Patrocínio
Site hospedado pelo provedor RedeHost.
Artigos
Compilação e instalação do Vim e habilitando a copiar e colar com o mouse
Instalando e Usando a Versão Mais Recente do BleachBit no Linux
Dicas
Usar o WoeUSB-ng no Debian para criar um pendrive bootável
Desligar Windows remotamente pelo Linux
Fazendo o Softplan Websginer funcionar no Firefox
Configuração de impressão do SIAFI no Ubuntu
Como instalar SNES9X Emulador de Super Nintendo para Ubuntu via terminal
Tópicos
Vocês acham que a facilidade de utilização dos SO (tanto windows quant... (0)
Já pensou que usar Linux pode ser sintoma de depressão? (8)
Top 10 do mês
-
Xerxes
1° lugar - 64.458 pts -
Fábio Berbert de Paula
2° lugar - 55.457 pts -
Clodoaldo Santos
3° lugar - 45.335 pts -
Buckminster
4° lugar - 31.162 pts -
Diego Mendes Rodrigues
5° lugar - 27.290 pts -
Mauricio Ferrari
6° lugar - 23.937 pts -
Daniel Lara Souza
7° lugar - 22.785 pts -
Alberto Federman Neto.
8° lugar - 21.976 pts -
Lisandro Guerra
9° lugar - 15.682 pts -
leandro peçanha scardua
10° lugar - 14.802 pts
Scripts
A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.
Site hospedado por:
