Close Menu
Código Simples .NETCódigo Simples .NET
    Facebook X (Twitter) Instagram
    Trending
    • Mais de 200 livros de programação gratuitos em português
    • System Design: da teoria à prática
    • Pessoas e Processos: o fator humano por trás da arquitetura de sistemas
    • Observabilidade e Operações: dando olhos e mãos ao sistema
    • Performance e Custo: otimizando o que realmente importa
    • Padrões de Arquitetura e Organização: quando o design encontra a realidade
    • Confiabilidade e Consistência: construindo sistemas que não quebram sob pressão
    • Bancos de dados e armazenamento: onde moram os gargalos
    Facebook X (Twitter) Instagram
    Código Simples .NETCódigo Simples .NET
    Código Simples .NETCódigo Simples .NET
    Home»Front-End»CSS Reset – Como resetar seu CSS antes de programar seu sites.

    CSS Reset – Como resetar seu CSS antes de programar seu sites.

    Jhonathan SoaresBy Jhonathan Soares6 de fevereiro de 20141 Min Read Front-End
    Share
    Facebook Twitter LinkedIn WhatsApp Copy Link

    Como todos já sabemos, os navegadores processam o CSS e suas propriedades de maneira diferente, o Mozilla processa de uma maneira, o Chrome de outra maneira e o IE estraga processa de outra e por assim vai.

    Eu depois de muito tempo programando e utilizando alguns hacks e tricks para depois sair corrigindo alguns problemas que eu tinha com CSS vi que era possível resetar ou melhor dizendo… Inicializar as propriedades css de uma maneira padrão  utilizando o css reset. Todos os elementos já possuem alguma margem definida por padrão em cada Browser.

    Com isso basta colocar o seguinte código bem no início de sua folha CSS :

    * {
    margin:0;
    padding:0;
    list-style:none;
    vertical-align:baseline;
    }
    

    Pra mim já é o básico e funciona perfeitamente para mim.

    Já se você quer fazer um super reset de todos os elementos do seu CSS existe um cara chamado Eric Meyer que fez um reset bem mais robusto, veja:

    
    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    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, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    

    Com isto você pode sempre inicializar suas variáveis e componentes CSS de maneira mais simples e fácil de programar e manter.

    Bom por hoje é só.

    Espero que tenham gostado!

    Não deixem de conferir nossa Fã Page : http://www.facebook.com/CodigoSimples

     

    css css reset
    Share. Facebook Twitter LinkedIn Telegram WhatsApp Copy Link
    Jhonathan Soares
    • Website
    • Facebook
    • X (Twitter)
    • LinkedIn

    Criador do blog Código Simples e com mais 15 anos de experiência em TI, com títulos de MVP Microsoft na área de Visual Studio Development, Neo4j Top 50 Certificate, Scrum Master e MongoDB Evangelist.

    Posts Relacionados

    Happy Hour com Dados #17 – Azure vs AWS vs GCP

    Front-End 26 de maio de 20211 Min Read

    Blazor .NET – CRUD com MongoDB

    C# Front-End NoSql 2 de janeiro de 20195 Mins Read

    Introdução ao Blazor, o SPA da Microsoft

    C# Front-End 29 de dezembro de 20185 Mins Read
    Newsletter

    Digite seu endereço de e-mail para receber notificações de novas publicações por e-mail.

    Junte-se a 25mil outros assinantes
    Posts recentes
    • Mais de 200 livros de programação gratuitos em português
    • System Design: da teoria à prática
    • Pessoas e Processos: o fator humano por trás da arquitetura de sistemas
    • Observabilidade e Operações: dando olhos e mãos ao sistema
    • Performance e Custo: otimizando o que realmente importa
    Categorias
    • Arquitetura (27)
      • Microsserviços (2)
      • Testes (2)
    • Asp.net (120)
      • C# (89)
      • Mvc (13)
    • Banco de dados (92)
      • NoSql (59)
      • Sql (38)
    • Boas práticas (33)
      • Gestão & Produtividade (3)
      • Metodologias Ágeis (6)
    • Cursos (53)
    • Dicas (106)
    • Front-End (92)
    • IA (4)
    • Linux (6)
    • NodeJS (4)
    • Post do Leitor (9)
    • Python (5)
    • Seo (12)
    • Tecnologia (30)
      • ITIL (1)
      • Padrões de Projeto (4)
    • Testes (2)

    VEJA TAMBÉM

    Testes
    28 de fevereiro de 20254 Mins Read

    30 APIs Gratuitas para desenvolvedores

    APIs são ferramentas essenciais para desenvolvedores que querem criar aplicações mais eficientes, conectadas e funcionais sem reinventar a roda. Desde dados abertos, notícias em tempo real e inteligência artificial até esportes e clima, há APIs gratuitas que oferecem vastas possibilidades de integração. Este artigo apresenta 30 APIs gratuitas que podem acelerar o desenvolvimento e abrir novas oportunidades para projetos inovadores.

    1000 livros gratuitos sobre programação!

    Facebook X (Twitter) Instagram LinkedIn

    Type above and press Enter to search. Press Esc to cancel.

    Vá para versão mobile