Conhecendo CSS: Folha de Estilo - Plano de Fundo Fixo
E aí gente?!
Depois de um ano sem postagens, voltei aqui pra falar de web. No ultimo post, eu falei sobre uns links de poupups, e agora vou falar(digitar :D) um pouco sobre CSS e, como exemplo, mostrar como se faz aquele plano de fundo fixo no fundo do site, já é meio “manjado”, mais ainda tem gente que me pergunta como fazer, então, mostrarei como.
Primeiramente, CSS(Cascading Style Sheets) ou simplesmente Folha de Estilo como algumas pessoas o(a) chamam, é uma espécie de linguagem que dita o estilo de uma página escrita em html e xml por exemplo. CSS facilita muito o trabalho do webdesign, pois com ela podemos usar a mesma Folha de Estilo para várias páginas, possibilitando um melhor desenvolvimento e manutenção do site. Essa linguagem atualmente “dá um poder a mais ao html”, com o HTML5 ainda não sei ao certo como será. Para saber mais sobre CSS, consulte os links:
http://www.google.com.br (Esse aqui sabe tudo, ou quase :D)
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets (Apenas conceito)
http://maujor.com/ (Esse site é ótimo)
Agora vamos à prática!
Na prática o CSS pode estar contido diretamente no objeto (ex1), pode estar contido na página (ex2) ou em um arquivo .css separado da página web(ex3). Usar as propriedade de estilos diretamente nos objetos, seria mais ou menos a mesma coisa de usar os próprios recursos do HTML, só que melhorados, então, não usaremos este aqui no post. Já o CSS na mesma página só que separada dos objetos, como disse anteriormente, melhora a manutenção do site, pois fica de fácil acesso e pode ser usada por vários objetos da mesma página. Com o CSS separado da página, ou seja, em um arquivo .css, é considerado a melhor opção, pois assim você pode usar o mesmo arquivo em várias páginas, sem precisar criar aquele “monte” de scripts para personalizar as páginas.
Ex1:
Abaixo o código css incluso no objeto indicado pela tag style.
<div style=”color: #ffffff; font-size: 10px;” > </div>
Ex2:
Com o código na página, colocado entre o <head> e o </head> da página.
<style type="text/css">
body {
margin: 0px;
font-size: 11px;
text-align: center;
padding: 0px;
}
</style>
Ex3:
O CSS em arquivo separado, usa-se uma espécie de link para o arquivo, e neste arquivo colocamos os codigos de estilo, do mesmo jeito que colocamos o código entre <style> e </style> do exemplo anterior.
<link type='text/css' rel='stylesheet' href='arquivo.css' />
E você pergunta: E o código, como fazer? - Isso veremos agora.
Como padrão, usaremos o código do estilo na mesma página, só como forma didática, e você pode optar pela opção que melhor atende sua necessidade.
A Sintaxe.
Na folha de estilo você pode usar algumas formas para direcionar o estilo ao objeto, os chamados Seletores, vamos conhecer aqui três, os tipos Classe, ID que você pode personalizar, e o objeto, a tag do próprio html. Na folha de estilo a Classe usa-se ponto (.), ID usa sharp ou jogo da velha (#). Como em linguagem de programação o CSS tem o “begin” e o “end” que são usados o { e } respectivamente, assim formamos um bloco, um escopo de estilo de um objeto. Veja o exemplo:
.Minha_classe {
}
O ponto indica que é uma classe.
#Meu_id{
}
O # indica que é um ID
h3{
}
Este está usando uma tag do html, h3.
Mas só isto não basta, por enquanto temos apenas o escopo, agora iremos ver as propriedades. A sintaxe das propriedades é simples:
nome_da_propriedade: configuração da propriedade;
Assim:
font-size: 12px;
Então, se você quiser criar uma classe onde mude a cor e o tamanho da fonte:
.minha_classe{
color: black;
font-size: 11px;
}
Para usar o estilo no html usando os seletores, indicamos que tipo é, ID ou Classe, se for a tag do html não é necessário personalizar, basta apenas usar a tag indicada no CSS, veja os exemplos:
Usando Classe:
<div class=”minha_classe”> texto texto texto </div>
Isso mesmo, o termo é “class” que indica que vai usar um seletor de classe. Aí o texto vai ficar preto e com tamanho 11px, de acordo com o nosso CSS criado anteriormente.
Com ID não é diferente:
<div id=”meu_id”> texto texto texto </div>
Com uma tag HTML:
<h1> texto texto texto </h1>
Para o estilo ser usado neste, no CSS o estilo deve estar indicado para a mesma tag, por exemplo: para colocar um estilo no cabeçalho <h1>, devemos fazer:
h1{
Propriedades que deseja em h1;
}
Simples!
Vamos ver como fazemos o plano de fundo com uma imagem fixa na página?
Como o plano de fundo é na página toda, então, usaremos a tag do corpo da página, para isso devemos ter a imagem que queremos usar e:
body{
background: #000000 url('fundo.jpg') fixed center;
}
A propriedade “background” fornece várias opções como as usadas acima, onde #000000 diz que a cor do fundo será preta, url('fundo.jpg') diz o caminho da imagem, assim, o fundo ficará preto até carregar a imagem, fixed diz que o plano de fundo será fixo, e o center diz que a imagem será centralizada, isto na horizontal.
Existem muitas outras propriedades para diversos fins. Folha de Estilo tem mais poder do que podemos imaginar, pesquise e pratique, tem muita coisa ainda pela frente!
Tentei usar uma linguagem bem simples para um bom entendimento. Qualquer dúvida é só deixar um comentário aí. Em outros posts estarei falando mais sobre CSS, até a próxima!
Depois de um ano sem postagens, voltei aqui pra falar de web. No ultimo post, eu falei sobre uns links de poupups, e agora vou falar(digitar :D) um pouco sobre CSS e, como exemplo, mostrar como se faz aquele plano de fundo fixo no fundo do site, já é meio “manjado”, mais ainda tem gente que me pergunta como fazer, então, mostrarei como.
Primeiramente, CSS(Cascading Style Sheets) ou simplesmente Folha de Estilo como algumas pessoas o(a) chamam, é uma espécie de linguagem que dita o estilo de uma página escrita em html e xml por exemplo. CSS facilita muito o trabalho do webdesign, pois com ela podemos usar a mesma Folha de Estilo para várias páginas, possibilitando um melhor desenvolvimento e manutenção do site. Essa linguagem atualmente “dá um poder a mais ao html”, com o HTML5 ainda não sei ao certo como será. Para saber mais sobre CSS, consulte os links:
http://www.google.com.br (Esse aqui sabe tudo, ou quase :D)
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets (Apenas conceito)
http://maujor.com/ (Esse site é ótimo)
Agora vamos à prática!
Na prática o CSS pode estar contido diretamente no objeto (ex1), pode estar contido na página (ex2) ou em um arquivo .css separado da página web(ex3). Usar as propriedade de estilos diretamente nos objetos, seria mais ou menos a mesma coisa de usar os próprios recursos do HTML, só que melhorados, então, não usaremos este aqui no post. Já o CSS na mesma página só que separada dos objetos, como disse anteriormente, melhora a manutenção do site, pois fica de fácil acesso e pode ser usada por vários objetos da mesma página. Com o CSS separado da página, ou seja, em um arquivo .css, é considerado a melhor opção, pois assim você pode usar o mesmo arquivo em várias páginas, sem precisar criar aquele “monte” de scripts para personalizar as páginas.
Ex1:
Abaixo o código css incluso no objeto indicado pela tag style.
<div style=”color: #ffffff; font-size: 10px;” > </div>
Ex2:
Com o código na página, colocado entre o <head> e o </head> da página.
<style type="text/css">
body {
margin: 0px;
font-size: 11px;
text-align: center;
padding: 0px;
}
</style>
Ex3:
O CSS em arquivo separado, usa-se uma espécie de link para o arquivo, e neste arquivo colocamos os codigos de estilo, do mesmo jeito que colocamos o código entre <style> e </style> do exemplo anterior.
<link type='text/css' rel='stylesheet' href='arquivo.css' />
E você pergunta: E o código, como fazer? - Isso veremos agora.
Como padrão, usaremos o código do estilo na mesma página, só como forma didática, e você pode optar pela opção que melhor atende sua necessidade.
A Sintaxe.
Na folha de estilo você pode usar algumas formas para direcionar o estilo ao objeto, os chamados Seletores, vamos conhecer aqui três, os tipos Classe, ID que você pode personalizar, e o objeto, a tag do próprio html. Na folha de estilo a Classe usa-se ponto (.), ID usa sharp ou jogo da velha (#). Como em linguagem de programação o CSS tem o “begin” e o “end” que são usados o { e } respectivamente, assim formamos um bloco, um escopo de estilo de um objeto. Veja o exemplo:
.Minha_classe {
}
O ponto indica que é uma classe.
#Meu_id{
}
O # indica que é um ID
h3{
}
Este está usando uma tag do html, h3.
Mas só isto não basta, por enquanto temos apenas o escopo, agora iremos ver as propriedades. A sintaxe das propriedades é simples:
nome_da_propriedade: configuração da propriedade;
Assim:
font-size: 12px;
Então, se você quiser criar uma classe onde mude a cor e o tamanho da fonte:
.minha_classe{
color: black;
font-size: 11px;
}
Para usar o estilo no html usando os seletores, indicamos que tipo é, ID ou Classe, se for a tag do html não é necessário personalizar, basta apenas usar a tag indicada no CSS, veja os exemplos:
Usando Classe:
<div class=”minha_classe”> texto texto texto </div>
Isso mesmo, o termo é “class” que indica que vai usar um seletor de classe. Aí o texto vai ficar preto e com tamanho 11px, de acordo com o nosso CSS criado anteriormente.
Com ID não é diferente:
<div id=”meu_id”> texto texto texto </div>
Com uma tag HTML:
<h1> texto texto texto </h1>
Para o estilo ser usado neste, no CSS o estilo deve estar indicado para a mesma tag, por exemplo: para colocar um estilo no cabeçalho <h1>, devemos fazer:
h1{
Propriedades que deseja em h1;
}
Simples!
Vamos ver como fazemos o plano de fundo com uma imagem fixa na página?
Como o plano de fundo é na página toda, então, usaremos a tag do corpo da página, para isso devemos ter a imagem que queremos usar e:
body{
background: #000000 url('fundo.jpg') fixed center;
}
A propriedade “background” fornece várias opções como as usadas acima, onde #000000 diz que a cor do fundo será preta, url('fundo.jpg') diz o caminho da imagem, assim, o fundo ficará preto até carregar a imagem, fixed diz que o plano de fundo será fixo, e o center diz que a imagem será centralizada, isto na horizontal.
Existem muitas outras propriedades para diversos fins. Folha de Estilo tem mais poder do que podemos imaginar, pesquise e pratique, tem muita coisa ainda pela frente!
Tentei usar uma linguagem bem simples para um bom entendimento. Qualquer dúvida é só deixar um comentário aí. Em outros posts estarei falando mais sobre CSS, até a próxima!
Comentários
Postar um comentário