<html>
<head>
<title>Meu Css</title>
<style type="text/css">
<!--
.teste{
width:500px;
height:500px;
margin:0 auto;
background-color:#0000FF;
}
-->
</style>
</head>
<body>
<div class="teste">
</div>
</body>
</html>
EX:
Slave o exemplo acima, pode ser no bloco de notas mesmo ou no seu editor de html de escolha. Salve como ".html" ou ".htm".
Abra ele com seu navegador e veja o resultado.
Um bloco azul, centralizado na tela.
Agora vamos para algo mais emocionante.
Substitua todo o código do arquivo que você salvou, por esse:
<html>
<head>
<title>Meu Css</title>
<style type="text/css">
<!--
.teste{
width:500px;
height:500px;
margin:0 auto;
background-color:#0000FF;
}
.teste2{
width:100px;
height:100px;
float:left;
background-color:#000000;
}
-->
</style>
</head>
<body>
<div class="teste">
<div class="teste2"> </div>
</div>
</body>
</html>
Veja o resultado, agora estamos usando algo novo, o atributo "float". Em inglês isso quer dizer flutuar, tais elementos ficam flutuando na tela, e se alojam onde encaixam, é quase como brincar de dominó, coloque as peças que e vá encaixando como dá.
Podemos ver nesse tutorial que não podemos ter uma div com float centralizada na tela, mas podemos ter um elemento float dentro de uma div não float.
Isso é CSS, Cascade Styling Sheet, estilos em cascata, ou seja, os elementos "filho" são submissos aos elementos "pai", ou seja, o "filho" sempre estará onde o seu "pai" estiver, e nisso constitui o elemento fundamental da linguagem de estilos.
Nenhum comentário:
Postar um comentário