Ganhe dinheiro com o seu site.
Guia e dicas, experimente:
http://ganhar.noble7fix.com
Copyright © 2007 by Noble7fix · All Rights reserved · E-Mail: noble7fix@gmail.com
Como definir e aplicar cores de primeiro plano e cores de fundo numa página do seu site.
<style type="text/css">
body {background-color: yellow}
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>Este é o 1º Cabeçalho</h1>
<h2>Este é o 2º Cabeçalho</h2>
<p>Este é um parágrafo experimental</p>
</body>
</html>
Pode ir mudando os códigos HEX das cores de forma a procurar a que lhe agrada mais
veja Tabela de cores
'background-color' Propriedade para definir cor de fundo
body {background-color: #66ff33;}
h1 {color: #990000;background-color: #9900ff;}
<html>
<head>
<title>O melhor Website</title>
<link rel="stylesheet" type="text/css" href="estilos/exemplo-3.css" />
</head>
<body>
<h1>Este é o 1º Cabeçalho com cor de fundo</h1>
<h2>Este é o 2º Cabeçalho sem cor de fundo </h2>
<p>Este é um parágrafo experimental sem cor de fundo</p>
</body>
</html>
Como colocar Imagens de fundo [background-image]
<style type="text/css">
body {background-color: #66ff33;
background-image: url("images/dragao.gif");}
h1 {color: #990000;background-color: #9900ff;}
</style>
A folha de estilo css deverá ficar assim.
Observação: background-image: url("images/dragao.gif") como pode observar foi indicado o caminho para onde a imagem está guardada na sub-pasta imagens a que foi especificado o nome da imagem como dragao.gif , podia tambem colocar a imagem no diretório principa na pasta criar_site neste caso era só inserir url("images/dragao.gif"). Esta observação tem só o intuito se seja onde for que coloque a imagem deve indicar correctamente o caminho para ela ser encontrada. Qualquer trabalho que se faça se à partida ficar bem organizado, fica mais fácil gerir e encontrar o que pretendemos, por isso criamos a pasta imagens . Quando tiver o seu site no Alojamento, hospedaddo na Internet aí deverá indicar o caminho da imagem isto é por exemplo: ("http://www.criar.noble7fix.com/images/dragao.gif").
Como está a perceber usamos a propriedade "color" para definir as cores de primeiro plano. Neste caso a titulo de exemplo usamos o método directo de inserir o estilo na própria página HTML, sem link externo, lembra-se? SIm, porque neste caso estamos a aplicar a uma só página e não há necessidade de criar uma folha de estilos externa.
Neste caso atribuimos ao 1º cabeçalho (h1) a cor: #00ff00 (um verde claro) assim todos os cabeçalhos de 1º nível irão apresentar essa cor.
A propriedade background-color define a cor do fundo de um elemento, seja a página inteira <body>, um cabeçalho <h1> ou texto <p> .......
Ao ver o exemplo acima apresentado vai verificar que a cor de fundo da sua página body: {background-color: yellow} é amarela
Vamos apresentar mais alguns exemplos da aplicação da Propriedade 'background-color', pois estamos convencidos que nada melhor que a prática para dominarmos fácilmente toda esta aprendizagem HTML e CSS e agora para melhor prática vamos criar uma folha de estilos externa e fazer uma ligação, que tal? talvez seja melhor recordar o principio e se já não o fez criar as pastas no seu computador conforme exemplo em Noções / Definições CSS. mas podemos recapitular aqui:
1º Crie uma pasta no seu disco rigido por exemplo: criar_site
2º Dentro dessa pasta, crie uma sub-pasta: estilos
3º para guardar as imagens de forma mais organizada crie uma sub-pasta: imagens
4º Todos os documentos que criar com o Notepad e guardar com extensão .html ou .htm coloque na pasta criar_site
5º Todos os documentos que criar com o Notepad e guardar com extensão .css coloque na sub-pasta estilos
6º Todas as imagens que quer usar para o seu site, lógico que guarde na sub-pasta: imagens
Abra o Notepad e escreva tal e qual; guarde como... exemplo-3.css e coloque na sub-pasta estilos
Abra o Notepad e escreva tal e qual; guarde como... exemplo-3.html e coloque na pasta criar_site
Todas as páginas que fizer ligação com esta referência:
href="estilos/exemplo-3.css" vão ter o mesmo fundo e cores.
De certeza se gosta disto, deve estar mesmo entusiasmado, e agora que tal, colocar umas imagens, dar vida, beleza, arte ao seu site, para isso tem uma imagem em baixo que pode salvar como... e guardar na sua sub-pasta imagens para podermos trabalhar com ela.
Atenção: é lógico que poderá utilizar a imagem que quiser. gostariamos de acrescentar que esta imagem foi retirada da Net em http://www.webomator.com/bws/data/reclip.html clipart free images, isto é imagens ao dispôr para download sem requisito de direitos de autor. Cuidado quando usar imagens no seu website que impliquem direitos de autor. Ou crie suas próprias imagens ou faça o download de imagens livres e gratuitas.
Se quiser P inserir uma imagem de fundo na página é só aplicar a propriedade background-image no elemento <body> e indicar o caminho onde está gravada a imagem.
Nesta página aprendemos no geral como configurar o fundo, mas visto que a propriedade background é deveras importante na beleza e arte do seu site que na próxima página iremos desenvolver o tema, isto é as várias formas de estabelecer ou definir a propriedade background:
- background = propriedade fundo
- background-color = cor do fundo
- background-image = imagem de fundo;
- background-repeat = definir como a imagem de fundo se posiciona
- background-attachment = se acompnha o scroll da págna ou se fica fixas
- background-position = a posição da imagem na página