zoukankan      html  css  js  c++  java
  • 网页设计:重置CSS样式表

    转自豆瓣:http://www.douban.com/note/330400235/

    网页设计:重置CSS样式表


    网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表。这样,“抹掉”这些默认样式表成了首要问题,也就有了CSS样式表重置一说,目前用的最多的,也是自己现在正在用的方法是,添加以下代码:

    第一种方式    

    * {margin:0px; padding:0px;}

    现在众多的设计师发现,这行代码虽然简单,但却让网页解析太慢,呵呵,当然了,自己是业余的,不用太在意。
    于是出现了几种CSS重置方法:

    第二种方式
    NETTUTS上的 Jeffrey Way写了篇文章Weekend Quick Tip: Create Your Own Simple Reset.css File
    释出自己用来重置CSS样式表的方法

     1 body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
     2 li, dl, dt, dd, form, a, fieldset, input, th, td
     3 {margin: 0; padding: 0; border: 0; outline: none;}
     4 body{line-height: 1;font-size: 88% /* Decide for yourself if you want to include this. */;}
     5 h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}
     6 ul, ol{list-style: none;}
     7 a{color: black;text-decoration: none;}
     8 a:hover
     9 {text-decoration: underline;}
    10 .floatLeft{float: left;padding: .5em .5em .5em 0;}
    11 .floatRight{float: right;padding: .5em 0 .5em .5em;}

        这个方法适用于大多数的网页设计。


    第三种方式
    一部分人追求彻底抹去浏览器影响

     1 html, body, div, span, applet, object, iframe,
     2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
     3 a, abbr, acronym, address, big, cite, code,
     4 del, dfn, em, font, img, ins, kbd, q, s, samp,
     5 small, strike, strong, sub, sup, tt, var,
     6 b, u, i, center,
     7 dl, dt, dd, ol, ul, li,
     8 fieldset, form, label, legend,
     9 table, caption, tbody, tfoot, thead, tr, th, td {
    10         margin: 0;
    11         padding: 0;
    12         border: 0;
    13         outline: 0;
    14         font-size: 100%;
    15         vertical-align: baseline;
    16         background: transparent;
    17 }
    18 body {line-height: 1;}
    19 ol, ul {list-style: none;}
    20 blockquote, q {quotes: none;}
    21 blockquote:before, blockquote:after,
    22 q:before, q:after {content: '';content: none;}
    23 
    24 /* remember to define focus styles! */
    25 :focus {outline: 0;}
    26 
    27 /* remember to highlight inserts somehow! */
    28 ins {text-decoration: none;}
    29 del {    text-decoration: line-through;}
    30 
    31 /* tables still need 'cellspacing="0"' in the markup */
    32 table {border-collapse: collapse;border-spacing: 0;}

     

    第四种方式
    还有今天sofish提到的Yahoo的YUI提供的CSS重置文件 

     1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
     2         margin:0;
     3         padding:0;
     4 }
     5 table {border-collapse:collapse;border-spacing:0;}
     6 fieldset,img { border:0;}
     7 address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;
     8 font-weight:normal;}
     9 ol,ul {list-style:none;}
    10 caption,th {text-align:left;}
    11 h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
    12 q:before,q:after {content:'';}
    13 abbr,acronym { border:0;}

    这些,没有谁好谁坏一分,大多数设计师并不推荐第一种方法,因为我国的抄袭美德,现在搜索到的CSS网页设计技巧,第一位却一定是这个。

    转自豆瓣:http://www.douban.com/note/330400235/

  • 相关阅读:
    RTThread | 启动下一代RTOS演化
    开发者应该开始学习C++吗?
    用googleperftool分析程序的内存/CPU使用
    看书看累了,可以换看技术视频也是一种学习的方式
    分享:nginx virtuanenv django1.4 应用简单部署
    分享:不同编程语言之间转换的项目矩阵
    【EDUPEPN8508GS黄金版】EDUP EPN8508GS黄金版 迷你USB无线网卡【行情 报价 价格 评测】
    分享:20 本优秀的 Python 电子书
    说说设计模式~工厂方法模式(Factory Method)
    说说设计模式~简单工厂模式(Factory)
  • 原文地址:https://www.cnblogs.com/zoeyll/p/4380095.html
Copyright © 2011-2022 走看看