CSS样式表初始化代码

来源:互联网 发布:冒名卡出售 淘宝交易 编辑:程序博客网 时间:2024/06/16 05:37
CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法就是: * {padding: 0; margin: 0;}。有很多人也是这样写的。这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。

写过css的都知道每个网页引进的css首先都需要初始化,而出名的css reset有YUI cssreset(QQ、淘宝等都出现他的影子),业内用的最多的还有Erik Meyer’s CSS Reset。

花了点时间,把一些门户及大型网站的样式初始化罗列了下来(仅供参考)

腾讯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:0;padding:0}
body{font:12px"宋体","ArialNarrow",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:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
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:0;padding:0;border:0;}
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:0; padding:0; }
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:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

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

html {overflow-y:scroll;}
body {margin:0; padding:29px00;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:0;margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
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;}


下面我贴出一段本站的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;}
body { font-size:12px; color:#666; font-family:Verdana, MicrosoftYaHei, Simsun; background:#fff; line-height:24px; }
fieldset, img { border:0; }
ol, ul { list-style:none; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
em { font-style:normal; }
input, button, select, textarea { outline:none; }
textarea { resize:none; } //禁用了文本的拖拉,尤其在谷歌下
p{ text-align:justify; text-justify:distribute;}//为了使文本段落左右两边对齐

a { color: #666; text-decoration:none; }
a:hover { color: #f60; text-decoration:none; }

0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 转页风扇有噪音怎么办 住的地方太吵怎么办 租的房子太吵怎么办 苹果手机音量键坏了怎么办 xp系统声音没了怎么办 柿子烂到窗台上怎么办 小窗户厨房太暗怎么办 抬东西把腰闪了怎么办 搬重东西后腰疼怎么办 闪了腰怎么办一动就疼 窗户的把手断了怎么办 窗户寸漏不了水怎么办 窗户打开关不上怎么办 新装修的房子有甲醛怎么办 橄榄核上油花了怎么办 虫子飞到耳朵里怎么办 手被虫子咬肿了怎么办 梦见牙掉出血该怎么办 黑户急需5万块钱怎么办 家里欠了好多钱怎么办 欠好多网贷我该怎么办 外面欠了很多钱怎么办 欠了好多网贷怎么办 欠那么多钱我该怎么办 急用钱怎么办谁给指条路 晚上睡不着觉怎么办白天又醒不来 胃疼了好几天怎么办 手机移动卡怎么办副卡 大学我好累我怎么办 感觉婚姻很累了怎么办 一个人的心累了怎么办 头被凉水激着了怎么办 人一但懒惰了怎么办 太懒了怎么办都不想活 和老公和不来该怎么办 摩拜忘记关锁怎么办 绿萝叶子变软了怎么办 水痘疫苗打了3次怎么办 免疫组化p16阳性怎么办 乙肝五项25为阳怎么办 苏宁快递丢件了怎么办