书写高效CSS注意的七个方面-css书写方式有几种

你对如何书写高效CSS是否熟悉，这里和大家分享一下书写高效CSS注意的七个方面，主要包括使用外联样式替代行间样式或者内嵌样式，建议使用link引入外部样式表等内容，相信本文介绍一定会让你有所收获。

CSS经验分享：书写高效CSS注意的七个方面

随着CSS网页布局的应用越来越广泛，更多的CSSer开始书写CSS，如何才能写出高效规范的CSS代码呢，本文向大家介绍一下必须要注意的七个方面：

一、使用外联样式替代行间样式或者内嵌样式

　　不推荐使用行间样式

ExampleSourceCode

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>Pagetitle-52css.comtitle> 
head> 
<body> 
<pstylepstyle="color:red">...p> 
body> 
html> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

　　不推荐使用内嵌样式

ExampleSourceCode

"http://www.w3.org/TR/html4/strict.dtd"><htmllanghtmllang="en"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>Pagetitle-52css.comtitle> 
<styletypestyletype="text/css"media="screen"> 
p{color:red;}  
style> 
head> 
<body>...body> 
html> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

　　推荐使用外联样式

ExampleSourceCode

"http://www.w3.org/TR/html4/strict.dtd"> 
<htmllanghtmllang="en"> 
<head> 
<metahttp-equivmetahttp-equiv="content-type"content="text  
<title>Pagetitle-52css.comtitle> 
<linkrellinkrel="stylesheet"href="name.css"type="text/css"media="screen"/> 
head> 
<body>...body> 
html> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

#p# 二、建议使用link引入外部样式表

　　为了兼容老版本的浏览器，建议使用link引入外部样式表的方来代替@import导入样式的方式.

译者注：@import是CSS2.1提出的所以老的浏览器不支持，点击查看@import的兼容性。

　　@import和link在使用上会有一些区别，利用二者之间的差异，可以在实际运用中进行权衡。

　　关于@import和link方式的比较在52CSS.com上有几篇文章可以拓展阅读。

　　不推荐@import导入方式

ExampleSourceCode

 
"http://www.w3.org/TR/html4/strict.dtd"> 
<htmllanghtmllang="en"> 
<head> 
<metahttp-equivmetahttp-equiv="content-type"content="text  
<title>Pagetitle-52css.comtitle> 
<styletypestyletype="text/css"media="screen"> 
@importurl("styles.css");  
style> 
head> 
<body>...body> 
html> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

　　推荐引入外部样式表方式

ExampleSourceCode

"http://www.w3.org/TR/html4/strict.dtd"><htmllanghtmllang="en"><head> 
<metahttp-equivmetahttp-equiv="content-type"content="text  
<title>Pagetitle-52css.comtitle> 
<linkrellinkrel="stylesheet"href="name.css"type="text/css"media="screen"/> 
head> 
<body>...body> 
html> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.

三、使用继承

ExampleSourceCode

低效率的  
 
p{font-family:arial,helvetica,sans-serif;}  
#container{font-family:arial,helvetica,sans-serif;}  
#navigation{font-family:arial,helvetica,sans-serif;}  
#content{font-family:arial,helvetica,sans-serif;}  
#sidebar{font-family:arial,helvetica,sans-serif;}  
h1{font-family:georgia,times,serif;}  
 
高效的  
 
body{font-family:arial,helvetica,sans-serif;}  
body{font-family:arial,helvetica,sans-serif;}  
h1{font-family:georgia,times,serif;}  

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

#p#

四、使用多重选择器

ExampleSourceCode

低效率的  
 
h1{color:#236799;}  
h2{color:#236799;}  
h3{color:#236799;}  
h4{color:#236799;}  
 
高效的  
 
h1,h2,h3,h4{color:#236799;}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

五、使用多重声明

ExampleSourceCode

低效率的  
 
p{margin:001em;}  
p{background:#ddd;}  
p{color:#666;}  
 
译者注：对于十六进制颜色值，个人偏向于色值不缩写且英文字母要大写的方式.  
 
高效的  
 
p{margin:001em;background:#ddd;color:#666;}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

六、使用简记属性

ExampleSourceCode

低效率的  
 
body{font-size:85%;font-family:arial,helvetica,sans-serif;  
background-image:url(image.gif);background-repeat:no-repeat;  
background-position:0100%;margin-top:1em;margin-right:1em;  
margin-bottom:0;margin-left:1em;padding-top:10px;  
padding-right:10px;padding-bottom:10px;padding-left:10px;  
border-style:solid;border-width:1px;border-color:red;color:#222222;  
 
高效的  
 
body{font:85%arial,helvetica,sans-serif;  
background:url(image.gif)no-repeat0100%;margin:1em1em0;  
padding:10px;border:1pxsolidred;color:#222;}  
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

七、避免使用!important

ExampleSourceCode

慎用写法  
 
#news{background:#ddd!important;}  
特定情况下可以使用以下方式提高权重级别  
#container#news{background:#ddd;}  
body#container#news{background:#ddd;}  
 
1.
2.
3.
4.
5.
6.
7.

　　那么，如何让（后续）维护你站点的人更容易理解你的样式代码呢？我们在51cto.com以后的文章中和大家共同讨论学习。

【编辑推荐】