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: 34.576 ]

Por: Manuel Tavares em 13/06/2008

0 0

Denuncie Favoritos Indicar Impressora

Como criar/aplicar?

A criação/aplicação dos estilos nos elementos HTML é feito de três formas:

Através de um arquivo externo à página;
Bloco separado, mas dentro da mesma página;
"Inline" diretamente no elemento HTML.

Qual a melhor?
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:

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:

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:

3. Inline

Finalmente temos esta forma simples utilizada diretamente nas tags HTML, seguindo esta sintaxe:

No próximo tópico vamos ver a junção destes três originando no que chamamos de efeito cascata.

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

CSS - Manual básico sobre estilo

CSS - Manual de Estilo (parte 3)

BlueGriffon, o dreamweaver do Linux

Criando JPG animado com o JpegAnim

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