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: 32.934 ]
Por: Manuel Tavares em 13/06/2008
Como criar/aplicar?
A criação/aplicação dos estilos nos elementos HTML é feito de três formas:
Na maioria das vezes o que utiliza é um arquivo separado com todos os estilos, tipo "estilo.css", onde incluímos ou chamamos para as páginas que quisermos utilizar alguma formatação. Esta forma garante maior flexibilidade na alteração do estilo no arquivo, sem que seja necessário abrirmos arquivo a arquivo para alterar um estilo ou tag para alterar.
Ainda se pensarmos na própria organização do código é mais simples esta opção. As outras duas opções são válidas e utilizáveis, pois por vezes apenas queremos aplicar o estilo a dois ou três elementos, não necessitando de chamar um arquivo com cinco ou dez linhas de formatação.
Onde o href indica o caminho e o arquivo que contém as formatações. Muito mais simples torna-se ainda se este estiver num cabeçalho de uma página baseado em "Includes", evitando a repetição ou várias chamadas. Eventualmente podemos ainda chamar vários arquivos diferentes ficando a sintaxe da seguinte forma:
No próximo tópico vamos ver a junção destes três originando no que chamamos de efeito cascata.
- Através de um arquivo externo à página;
- Bloco separado, mas dentro da mesma página;
- "Inline" diretamente no elemento HTML.
Na maioria das vezes o que utiliza é um arquivo separado com todos os estilos, tipo "estilo.css", onde incluímos ou chamamos para as páginas que quisermos utilizar alguma formatação. Esta forma garante maior flexibilidade na alteração do estilo no arquivo, sem que seja necessário abrirmos arquivo a arquivo para alterar um estilo ou tag para alterar.
Ainda se pensarmos na própria organização do código é mais simples esta opção. As outras duas opções são válidas e utilizáveis, pois por vezes apenas queremos aplicar o estilo a dois ou três elementos, não necessitando de chamar um arquivo com cinco ou dez linhas de formatação.
1. Arquivo externo
Para aplicar CSS utilizando um arquivo externo, utilizamos a seguinte sintaxe:
<head>
<link rel="stylesheet" type="text/css"
href="estilo.css" />
</head>
<link rel="stylesheet" type="text/css"
href="estilo.css" />
</head>
Onde o href indica o caminho e o arquivo que contém as formatações. Muito mais simples torna-se ainda se este estiver num cabeçalho de uma página baseado em "Includes", evitando a repetição ou várias chamadas. Eventualmente podemos ainda chamar vários arquivos diferentes ficando a sintaxe da seguinte forma:
<head>
<link rel="stylesheet" type="text/css" href="estilo_1.css" />
<link rel="stylesheet" type="text/css" href="estilo_2.css" />
<link rel="stylesheet" type="text/css" href="estilo_3.css" />
</head>
<link rel="stylesheet" type="text/css" href="estilo_1.css" />
<link rel="stylesheet" type="text/css" href="estilo_2.css" />
<link rel="stylesheet" type="text/css" href="estilo_3.css" />
</head>
2. Na mesma página
A aplicação da mesma página consiste em utilizar a tag HTML <b><style type="text/css"></b> e o código tal como se estivesse num arquivo separado. Vejamos um exemplo:
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
3. Inline
Finalmente temos esta forma simples utilizada diretamente nas tags HTML, seguindo esta sintaxe:
<p style="margin-left: 20px">CSS em ação</p>
No próximo tópico vamos ver a junção destes três originando no que chamamos de efeito cascata.
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
BlueGriffon, o dreamweaver do Linux
Criando JPG animado com o JpegAnim
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.
Destaques
Artigos
Compartilhando a tela do Computador no Celular via Deskreen
Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota
Configuração para desligamento automatizado de Computadores em um Ambiente Comercial
Dicas
Como renomear arquivos de letras maiúsculas para minúsculas
Imprimindo no formato livreto no Linux
Vim - incrementando números em substituição
Efeito "livro" em arquivos PDF
Como resolver o erro no CUPS: Unable to get list of printer drivers
Tópicos
Não to conseguindo resolver este problemas ao instalar o playonelinux (1)
Excluir banco de dados no xampp (1)
Top 10 do mês
-
Xerxes
1° lugar - 65.670 pts -
Fábio Berbert de Paula
2° lugar - 51.062 pts -
Buckminster
3° lugar - 17.609 pts -
Mauricio Ferrari
4° lugar - 15.360 pts -
Alberto Federman Neto.
5° lugar - 14.010 pts -
Diego Mendes Rodrigues
6° lugar - 13.653 pts -
Daniel Lara Souza
7° lugar - 13.034 pts -
Andre (pinduvoz)
8° lugar - 10.407 pts -
edps
9° lugar - 10.586 pts -
Alessandro de Oliveira Faria (A.K.A. CABELO)
10° lugar - 10.480 pts
Scripts
[Python] Automação de scan de vulnerabilidades
[Python] Script para analise de superficie de ataque
[Shell Script] Novo script para redimensionar, rotacionar, converter e espelhar arquivos de imagem
[Shell Script] Iniciador de DOOM (DSDA-DOOM, Doom Retro ou Woof!)
[Shell Script] Script para adicionar bordas às imagens de uma pasta
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:
