Referência visual de propriedades do CSS 2

Bruno Torres
15/10/05 às 15:50

Só duas coisas que precisam ser consertadas:
o não existe nos doctypes strict. O certo seria usar um clear:both; no estilo do elemento que vem logo abaixo dos floats.
position:none não existe. O certo, nesse caso, seria position:static.

No mais, ficou muito bom, cara. Com certeza vai ajudar àqueles que não são muito chegados em ficar olhando código.

Fred
15/10/05 às 20:16

Valeu pela revisão técnica, Bruno! Já coloquei o position: static; mas com relação ao vou manter porque em alguns casos, o clear: both no elemento inferior não resolve, não sei porque... Além disso, é mais fácil de entender pros iniciantes.

Rafael Steil
16/10/05 às 15:21

Testar a todo momento não é um mau hábito, pelo contrário. Boas práticas de programação costumam dizer "programe um pouco, teste um monte", e isso é especialmente válido em sistemas grandes.
Quanto mais alterações você faz de uma única vez, mais dificuldade terá na hora de testar, assim como será mais dificil encontrar a causa do problema - o que não acontece em interações menores, pois você tem fresco na memória o que foi alterado / adicionado :).

Cauan Cabral
16/10/05 às 18:31

Gostei do infográfico, iniciativas destas ajudam muito, principalmente quem está iniciando. Se fosse possível seria muito bom um exemplo mais completo, e muito proveitoso com certeza.
;]

karla lopez
17/10/05 às 11:00

faz sim!

Diego Molina
17/10/05 às 12:37

Gostei muito da abordagem visual, ficou muito didático mesmo. Acredito que se for aprofundado pode até sair um livro daí.

x
17/10/05 às 13:07

Muito bom, merecemos uma tabela mais completa!

Abraços

Maiko Müller
18/10/05 às 08:31

10.... muito mais fácil a compreenção. Esta será diferença de um curso planejado através de um estudo de arquitetura da informação e um simples curso de css. parabéns pela iniciativa.

Wilson Iwano
18/10/05 às 17:07

Parabéns!! Vai ajudar bastante!! Arigato!!

Patricia Toscano
18/10/05 às 19:23

Poxa Fred ficou muito bom, maravilhoso e vai me ajudar e ajudar a todos nós. Adiantará muito o nosso lado. Poxa você é fera mesmo, continue assim, parabéns.

YALLE CLARENCE
09/11/05 às 17:14

TNHU QUE CRIAR UM WEBSITE Q POSSUA O CONTEÚDO DIDÁTICO DE UMA DISCIPLINA DE MINHA ESCOLHA. DEVE - SE SEPARAR A ESTRUTURAÇÃO E A FORMATAÇÃO DAS INFORMAÇÕES ATRAVÉS DE PAGINAS HTML E ARQUIVOS FOLHAS DE ESTILO CSS.
O FUNDO DA PÁGINA DEVERÁ SER DA COR AZUL CLARO;AS MARGENS DEVEM SER 0,5CM;O TÍTULO DE CAPÍTULO DEVE ESTAR EM FONTE ARIAL, NEGRITO, TAMANHO 25 PONTOS ALINHADO NO CENTRO E COR AZUL ESCURA; O TÍTULO DE TÓPICO DEVE ESTAR EM FONTE TIMES, NEGRITO, ITÁLICO, TAMANHA DE 20 PONTOS, ALINHADO A ESQUERDA E COR AZUL ESCURA; O TÍTULO DE SUB - TÓPICO DEVE ESTAR EM FONTE TIMES, ITÁLICO, SUBLINHADO, TAMANHA 15 PONTOS, ALINHADO A ESQUERDA E COR AZUL ESCURA; O CONTEÚDO TEXTUAL(PARAGRAFO) DEVE ESTAR EM FONTE ARIAL, NORMAL, TAMANHO DE 12 PONTOS, COR PRETA COM ALINHAMENTO JUSTIFICADO, UM DESLOCAMENTO DE 1 CM PARA A PRIMEIRA LINHA E UMA DISTÂNCIA DE 0,3 CM ENTRE CADA PARÁGRAFO; AS FIGURAS CENTRALIZADAS NA PAGINA; AS TABELAS DEVERÃO APRESENTAR(CABEÇALHOS COM FUNDO PRETO E LETRAS BRANCAS, CELULAS DE LINHAS IMPARES COM FUNDO CINZA CLARO E LETRAS PRETAS, CELULAS DE LINHAS PARES COM FUNDO BRANCO E LINHAS PRETAS, APENAS BORDAS SUPERIORES E INFERIORES SÓLIDAS E DE COR PRETA); TODO O CONTEUDO DEVE SER AJUSTADO AO TAMANHO DA JANELA.
ME AJUDEM POR FAVOR!!!

Caso Patologico
13/11/05 às 19:57

Fabuloso!!! Cosa mas grande! :D
Great stuff ;)

Saludos
Mario

Aaron
09/03/06 às 17:21

Muito bom, ajuda bastante pra quem ta aprendendo. Não demore pra fazer outra tabela. A próxima poderia ser sobre como alinhar as div's corretamente num layout utilizando a tecnologia tableless. E um list com bg img em cada como vc faz nos seus formulários, muito bom...

Aaron
09/03/06 às 17:32

ul {background-color:#EEE; border:1px solid #CCC;}
li {list.style.type:none; border-top:1px dotted #CCC; padding-left:20px;}

Muito bom, ajuda bastante pra quem tá aprendendo.
Não demore pra fazer outra tabela.
A próxima poderia ser sobre como alinhar as div's corretamente num layout utilizando a tecnologia tableless.
E um list com bg img em cada li como vc faz nos seus formulários, muito bom...

Fagner
21/07/06 às 11:53

Ficou ótimo, bem fácil de entender, parabéns, mas gostaria de fazer uma observação sobre o z-index, a todos que precisarem.
Ao colocar em elementos que precisam sobrepor outros através de ações ( onMouseOver, Out... para subemenus por exemplo ), coloque a propriedade z-index para todo os divs com o posicionamento desejado e o que estiver sendo utilizado como submenu coloque como o maior valor, pois isso elimina o problema com o IE que precisa de comparar todos os divs para devinir as sobreposições, ao contrário do FF que não possue a este problema.

LeoMarinucci
20/12/07 às 15:26

Cara, gostaria muito que tivesse um tutorial completo com todos os exemplos de CSS, abordados dess maneira.

Parabéns

Milano
12/02/08 às 13:06

Obrigado Fred. Tenho as mesmas idiosincrasias que vc. O povo assusta quando vê meu código feito no dot net, pois mudei e personalizei cor de fonte de fundo pra tudo quanto é tag. Posso percorrer um codigo de 5000 linhas e sei quando está passando uma GridView.
Isso que vc fez, com certeza ajudará muita gente como nós.
Parabéns