Pesquise no PCFórum - Digite sua dúvida aqui
Bem-vindo, Visitante. Por favor efetue Login ou Registre-se
PCFORUM.com.br

    
Notícias:
  Home Fórum Notícias Anuncie AjudaLoginCadastre-se  
 

Tutorial: CSS Básico (Lido 9721 vezes)   
hoOmE


Offline



Postagens: 3645
São Paulo - SP
Tutorial: CSS Básico
09.07.2008 às 00:49:45
 
não sei da onde veio o CSS e Tenho raiva de quem sabe  Gargalhando , não vou ensinar como o CSS começou ou o que ele significa e sim dar uma introdução de como começar a usa-lo (apósto que é isso que você queria).

bom, existem varias formas de se usar o CSS em uma página de HTML, mais vamos usar a melhor delas, pelo menos na minha opnião é a melhor, que é o modo externo (página linkada ao arquivo de CSS), bom vamos começar, primeiro vamos criar uma página HTML básica (para treinar use o proprio bloco de notas, melhor do que usar ferramentas gráficas, se você não sabe HTML nem vale a pena aprender CSS):

Código:
<html>
<head>
  <title> Meu Site em CSS </title>
</head>
<body>

</body>
</html> 



já temos a página básica, mais para usar o CSS o mais certo é dividir a página como: banner, topo, rodape, menu, geral... para isso usamos a tag div:

Código:
<html>
<head>
  <title> Meu Site em CSS </title>
</head>
<body>
<div id="geral">

  <div id="topo">
  <!--aqui vai o topo da página, ou seja, o logotipo ou nome do site-->
  </div>
  
  <div id="menu">
  <!--aqui vai o menu da página-->
  </div>

  <div id="conteudo">
  <!--aqui vai todo o conteudo dá página-->
  </div>

  <div id="rodape">
  <!--aqui vai o rodapé da pág, como o copyrigth por exemplo-->
  </div>

</div>
</body>
</html> 



bom, temos um HTML totalmente completo, você já pode colocar o conteudo, mais não se preocupe com a formatação, deixe isso com o CSS.

no código coloquei Código:
<div id="alguma-coisa"><!--conteudo--></div> 

o id serve apenas para o CSS localizar as div na página, você pode colocar o nome que bem entender, mais lembre-se de alterar o nome no arquivo CSS tb, falando no arquivo CSS vamos cria-lo, já que não adiata só o arquivo ".htm", mais também precisamos do arquivo ".css", crie um no bloco de notas, um simples arquivo com a extenção .css, recomendo o nome style.css, css.css, css01.css, style1.css... mais não é obrigatório, coloque também o nome que bem intender.

prontinho, o arquivo css esta criado, mais como a página sabera que o CSS estara ali?

para isso é usado o comando:

Código:
<html>
<head>
  <title> Meu Site em CSS </title>
  <link rel="stylesheet" type="text/css" href="style/arquivo-css.css"/>
</head>
<body>
<div id="geral">...
 



bom, agora vamos começar a criar comandos para o CSS, queremos de começo decorar o h1 (titulo) em azul arial 20 pixells colocamos assim no css:

h1 {font-size: 20px;
     font-family: arial;
     color: blue;}

h1 é a tag, se você colocar ali p, todo o texto em paragrafos no seu site ficara em 20pixells arial e azul!

{ } servem para abrir e fechar o estilo que esta sendo aplicado aquele individuo (h1, p, hr...)

o ; serve para indicar que aquele comando acabou e que o css tem que partir para o proximo!

agora que você já entendeu o básico, vamos então explicar como estilizar um site

para se definir por exemplo a cor de qualquer texto usamos a tag color e logo após a cor em inglês ou em hexadecimais, exemplo:

p {color: blue;}
ou
p {color: #0000FF;}

o plano de fundo funciona quase do mesmo jeito, só que com o comando background-color, exemplo:

p {background-color: black;}

bom, aposto que você não quer colocar uma cor de fundo, mais sim uma imagem, para isso use o comando backgorund-imagem, desse jeito:

#windows {background-image: url("caminho-da-imagem.jpg");}

bom, então vamos definir aqui um exemplo de definição de cores para um site:

Código:
body {backgorund-image: url("fundo.gif");}
#geral {backgorund-color: #FFFFFF;
            color:  #0000FF;} 



agora vamos agora para a configuração das fontes do site:

font-family, ou seja, familia de fonte, exemplo:

h1 {font-family: arial;}

font-style é o estilo da fonte, por exemplo:

h2 { font-family: arial; font-style: italic; }

nesse caso fica tudo em arial e italico

font-size, seria o tamanho da fonte em px:

h1 { font-family: arial; font-size: 20px; }

bom agora vamos configurar as fontes em nosso exemplo também:

Código:
body {backgorund-image: url("fundo.gif");}
#geral {backgorund-color: #FFFFFF;
            color:  #0000FF;}
h1 {font-family: arial; font-size: 20px; }
h2 { font-family: arial; font-style: italic; }
 



bom, agora já deu para ter uma ideia do CSS, só faltou uma coisa, você quer colocar fonte azul apenas naquele trexo (div) chamado de conteudo, para isso você usa o "#", assim:

#conteudo {color: blue;}
#geral {color: black;}

assim apenas no conteudo a fonte será azul e no resto será preto!

ainda por cima se você quiser colocar o mesmo layout (tema) em CSS para todas as páginas do seu hTML, não precisa fazer um CSS pra cada página, basta colocar o:

Código:
<html>
<head>
  <title> Meu Site em CSS </title>
  [b]<link rel="stylesheet" type="text/css" href="style/[i]arquivo-css.css[/i]"/>[/b]
</head>
<body>
<div id="geral">...
 



e isso é legal por que imagina que todo o texto de um site de 800 páginas em html estivesse em vermelho, ai o cliente quer para amanhã que todo o texto das 800 páginas sejam, azuis, em HTML puro nesse periodo você não conseguiria nunca, mais em CSS daki 5 min você pode ligar novamente para o cliente e dizer, esta pronto!!! basta auterar a cor do #conteudo no CSS que todas as paginas serão azuis automáticamente, e não intereça se são 10 ou 8 trilhões de páginas que você gastara os mesmo 5 min!

espero ter ajudado.
Voltar ao topo
 
« Última edição: 09.07.2008 às 00:59:55 por hoOmE »  
Visualizar Perfil WWW hoOmE hoOmE thehoome.prototype@gmail.com   IP registrado



Visite nossa página inicial e veja mais dicas e conteúdos! Clique aqui!!