Tweet
não sei da onde veio o CSS e Tenho raiva de quem sabe , 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):
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:
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
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:
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 é 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:
o plano de fundo funciona quase do mesmo jeito, só que com o comando background-color, exemplo:
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:
bom, então vamos definir aqui um exemplo de definição de cores para um site:
agora vamos agora para a configuração das fontes do site:
font-family, ou seja, familia de fonte, exemplo:
font-style é o estilo da fonte, por exemplo:
nesse caso fica tudo em arial e italico
font-size, seria o tamanho da fonte em px:
bom agora vamos configurar as fontes em nosso exemplo também:
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:
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.
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):
<html>
<head>
<title> Meu Site em CSS </title>
</head>
<body>
</body>
</html>
<head>
<title> Meu Site em CSS </title>
</head>
<body>
</body>
</html>
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>
no código coloquei
Código:
<div id="alguma-coisa"><!--conteudo--></div>
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:
Código:
h1 {font-size: 20px;
font-family: arial;
color: blue;}
{ } 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:
Código:
p {color: blue;}
ou
p {color: #0000FF;}
Código:
p {background-color: black;}
Código:
#windows {background-image: url("caminho-da-imagem.jpg");}
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:
Código:
h1 {font-family: arial;}
Código:
h2 { font-family: arial; font-style: italic; }
font-size, seria o tamanho da fonte em px:
Código:
h1 { font-family: arial; font-size: 20px; }
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> <link rel="stylesheet" type="text/css" href="style/arquivo-css.css"/> </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.
mas aconselho a quem quer mexer com web design a aprender essa linguagem porque ela simplifica muitos trabalhos que realmente darião "trabalho"
Comment