相同的元素,

如ul>li,body等元素在不同的瀏覽器下被渲染的效果不同(各個瀏覽器對這些元素的border,margin,padding,font-size等等的初始值不同),

要讓他們表現相同就需要進行css初始化!!

css初始化:

  通過CSS強制讓屬性值一樣!!


初始化腳本

Yahoo提供的css reset 腳本:

html {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0 none;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}
li {
    list-style: none outside none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: "";
}
abbr, acronym {
    border: 0 none;
    font-variant: normal;
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}
input, textarea, select {
}
legend {
    color: #000000;
}
body {
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
}
select, input, button, textarea {
    font: 99% arial,helvetica,clean,sans-serif;
}
table {
    font-size: inherit;
}
pre, code, kbd, samp, tt {
    font-family: monospace;
    line-height: 100%;
}
a {
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: underline;
}
strong {
    font-weight: bold;
}
input[type="submit"] {
    cursor: pointer;
}
button {
    cursor: pointer;
}

腾讯QQ官网(http://www.qq.com)初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:;padding:}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:;vertical-align:middle}
table{border-collapse:collapse;border-spacing:}
p{word-wrap:break-word}

新浪官网(http://www.sina.com.cn/)初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:;padding:;border:;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;} a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

淘宝官网(http://www.taobao.com/)初始化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 
dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:; padding:; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:; }

网易官网(http://www.163.com/)初始化

html {overflow-y:scroll;}
body {margin:; padding:29px 0 0; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:; margin:;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

博客园(http://www.cnblogs.com/)初始化

/*version: 2.7.0*/
html,body{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{
margin:;padding:;
}
table{border-collapse:collapse;border-spacing:;}
fieldset,img{border:;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{
font-style:inherit;font-weight:inherit;
}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{
font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;
}
input,button,textarea,select{*font-size:100%;}
.clear{clear:both;}
input::-moz-focus-inner{ border:;padding:;} /*added*/
input[type=button],input[type=submit] {-webkit-appearance: button;}

列舉這個的目錄,是希望針對自己的情況有針對性的對自己公司的網站進行初始化設置,而不是照搬。

目前使用的是Yahoo的CSS初始化。

HTML: Css初始化的更多相关文章

  1. css初始化代码

    最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------- ...

  2. CSS初始化样式

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  3. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  4. css初始化

    Css初始化代码: *{padding:0px;margin:0px;} body{font-size:12px;font-family: "宋体",Arial Black;tex ...

  5. 各大门户网站的css初始化代码

    腾讯QQ官网 css样式初始 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select ...

  6. css初始化样例代码

    /* css reset www.admin10000.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fields ...

  7. css初始化代码方案

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24) 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候 ...

  8. 论前端css初始化的重要性

    新手,求喷,刚刚知道每个浏览器都有对 标签的初始化,就造成我们网站开发者开发的web程序,会在不同的网站上有不同的样式风格,这给用户带来了很不好的体验,这也是浏览器本身的原因造成的,这时候,我们不可能 ...

  9. CSS 初始化 代码

    腾讯QQ官网 样式初始化 ;} body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-web ...

随机推荐

  1. Entity FrameWork 中使用Expression<Func<T,true>>访问数据库性能优化

    问题的本质是:扩展的Where方法有四个参数重载.传进去Func<T,true>那么返回值是IEnumable的接口类型的集合,如果是Expression<Func<T,tru ...

  2. Redis/SSDB+Twemproxy的配置与使用(Mac/Linux平台)

    对于redis而已,相信不少的后台开发人员一直都在使用,相比memcache而已,redis不仅可以作为key-value缓存使用,而且提供了丰富的数据结构如set.list.map等,能够实现很多复 ...

  3. 利用SQLiteOpenHelper来管理SQLite数据库 (转)

    转载自 利用SQLiteOpenHelper来管理SQLite数据库 http://blog.csdn.net/conowen/article/details/7306545 Android学习笔记( ...

  4. 一件关于数据库日志log的无聊事情

    为何说是无聊的记录呢? 因为事先把问题想复杂了,事后发现的时候觉得更是无聊的行为.还是写下来,毕竟很少弄这么无聊的事情. 事情起因是需要给服务器做性能基数(baseline),用sqldiag 提取了 ...

  5. eclipse提示信息设置和提示信息操作

    1.提示信息设置 windows->preference->java->Editor->content Assist->Advance,选择需要提示的内容即可.如图所示: ...

  6. 使用AIDL远程调用服务中的方法

    AIDL:android interface define language(接口定义语言) 作用:方便远程调用其他服务中的方法 注意:安卓四大组件都要在清单文件注册 aidl创建图: AIDL的全称 ...

  7. php 批量生成html、txt文件

    首先建立一个conn.php的文件用来链接数据库 <?php     $link = mysql_connect("mysql_host" , "mysql_use ...

  8. pda完美结合开销售单据haohantech-安卓打票扫描PDA智能POS 发展现状如何,会取代传统电脑 代替手工开单 么?

    现场开单时指业务员每天到终端客户的现场进行谈单和接单的动作流程,现场开单一般主要是集中在BCD类门店和一些批发零售小店 现场开单的优势:现场开单可以及时掌控终端客户情况,促进客情关系,提高产品的铺市率 ...

  9. 中国大数据六大技术变迁记(CSDN)

    大会召开前期,特别梳理了历届大会亮点以记录中国大数据技术领域发展历程,并立足当下生态圈现状对即将召开的BDTC 2014进行展望: 追本溯源,悉大数据六大技术变迁 伴随着大数据技术大会的发展,我们亲历 ...

  10. Linux 档案与目录管理

    『 cd /etc 』这个情况,这也就是所谓的『绝对路径』,他是从根目录连续写上来的一个情况,所以不论你在哪一个路径现执行这一个指令,都会将你移动到该路径下.那如果我是使用『 cd etc 』呢?那表 ...