css初始化代码

分手后的思念是犯贱 2022-07-15 13:59 208阅读 0赞

CSS初始化代码

### 为什么要初始化CSS？ ###

CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。

### CSS初始化示例代码 ###

/\*  css reset www.admin10000.com  \*/  
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 : 0 ;  padding : 0 ;   \}  
body  \{   background : \#fff ;  color : \#555 ;  font-size : 14px ;  font-family :  Verdana, Arial, Helvetica, sans-serif ;   \}  
td,th,caption  \{   font-size : 14px ;   \}  
h1, h2, h3, h4, h5, h6  \{   font-weight : normal ;  font-size : 100% ;   \}  
address, caption, cite, code, dfn, em, strong, th, var  \{   font-style : normal ;  font-weight : normal ; \}  
a  \{   color : \#555 ;  text-decoration : none ;   \}  
a:hover  \{   text-decoration : underline ;   \}  
img  \{   border : none ;   \}  
ol,ul,li  \{   list-style : none ;   \}  
input, textarea, select, button  \{   font : 14px Verdana,Helvetica,Arial,sans-serif ;   \}  
table  \{   border-collapse : collapse ;   \}  
html  \{  overflow-y :  scroll ; \}    
/\*  css common  \*/  
.clearfix:after  \{  content :  "." ;  display :  block ;  height : 0 ;  clear : both ;  visibility :  hidden ; \}  
.clearfix  \{   \*zoom : 1 ;   \}

上面是[admin10000.com][]使用的CSS重置代码，这段代码是我比较喜欢用的一种方式，虽然还不够完美但是常用的几乎已经都包括了。

下面顺便给出admin10000.com 的html模板，用于每次新开发页面使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
    <head>
    　　<title>网站标题 - Admin10000.com </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Content-Language" content="zh-CN" />
    	<meta name="Author" content="网页作者" /> 
    	<meta name="Copyright" content="网站版权" /> 
    	<meta name="keywords" content="网站关键字" />
    	<meta name="description" content="网站描述" />
    	<link rel="Shortcut Icon" href="网站.ico图标路径" />
    	<link type="text/css" rel="stylesheet" href="CSS文件路径" />
    	<script type="text/javascript" src="JS文件路径"></script>
    </head>
    <body>
    </body>
    </html>

[admin10000.com]: http://www.admin10000.com/