相同的元素,

如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. .net学习之.net和C#关系、运行过程、数据类型、类型转换、值类型和引用类型、数组以及方法参数等

    1..net 和 C# 的关系.net 是一个平台,C#是种语言,C#语言可以通过.net平台来编写.部署.运行.net应用程序,C#通过.net平台开发.net应用程序2..net平台的重要组成FC ...

  2. jQuery 重新温习 遗忘知识点

    解决jQuery和其他库的冲突 当把jQuery和其他JavaScript库(例如Prototype.MooTools或YUI)一起使用时 <script> jQuery.noConfli ...

  3. css局部概念的理解:

    1.DIV-Padding理解:一直以来对div中的padding属性,一直不理解,使用最多的也就是margin,padding是div的内空间的相对距离,margin是div的外部相对位置,如果用一 ...

  4. sql:除非另外还指定了 TOP 或 FOR XML,否则,ORDER BY 子句在视图、内联函数、派生表、子查询

    执行sql语句: select * from ( select * from tab where ID>20 order by userID desc ) as a order by date ...

  5. Java Hour 55 Spring Framework 2

    上一章节估计被官方的说明文档扯晕了,其实说白了不就是个IOC 注入的容器么,用过了微软Enterprise Library 的Unity 的我还会怕这个.自己随便写个demo, 将知识的主题框架先构建 ...

  6. Start GitHub

    google 的各种被墙大家都懂的,所以转向GitHub 的怀抱. 以前其实也关注过,这回是下决心好好试用了. Fork repositories Forking creates a new, uni ...

  7. 微信jsapi接口测试

    微信jsapi接口测试 <?php require_once 'lib.inc.php'; $wx = new WxApi(); if(!isset($_GET['code'])){ heade ...

  8. JSON浅总

    我们在以前的学习中了解到XML是一种结构化的数据表示方式,一种可扩展标记语言!可以把XML理解成一个微型的结构化的小的数据库,保存一些小型的数据和传输数据,有严格的显示限制.但是XML语句有些冗长和繁 ...

  9. SQL分布式查询、跨数据库查询

    --[方法1]连接服务器方法 --step1 创建链接服务器  exec sp_addlinkedserver     'srv_lnk','','SQLOLEDB', 'ip地址'  exec sp ...

  10. BeagleBone硬件概览Ethernet端口板载LEDc重置按钮等介绍

    BeagleBone硬件概览Ethernet端口板载LEDc重置按钮等介绍 你进入BeagleBone世界的第一步就是将它连接以得到命令提示,然后你就可以处理文件以及执行命令了.在这里,你就可以定制你 ...