Saiba sobre alguns atributos que "fazem a diferença" e que provam como as CSS são potentes e úteis.
Você já deve ter ouvido falar de tableless, ou não? Bom mas o que interessa é que, o tableless é um "formato" que incorpora as CSS muito a fundo. Mágica? Não, tudo que há no tableless se deve às CSS principalmente, aquelas coisas que você fica se perguntando: "Daonde o cara tirou aquilo?" "Como aquilo ficou em cima daquela outra coisa" enfim, algumas dúvidas somem conforme aprendemos a "moral" de como funciona.
Chega de rodeios e vamos ao que interessa!
Atributo: margin
Muito usado no tableless, o margin tem uma função muito grande quando tratamos de <div>. No que ele pode ser útil? Vou mostrar!
Este é um exemplo muito usado para construção de estruturas de site
Teste
Este "Teste" utilizei o margin-left para que ele ficasse 40px's da margem esquerda. É claro que o margin sozinho não faz magica nenhuma, para que tenha um certo "entendimento" entre o restante do site e o OBJETO afetado, é importante usar o float ou o clear O margin é utilizado apenas para espaçamento de um "objeto".
Eu pessoalmente acho o Firefox muito melhor que o IE©, em termos de perfeição de medida, conforme os parâmetros da W3.org que controla a validação de CSS.
Atributo: float
Assim como já expliquei préviamente o float, ele permite um certo "flutuamento" de algum objeto herdado, sobre o objeto "pai" veja um exemplo do uso COM e do uso SEM float:
COM float:
<html>
<head>
<style type="text/css">
#css1 {
float: left;
margin-left: 1cm;
background:#00f;
}
#css2 {
float: right;
margin-left: 4cm;
background:#f00;
}
</style>
</head>
<body>
<div id="css1">
Teste
</div>
<div id="css2">
Teste2
</div>
Visualização:
Teste
Teste2
Então, como vimos, sem o float ou o margin, isso não seria possivel vejamos o por que usando o exemplo abaixo!
<html>
<head>
<style type="text/css">
#css1 {
margin-left: 1cm;
background:#00f;
}
#css2 {
margin-left: 4cm;
background:#f00;
}
</style>
</head>
<body>
<div id="css1">
Teste
</div>
<div id="css2">
Teste2
</div>
Teste
Teste2
É claro que, estou apenas citando exemplos... Você pode utilizar estes atributos para muitas outras funções e para sites inteiros... Dê uma olhada na seção de Tableless aqui do WebLivre e repare nos exemplos citados, o clear e o float são usados frequentemente!
Atributo: border
Poxa! O border? Sim! Repare que o que dá o toque final num site são as bordas um site com objetos sem bordas fica mal-organizado e difícil de se localizar no meio de tanto texto. Uma simples borda também pode delimitar alguns DIVs assim como o atributo
background não precisamos nem citar exemplos, é algo tão óbvio =) .
Atributo: text-indent
Já que estamos falando do alinhamento e posicionamento, principalmente, por quê não citar o maravilhoso "text-indent" ? Pois é, como já expliquei préviamente sobre ele na segunda matéria, volto a reforçar, um texto bem alinhado, posicionado, enfim organizado, sempre fica mais agradável e fácil de ler e entender. O
text-indent pode ser usado apenas para começo de parágrafos ou seja <p> veja o exemplo abaixo:
...
<body>
<p style="text-indent:30px; border:1px solid #ccc">
Texto Texto Texto Texto Texto Texto
Texto Texto Texto Texto Texto Texto
Texto Texto Texto Texto Texto Texto
</p>
</body>
...
Visualização:
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto
Lembrando: Os atributos citados acima exceto o text-indent, poderão ser usados não só em tags <div> mas em imagens, tabelas, formularios enfim .. em qualquer objeto/tag do HTML. Bom acho q é soh isso pessoal, depois continuarei a explicar sobre os atributos de CSS que realmente fazem a diferença em um site.
Abraços e até mais! Fonte:
Web Livre - Veja mais artigos e tutoriais clicando aqui!
