Surcape -
Redes Sociais:

Você não está conectado. Conecte-se ou registre-se

Tutorial CSS

Mensagem - Página 1 de 1

1 Tutorial CSS em Seg Nov 02, 2015 6:07 pm

avatarMembro Ativo
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:
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.

2 Re: Tutorial CSS em Seg Nov 02, 2015 6:08 pm

avatarParticipativo
Obrigado por compartilhar seu conhecimento, vai ajudar muitos novatos
Ate


__________________________________

3 Re: Tutorial CSS em Seg Nov 02, 2015 6:10 pm

avatarMembro Ativo
Tutorial bem completo, obrigado por compartilhar!

Conteúdo patrocinado

Mensagem - Página 1 de 1

Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum