tadarank afiliados

09 maio, 2007

O começo dos meus CSS

Heloou comédias, mais um post da série "eu estou vivo".

Como muitos já sabem tô fazendo uns projetos aí que tão exigindo muito do meu tempo daí o blog tá meio parado aqui. Mas quando eu voltar já sabem que terão toneladas de códigos afinal, é nos serviços que surgem novos códigos.

Hoje, mostrando pra vocês o que costuma sempre estar no início dos meus arquivos CSS. Estas declarações servem pra padronizar algumas coisas nos navegadores e tornar mais fácil o desenvolvimento do site. Tudo é pra reduzir diferenças em navegadores.

Faça um teste no próximo site que fizer. Coloque estas declarações e verá que muitas "diferenças" simplesmente não acontecem nos navegadores. Mas não simplesmente copie e cole. Dê uma lida pra entender o que eu fiz.

Incluí também algumas classes padrão que eu costumo usar.

* { margin: 0; padding: 0; /* padronizando nos navegadores */ }

img { border: 0;}
fieldset { display: block; border: 2px ridge #FFF; padding: 10px; /* padronizando nos navegadores */ }
ul, ol { margin-left: 10px; /* padronizando nos navegadores */}
input[type=hidden]{ display: none !important; visibility: hidden !important; /* esconde mesmo inputs hidden no FF */}
button { border: 1px outset #AAA;}
form button { text-align: center; margin: 5px auto; display: block; }
form ul { list-style: none; margin-left: 0; }
fieldset label { display: block;}
fieldset .radios label { display: inline; }
p { margin-top: 5px; }

/* padronizando tamanhos de cabecalho em todos os browsers */
h1 { font-size: 250%;}
h2 { font-size: 200%;}
h3 { font-size: 150%;}
h4 { font-size: 120%;}

/* classes costumeiras */
.ak { text-decoration: underline; /* access keys */ }
.u { text-decoration: underline; /* textos underline */}
.secoes { display: none; /* exibe nomes das seções se o CSS estiver desativado */ }
.img-left { float: left; }
.img-right { float: right;}
.erroinfo { background: #FFCCCC;}
.erro { background: #FF0000;}

Té mais povo.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

10 comentários:

  1. Também faço isso, mas no meu caso uso um arquivo separado pra isso, costumo chamar de basics.css, tem outras coisas também... Flwss

    ResponderExcluir
  2. Eu até escrevi sobre isso, e vi em algum outro site também =))
    Abração

    ResponderExcluir
  3. O meu pesadelo é o famigerado IE 6, esse código vai ser útil, sempre testo tudo com três navegadores abertos ao mesmo tempo, FF, IE 7 e 6. Haja paciência...

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Muito bom isso daí.


    Vamos ver se acaba com o pesadelo geral

    Abraços@

    ResponderExcluir
  6. Oh mico, o que houve com seu feed? O primeiro virou o botão voltar do ajax depois como trato meus visitantes etc.. Tá fora de ordem

    ResponderExcluir
  7. Opa, sobre o feed. É que eu atualizei os links do iEvolution que tinha nestas postagens que você falou.
    Daí o blogger joga o post editado pra primeiro lugar no feed.

    ResponderExcluir
  8. Postei no meu blog sobre essa dica muito preciosa, ok??

    Se tiver algum problema eu retiro, qualquer coisa é só entrar em contato.

    ronildo @ joomla.com.br

    ResponderExcluir
  9. Então brother achei maneiro.. Agora percebo que o CSS é a melhor maneira de fazer sites, mas o grande problema é a incompatibilidade dos navegadores. Isso torna o trabalho mais demorado. Agora eu gostaria de ver um trabalho bom para realizarmos os arredondamentos de cantos somente pelo css. Isso é possível?

    ResponderExcluir
  10. Cara eu to com um projeto no qual eu tenho que fazer varios formularios, so que oque esta acontecendo... as caixas de textos no internet explorer 7 aparece de um tamanho "normal" do qual eu defini e no monzila, safari e IE6 aparecem em tamanhos diferentes e tem outro detalhe as imagens com fundo transparente no IE6 o espaço q era pra ser trasparente fica cinza, se for possivel me ajudar me manda um email
    fernando_limeira@yahoo.com.br
    valew

    ResponderExcluir

Resultado! Concursos