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.432 ]

Por: Manuel Tavares em 13/06/2008

0 0

Denuncie Favoritos Indicar Impressora

A magia do CSS

Uma vez vistos os conceitos básicos, vamos ver a aplicação, isto é, a diferença em ter ou não CSS aplicada a uma página.

Vá no menu Arquivo do teu browser e salve para ambiente trabalho a página do VOL. Agora vá na pasta que foi criada e mude o nome do arquivo "linux.css" e altere para "linux_1.css". Agora abra a página salvada no ambiente trabalho no browser e veja o resultado.

É, assim seria o VOL sem o CSS. Agora vamos ver a prática.

Crie dois arquivos, um com o nome de "teste.html" e outro com "estilo.css". Para arquivo teste.html copie o seguinte código:

<html>
<head>

</head>
<body>
<P>Folha de estilos (CSS)</P>

<TABLE>
<TR><TD>1</TD><TD><a href=''>O que é CSS??</a></TD></TR>
<TR><TD>2</TD><TD><a href=''>Sintaxe CSS</a></TD></TR>
<TR><TD>3</TD><TD><a href=''>Como criar/aplicar?</a></TD></TR>
<TR><TD>4</TD><TD><a href=''>Efeito cascata</a></TD></TR>
<TR><TD>5</TD><TD><a href=''>A magia do CSS</a></TD></TR>
<TR><TD>6</TD><TD><a href=''>Conclusão</a></TD></TR>
</TABLE>
<br>

<div>Esta tabela recebeu a formatação CSS para que ficasse a 7 pixels da margem esquerda<br>
e as sua bordas fininhas. Como podes reparar o texto contendo link é sempre verde e fica sublinhado ao passares<br>
com o mouse em cima. O título em cima tem um rectângulo verde antes do texto feito a base do tamanho da borda esquerda<br>
definida 10 pixel.</div><BR>

</body>
</html>

E para o outro arquivo copie o seguinte código:

table {
    font-family: sans-serif;
    font-size:8pt;
    color: #636363;
border-bottom: 2px solid black;
border-right: 3px solid black;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 2px solid black;
background-color:#CCCCCC;
margin-left:15px;
margin-top:5px;
}

td {
    border:1px solid #000000;
    background-color:#ffffff;
    padding:3px;
}

p {
    margin-left: 7px;
    font: normal/bolder sans-serif;
    color: #636363;
    font-size: 14pt;
    text-align: left;
    border-left: 10px solid #006C00;
}

div{
    font-family: sans-serif;
    font-size:10pt;
    color: #636363;
    margin-left:15px;

}

a:link{color:#006C00;text-decoration:none;}
a:visited{color:#006C00;text-decoration:none;}
a:hover{color:#006C00;text-decoration:underline;}

Agora abra o primeiro arquivo no browser e veja como ficou. Sei, ficou feio, agora coloque o código abaixo entre o <head><head/> no primeiro arquivo, salve e teste novamente.

Considerações

Este artigo mostra de forma simples/básica o que é e como é importante a utilização de CSS. Porém muito ainda falta por dizer sobre CSS, tal como classes, id, efeitos especiais etc. Questões mais avançadas teremos oportunidade de ver num próximo artigo, espero que tenha contribuído em alguma coisa. Até!

Referências:

http://www.w3schools.com/css/default.asp (básico e avançado)

Página anterior

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

Aplicações para webdesign

Criando JPG animado com o JpegAnim

BlueGriffon, o dreamweaver do Linux

CSS - Manual básico sobre estilo

CSS - Manual de Estilo (parte 3)

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