Weblivre.net - Informação em Primeiro Lugar

Assine nosso RSS

Dicas de Leitura

Aprenda a se Comunicar com Habilidade e Clareza Superdicas para Falar Bem em Conversas e Apresentações Decisões com B.I. (Business Intelligence) Cd Rom Info Especial Excel

Newsletter

Receba notícias e novidades em seu e-mail.

Shopping Weblivre

Publicado em 05/02/2005 - 1 comentário - Ler artigos relacionados - Você está em: Colunas » CSS

Alguns atributos que fazem a difrença

Aprenda algo sobre FLOAT, CLEAR, MARGIN e oturos.

Olá pessoal!

Hoje falarei sobre alguns atributos que "fazem a diferença" e que provam como as CSS são potentes e uteis.

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!

Autor: Marco Antonio

Compartilhe:

Comentários

Comente este artigo!

Alex Sandro de Oliveira em 28/09/2007
legal sou webdesigner,recentemente vi CSS e agora estou vendo PHP,continue mandando exemplos,inclusive se tiver algum sobre efeitos em CSS,mande por e-mail ou no forum...... Visite meu blog,alexxsdcat.netlog.com......... Abraço......

2004-2008 Weblivre.net Todos os direitos reservados.

Quem somos | Política de Acesso | Anuncie | Na Mídia | Seja um Colunista | Sugestão de Pauta | Fale Conosco

Idealização: Webla - Comunicação Digital