Login: Senha: Registrar-se - Esqueci minha senha
.: Menu
Home
Buscar no Na Faixa
Artigos
Jogos Online
Sign. dos Sonhos
Humor e Piadas
Papel de Parede
Ilusões de Ótica
.: Bancos
Emoticons e Gifs
Ícones
Logos
.: Canais
Apostilas
Arte/Cultura
Blog
Busca
Celular
Downloads
E-mail Grátis
Emoticons
Esportes
Filmes
Flogs
Fontes
GTA Mods
Host Grátis
Humor
Infantil
Informática
Jogos
Jogos Online
Linux
Músicas
Notícias
Offline
Redirecionadores
Sites Parceiros
Webdesigners
Webmasters
.: Serviços
Mural de Recados
Editor de Fotos
Protetor de Links
Usuários Online
Bloco de Notas
Formmail
Meu IP
Teste de Conexão
Banner Rotativo
.: Geradores
Barra de Rolagem
Recomende
Pop-up
Inverter Link
.: Na Faixa
Sobre
Contato
Recomende-nos
Termos de uso

Alguns atributos que fazem a difrença

Enviado em 09/07/2007 - 08:32
Fonte: A A A A

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!

Enviado por: brunohcs

Esse artigo foi visualizado 1745 vezes

Compartilhe este artigo
facebook del.icio.us rec6 digg
Recomende este artigo a um amigo


Voltar
>> Comentários
 
Related Posts Plugin for WordPress, Blogger...
Comentar
Buscar Artigos:
.: Jogos Online
Ação
Aventura
Cassino
Classicos
Colorir
Corrida
Educativos
Esporte
Estrategia
Infantil
Luta
Meninas
Nave
Tiro
Outros
Adulto
Top Jogos
.: GTA (Grand Theft Auto)
GTA SA, VC, IV
SA - Carros
IV - Carros
Mods
GTA IV
SA - Mods Cleo
.: Saúde
Calculadora de IMC
Peso Ideal
Artigos de Saúde
Sexualidade
.: Google
Diagnóstico
.: Parceiros
Mural de Recados Grátis
Papel de Parede
Papel de Parede Grátis
Show Moto
Web Visual
.: Nossos Números
Artigos: 912
Categorias: 52
Comentarios: 1863
Usuarios: 25213
Blocos de Nota: 87
Canais: 168

website monitoring service
eXTReMe Tracker
Na Faixa.net - Todos os direitos reservados.
Leia nossos Termos de Uso - Política de Privacidade
Desenvolvido por Web Visual - on buzi
Apartir de:
Crie seu Site - Jogos Online - Papel de Parede Grátis - Show Moto - Mural de Recados Grátis - Dicas Para Blogs