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: 34.250 ]
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
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.
Destaques
Artigos
Como atualizar sua versão estável do Debian
Cirurgia para acelerar o openSUSE em HD externo via USB
Void Server como Domain Control
Dicas
Script de montagem de chroot automatica
Atualizar Linux Mint 22.2 para 22.3 beta
Jogar games da Battle.net no Linux com Faugus Launcher
Como fazer a Instalação de aplicativos para acesso remoto ao Linux
Tópicos
Instalar Dual Boot, Linux+Windows. (5)
Conky, alerta de temperatura alta (16)
De volta para o futuro - ou melhor, para o presente (parte 2) (3)
Top 10 do mês
-
Xerxes
1° lugar - 149.560 pts -
Fábio Berbert de Paula
2° lugar - 67.743 pts -
Buckminster
3° lugar - 22.656 pts -
Mauricio Ferrari
4° lugar - 21.212 pts -
Alberto Federman Neto.
5° lugar - 20.260 pts -
edps
6° lugar - 19.078 pts -
Daniel Lara Souza
7° lugar - 18.111 pts -
Andre (pinduvoz)
8° lugar - 16.604 pts -
Alessandro de Oliveira Faria (A.K.A. CABELO)
9° lugar - 15.886 pts -
Jesuilton Montalvão
10° lugar - 15.008 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:
