zoukankan      html  css  js  c++  java
  • 谈谈格式化CSS

    每一个浏览器都有默认的样式,但每一个浏览的默认样式都有一些轻微的差别。为了让我们的网站在各个浏览器上显示得一样,我们需对各浏览器之间有差异的样式、不需要的默认样式进行标准化。于是有了reset.css——重置样式表。

    清单一:简易重置样式表

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p, 
    blockquote,th,td { margin:0; padding:0; } 
    table { border-collapse:collapse; border-spacing:0; } 
    fieldset,img { border:0; } 
    address,caption,cite,code,dfn,em,strong,th,var 
    { font-style:normal; font-weight:normal; } 
    ol,ul { margin:1em 0; margin-left:40px; padding-left:0; } 
    ul { list-style-type:disc; } 
    ol { list-style-type:decimal; } 
    caption,th { text-align:left; } 
    h1,h2,h3,h4,h5,h6 { font-size:100%; }

    清单二:完整重置样式表

    /* BLOCK ELEMENTS */ 
    html, div, map, dt, form { display:block; } 
    body { display:block; margin:8px; font-family:serif; font-size:medium; } 
    p, dl { display:block; margin-top:1em; margin-bottom:1em; } 
    dd { display:block; margin-left:40px; } 
    address { display:block; font-style:italic; } 
    blockquote { display:block; margin:1em 40px; } 
    h1 { display:block; font-size:2em; font-weight:bold; margin:0.67em 0; } 
    h2 { display:block; font-size:1.5em; font-weight:bold; margin:0.83em 0; } 
    h3 { display:block; font-size:1.125em; font-weight:bold; margin:1em 0; } 
    h4 { display:block; font-size:1em; font-weight:bold; margin:1.33em 0; } 
    h5 { display:block; font-size:0.75em; font-weight:bold; margin:1.67em 0; } 
    h6 { display:block; font-size:0.5625em; font-weight:bold; margin:2.33em 0; } 
    pre{ display:block; font-family:monospace; white-space:pre; margin:1em 0; } 
    hr { display:block; height:2px; border:1px; margin:0.5em auto 0.5em auto; } 
    /* TABLE ELEMENTS */ 
    table { border-spacing:2px; border-collapse:separate; 
    margin-top:0; margin-bottom:0; text-indent:0; } 
    caption { text-align:center; } 
    td { padding:1px; } 
    th { font-weight:bold; padding:1px; } 
    tbody, thead, tfoot { vertical-align:middle; } 
    /* INLINE ELEMENTS */ 
    strong { font-weight:bold; } 
    cite, em, var, dfn { font-style:italic; } 
    code, kbd, samp { font-family:monospace; } 
    ins { text-decoration:underline; } 
    del { text-decoration:line-through; } 
    sub { vertical-align:-0.25em; font-size:smaller; line-height:normal; } 
    sup { vertical-align: 0.5em; font-size:smaller; line-height:normal; } 
    abbr[title], { border-bottom:dotted 1px; } 
    /* LIST ELEMENTS */ 
    ul { list-style-type:disc; margin:1em 0; margin-left:40px; padding-left:0;} 
    ol { list-style-type:decimal; margin:1em 0; margin-left:40px; padding-left:0;} 
    /* remove top & bottom margins for nested lists */ 
    ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl 
    { margin-top:0; margin-bottom:0; } 
    /* use circle when ul nested 2 deep */ 
    ol ul, ul ul { list-style-type:circle; } 
    /* use square when ul nested 3 deep */ 
    ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type:square; }

    在Firfox浏览器输resource://gre-resources/html.css查看Firfox浏览器的默认样式。

  • 相关阅读:
    Spring MVC的Controller统一异常处理:HandlerExceptionResolver
    Log4j按级别输出日志到不同文件配置
    Linux top命令用法
    free -m内存使用详解
    Linux运维中遇到的常见问题
    ubuntu16.04 nginx安装
    redis主从配置及主从切换
    Redis持久化配置-AOF
    如何处理消极想法
    libevent安装总结
  • 原文地址:https://www.cnblogs.com/yangrixing/p/3602280.html
Copyright © 2011-2022 走看看