Esse é um pequeno tutorial de como criar seu site com CSS.
Após você ligar seu arquivo css, com a página que está a ser desenvolvida, no caso o "index.php", você vai começar a estilizar o css.
por exemplo:
O que vamo fazer agora?
Primeiro você tem que aprender que o seguinte, quando se usa o "#" antes de algum elemento CSS, Ex:#topo, ele quer dizer que aquilo vai ser "ID", que conterá mais coisas dentro daquilo.
Ai como fazemos pra aplicar no documento?
Seguinte vai depois da sua Tag <body>, no documento fonte, ou melhor no index.php, e faz o seguinte:
Mais antes de tudo vamos aprender também o que significa aquele "." antes do css, seguinte, ele é denominado class, que serve para vários elementos do css, como assim? Por exemplo eu posso criar uma class chamada ".texto", diferentemente da "ID=#", ela pode ser aplicada para vários locais, por exemplo, eu crio um documento, e eu preciso que no final e no começo dele contenha-se textos, como faço? Você cria a <div class="texto"></div>, e aplica nos devidos lugares, no começo e no fim do documento.
Continuandooo....
Após feito isso veja seu Design, como está ficando. As vezes é preciso minimizar a barra de ferramentas apertando o botão "F4", e logo mais clicando no botão "Live", que está bem do lado direito do botão Design no documento. Talvez apareça uma caixa de dialogo, basta você marcar "sim", depois marcar "Cancel", e logo depois marca "sim" novamente.
Após você ligar seu arquivo css, com a página que está a ser desenvolvida, no caso o "index.php", você vai começar a estilizar o css.
por exemplo:
- Código:
*{
margin: 0px;
padding: 0px;
}
body{
background: url(../img/fundo.png) repeat;
}
#topo{
background: #333;
height: 300px;
widht: 100%;
}
.logo{
background: url(../img/logo.png) no-repeat;
height: //*Altura da sua logo*//;
widht: //*Largura da sua logo*//;
float: left;
margin-left: 50px; -- É Opcional isso denomina a distância para o lado direito de onde a logo está.
margin-top: 10px; -- É Opcional isso denomina a distância de onde logo está para o topo.
}
O que vamo fazer agora?
Primeiro você tem que aprender que o seguinte, quando se usa o "#" antes de algum elemento CSS, Ex:#topo, ele quer dizer que aquilo vai ser "ID", que conterá mais coisas dentro daquilo.
Ai como fazemos pra aplicar no documento?
Seguinte vai depois da sua Tag <body>, no documento fonte, ou melhor no index.php, e faz o seguinte:
Mais antes de tudo vamos aprender também o que significa aquele "." antes do css, seguinte, ele é denominado class, que serve para vários elementos do css, como assim? Por exemplo eu posso criar uma class chamada ".texto", diferentemente da "ID=#", ela pode ser aplicada para vários locais, por exemplo, eu crio um documento, e eu preciso que no final e no começo dele contenha-se textos, como faço? Você cria a <div class="texto"></div>, e aplica nos devidos lugares, no começo e no fim do documento.
Continuandooo....
- Código:
<body>
<!--AQUI FICA O TOPO COM OS SEU ELEMENTOS DE DENTRO !-->
<div id="topo">
<div class="logo">
</div>
</div>
</body>
Após feito isso veja seu Design, como está ficando. As vezes é preciso minimizar a barra de ferramentas apertando o botão "F4", e logo mais clicando no botão "Live", que está bem do lado direito do botão Design no documento. Talvez apareça uma caixa de dialogo, basta você marcar "sim", depois marcar "Cancel", e logo depois marca "sim" novamente.
