不同的浏览器对有些HTML标签属性的默认值是不同的,为消除这种差异,需要对CSS进行初始化,即通过设置样式及其属性值,替代浏览器默认的属性值。
2.京东首页CSS初始化(1)CSS初始化样式引入方式
采用引入外部样式表的方式进行CSS初始化
(2)相关代码解读
* {margin: 0; padding: 0; } em,i {font-style: normal; } li {list-style: none; }img {border: 0; vertical-align: middle;}button {cursor: pointer; }a {color: #666;text-decoration: none; } a:hover {color: #c81623; } button, input {font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,"5B8B4F53", sans-serif;} body {-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,Hiragino Sans GB, "5B8B4F53", sans-serif;color: #666;}.hide,.none {display: none; }.clearfix:after {visibility: hidden; clear: both; display: block; content: "."; height: 0; }.clearfix {*zoom: 1;}
3.淘宝首页CSS初始化 (1)CSS初始化样式引入方式
采用内部样式的方式进行CSS初始化
(2)相关代码解读
淘宝在进行CSS样式初始化时,并没有采用通配符*的方式设置标签的内外边距,而是将具体的标签进行并集罗列。根据网上资料,通配符*,容易书写,但是在大型网站中,会初始化所有标签,会加大网站负荷,使得网站加载变慢。当然京东应该是做了优化的,不然网站体验也会很差。
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin: 0;padding: 0;}body,button,input,select,textarea {font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "5b8b4f53",sans-serif;}h1,h2,h3,h4,h5,h6 {font-size: 100%; }address,cite,dfn,em,var {font-style: normal;}code,kbd,pre,samp {font-family: courier new, courier, monospace;}small {font-size: 12px;}ol,ul {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%; }button {border-radius: 0; } table {border-collapse: collapse;border-spacing: 0; }
4.寻找CSS样式初始化代码技巧 通常在CSS初始化代码中包含padding:0和margin:0的代码,表示将内外边距设置为0;当找到该代码时,一般是找到了CSS样式初始化的代码开头。