Recentemente a Belinha comentou de CSS Global Reset num post falando de construção de sites cross browsers , mas acho que isso é tão importante que merece um post só pra ele.
Para entender o que faz o reset, pense que todo browser tem prioridades para definir o CSS de uma página. A ordem é:
1º - CSS inline : aquela porqueira <div style=”float:left”>
2º - CSS na página : outra coisa que não recomendo, e não vejo necessidade. É quando coloca a tag style dentro da tag head
<style> .publicidade { width: 200px; } </style>
3º - CSS externo : esse é o css normal, quando invocamos dentro do head <link href=”home.css” type=”text/css” rel=”stylesheet”/>
4º - CSS definido pelo browser: sim, isso existe e é isso que nos causa problemas.
Quando nenhum CSS é encontrado para um elemento (div, p, h1, img, etc..), o navegador coloca por sua conta, qual vai ser o tamanho dos títulos, dos paragráfos, a margin entre elementos, a fonte padrão, o padding da página, bordas dos elementos, etc…
É aí que entra o CSS Global Reset, que são uma série de propriedades css atribuidas a todos os elementos html, justamente para retirar o css definido pelo browser, deixando as propriedades de todos os elementos iguais. Assim reduz drasticamente a diferença entre Firefox, Mac, Ie, Opera, etc.
Existem diversos CSS Global Reset ( normalmente as pessoas colocam alguma coisa a mais pra facilitar no seu projeto ), mas todos eles variam pouco. Vejam o que eu utilizo:
*{outline-color:invert;outline-style:none;outline-width:medium;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: inherit; font-size: inherit;
font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0; }
body {line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea { font-size: inherit; }
E normalmente, quando vou começar a montar um html, um projeto novo, eu altero as propriedades da fonte, por exemplo: se o layout for usar sempre arial, vale a pena trocar “font-family: inherit;” para “font-family: arial;”
Seja lá qual CSS Global Reset escolherem, usem sempre um quando iniciarem um projeto, isso evita muitooo trabalho.
Danilo é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, futebol, javascript, programação, e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, javascript, xhtml, css, jquery, webstandards, seo, sql, oo, etc. E já fez sites para espn, fila, umbro, fgv, pirelli, petrobras, etc. Veja o 
Belinha é arquiteta da informação na Tesla, tem problemas com bicicletas e com carnívoros. Também é geek, mas se aventura pelas atividades do lar, cozinheira de final de semana, tem dificuldades quando o if da variavél "pessoas para comer" for maior que 2. Nesse caso, o alert é inevitável...
October 8th, 2008 at 7:10 pm
Olá Danilo, só uma correção, a ordem de prioridade das regras de estilo é o inverso, primeiro a folha do browser, as externas (link ou @import) ou incorporadas (tag style) e por último, o atributo style. De resto, está tudo certinho
October 8th, 2008 at 9:30 pm
Muito obrigado pelo toque, mas… no site da w3c schools, fala que a ordem é a do post mesmo. Da uma olhada:
“What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (inside the tag)
4. Inline style (inside an HTML element)”
http://www.w3schools.com/css/css_intro.asp
[]s
October 10th, 2008 at 12:14 pm
Danilo, acho que o Marcelo estava correto.
Na realidade o efeito cascata, usa como regra de prioridade diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo.
Veja o efeito cascata em ordem crescente (ordem de aplicação):
1. folha de estilo padrão do navegador do usuário;
2. folha de estilo do usuário (definida no navegador);
3. folha de estilo do desenvolvedor (autor);
3.1 estilo externo (importado ou linkado).
3.2 estilo incorporado (definido na seção head do documento);
3.3 estilo inline (dentro de um elemento HTML);
4. declarações do desenvolvedor com !important;
5. declarações do usuário com !important;
O nível de importância é, portanto, o inverso da lista acima.
http://www.w3.org/TR/CSS2/cascade.html#cascade
October 10th, 2008 at 4:18 pm
Aff… acho que todos estão certos… no post está a ordem de PRIORIDADE e eu escrevi acima a ordem de APLICAÇÃO (ou seja, do menos prioritário até o mais, que fica por definitivo). Ou seja, está correta a afirmativa do post, pois o Danilo mencionava a ordem de prioridade e não de aplicação.
October 10th, 2008 at 9:58 pm
Gente, na verdade eu estou certo mesmo no post.
Até fiz um teste para verificar, nada melhor.
Baixem esse arquivo:
http://www.tidbits.com.br/download/_style/prioridadeCSS.zip
Vão ter duas propriedades para o background do body. Uma com e outra com link externo.. a prioridade é realmente do style.
[]s
November 16th, 2008 at 9:00 am
[...] o CSS Global Reset para diminuir as diferenças entre os browsers. Cada browser, coloca por sua conta, qual vai ser o [...]