22 de novembro de 2010

CSS Tutorial - CSS Reset

Limpando a lousa antes de desenvolver seu site

css reset

Quando se usa diferentes browsers para testar determinada página da web podemos ver que as tags HTML em seu estado de dafault(sem formatações) são interpretadas de uma forma um pouquinho diferente em cada browser, isso acontece porque cada browser define o seu padrão para as tags, inserir o CSS Reset antes de começar a desenvolver sua página, é uma boa alternativa para resolver esse probleminha de inconsistência.(...)

O CSS Reset basicamente neutraliza o default inconsitente que as tags HTML tem nos browsers, ou seja, dá uma "resetada" nas margin, padding, h1, h2, form, div e etc para que tenha o mesmo padrão consitente em todos os browsers.

Pra usar é muito simples basta criar um arquivo .css apenas com o CSS Reset e importar normamente com o @import ou a tag <link>.
Existem várias tipos de CSS Reset que, afinal, tem o mesmo objetivo, mas vou mostrar as mais utilizadas pelos web designers. São tres tipos:

CSS Reset Genérica
* {
    padding: 0;
    margin: 0;
    border: 0;
}

Embora o CSS Reset acima seja bem comum, ainda assim não é um "reset" completo pois ainda temos que resetar além das margins e paddings também os links, tabelas e itens de lista, etc. Então é mais recomendável o uso dos exemplos abaixo.

Yahoo's CSS Reset
CSS Reset proposta pelo Yui / Yahoo:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
ol,ul {
    list-style: none;
}
caption,th {
    text-align: left;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

Eric Meyer Reset CSS
Proposto por Eric Meyer:
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
:focus {
    outline: 0;
}
body {
    background: white;
    line-height: 1;
    color: black;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

Um comentário:

  1. Wow, nice.. it,s helpful for Multilevel Marketing websites. Specialy excellent information for MLM Social Netwoking and Direct Selling Softwares. I have added this to my bookmarks.I hope have such type of wonderful information using this blog.

    Pooja

    MLM Developers India

    http://mlmdevelopers.com/products/mlm-software/corporate-mlm-soft/feature.html

    ResponderExcluir