你对如何书写高效CSS是否熟悉，这里和大家分享一下书写高效CSS注意的七个方面，主要包括使用外联样式替代行间样式或者内嵌样式，建议使用link引入外部样式表等内容，相信本文介绍一定会让你有所收获。
CSS经验分享：书写高效CSS注意的七个方面
随着CSS网页布局的应用越来越广泛，更多的CSSer开始书写CSS，如何才能写出高效规范的CSS代码呢，本文向大家介绍一下必须要注意的七个方面：
一、使用外联样式替代行间样式或者内嵌样式
不推荐使用行间样式
ExampleSourceCode
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-
-
- Pagetitle-52css.com title> </li>
<li> head> </li>
<li><body> </li>
<li><pstylepstyle="color:red">... p> </li>
<li> body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p> 不推荐使用内嵌样式</p><p>ExampleSourceCode</p>
<pre>
<ol>
<li></li>
<li>"http://www.w3.org/TR/html4/strict.dtd"><htmllanghtmllang="en"> </li>
<li><head> </li>
<li><metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> </li>
<li><title>Pagetitle-52css.com title> </li>
<li><styletypestyletype="text/css"media="screen"> </li>
<li>p{color:red;} </li>
<li> style> </li>
<li> head> </li>
<li><body>... body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p> 推荐使用外联样式</p><p>ExampleSourceCode</p>
<pre>
<ol>
<li></li>
<li>"http://www.w3.org/TR/html4/strict.dtd"> </li>
<li><htmllanghtmllang="en"> </li>
<li><head> </li>
<li><metahttp-equivmetahttp-equiv="content-type"content="text </li>
<li><title>Pagetitle-52css.com title> </li>
<li><linkrellinkrel="stylesheet"href="name.css"type="text/css"media="screen"/> </li>
<li> head> </li>
<li><body>... body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p>#p# <strong>二、建议使用link引入外部样式表</strong></p><p> 为了兼容老版本的浏览器，建议使用link引入外部样式表的方来代替@import导入样式的方式.</p><p>译者注：@import是CSS2.1提出的所以老的浏览器不支持，点击查看@import的兼容性。</p><p> @import和link在使用上会有一些区别，利用二者之间的差异，可以在实际运用中进行权衡。</p><p> 关于@import和link方式的比较在52CSS.com上有几篇文章可以拓展阅读。</p><p> 不推荐@import导入方式</p><p>ExampleSourceCode</p>
<pre>
<ol>
<li></li>
<li> </li>
<li>"http://www.w3.org/TR/html4/strict.dtd"> </li>
<li><htmllanghtmllang="en"> </li>
<li><head> </li>
<li><metahttp-equivmetahttp-equiv="content-type"content="text </li>
<li><title>Pagetitle-52css.com title> </li>
<li><styletypestyletype="text/css"media="screen"> </li>
<li>@importurl("styles.css"); </li>
<li> style> </li>
<li> head> </li>
<li><body>... body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p> 推荐引入外部样式表方式</p><p>ExampleSourceCode</p>
<pre>
<ol>
<li></li>
<li>"http://www.w3.org/TR/html4/strict.dtd"><htmllanghtmllang="en"><head> </li>
<li><metahttp-equivmetahttp-equiv="content-type"content="text </li>
<li><title>Pagetitle-52css.com title> </li>
<li><linkrellinkrel="stylesheet"href="name.css"type="text/css"media="screen"/> </li>
<li> head> </li>
<li><body>... body> </li>
<li> html> </li>
<li> </li>
</ol></pre><p> <strong>三、使用继承</strong></p><p>ExampleSourceCode</p>
<pre>
<ol>
<li>低效率的 </li>
<li> </li>
<li>p{font-family:arial,helvetica,sans-serif;} </li>
<li>#container{font-family:arial,helvetica,sans-serif;} </li>
<li>#navigation{font-family:arial,helvetica,sans-serif;} </li>
<li>#content{font-family:arial,helvetica,sans-serif;} </li>
<li>#sidebar{font-family:arial,helvetica,sans-serif;} </li>
<li>h1{font-family:georgia,times,serif;} </li>
<li> </li>
<li>高效的 </li>
<li> </li>
<li>body{font-family:arial,helvetica,sans-serif;} </li>
<li>body{font-family:arial,helvetica,sans-serif;} </li>
<li>h1{font-family:georgia,times,serif;} </li>
<li></li>
</ol></pre><p>#p#</p><p><strong>四、使用多重选择器</strong></p><p>ExampleSourceCode</p>
<pre>
<ol>
<li>低效率的 </li>
<li> </li>
<li>h1{color:#236799;} </li>
<li>h2{color:#236799;} </li>
<li>h3{color:#236799;} </li>
<li>h4{color:#236799;} </li>
<li> </li>
<li>高效的 </li>
<li> </li>
<li>h1,h2,h3,h4{color:#236799;} </li>
<li> </li>
</ol></pre><p> <strong>五、使用多重声明</strong></p><p>ExampleSourceCode</p>
<pre>
<ol>
<li>低效率的 </li>
<li> </li>
<li>p{margin:001em;} </li>
<li>p{background:#ddd;} </li>
<li>p{color:#666;} </li>
<li> </li>
<li>译者注：对于十六进制颜色值，个人偏向于色值不缩写且英文字母要大写的方式. </li>
<li> </li>
<li>高效的 </li>
<li> </li>
<li>p{margin:001em;background:#ddd;color:#666;} </li>
<li> </li>
</ol></pre><p> <strong>六、使用简记属性</strong></p><p>ExampleSourceCode</p>
<pre>
<ol>
<li>低效率的 </li>
<li> </li>
<li>body{font-size:85%;font-family:arial,helvetica,sans-serif; </li>
<li>background-image:url(image.gif);background-repeat:no-repeat; </li>
<li>background-position:0100%;margin-top:1em;margin-right:1em; </li>
<li>margin-bottom:0;margin-left:1em;padding-top:10px; </li>
<li>padding-right:10px;padding-bottom:10px;padding-left:10px; </li>
<li>border-style:solid;border-width:1px;border-color:red;color:#222222; </li>
<li> </li>
<li>高效的 </li>
<li> </li>
<li>body{font:85%arial,helvetica,sans-serif; </li>
<li>background:url(image.gif)no-repeat0100%;margin:1em1em0; </li>
<li>padding:10px;border:1pxsolidred;color:#222;} </li>
<li> </li>
</ol></pre><p> <strong>七、避免使用!important</strong></p><p>ExampleSourceCode</p>
<pre>
<ol>
<li>慎用写法 </li>
<li> </li>
<li>#news{background:#ddd!important;} </li>
<li>特定情况下可以使用以下方式提高权重级别 </li>
<li>#container#news{background:#ddd;} </li>
<li>body#container#news{background:#ddd;} </li>
<li> </li>
</ol></pre><p> 那么，如何让（后续）维护你站点的人更容易理解你的样式代码呢？我们在以后的文章中和大家共同讨论学习。</p><p>【编辑推荐】</p>
<ol>
<li>***实现CSS页面居中方法揭秘</li>
<li>八个困扰新手的DIV CSS网页布局问题</li>
<li>深入剖析CSS层叠与继承的使用</li>
<li>专家推荐 10款优秀CSS框架</li>
<li>实例解析清除CSS float浮动的三种方法</li>
</ol>
</p> <br>
分享文章：书写高效CSS注意的七个方面 <br>
分享地址：<a href="http://zwzwh.cn/article/djodces.html">http://zwzwh.cn/article/djodces.html</a>
</div>
</div>
<div class="other">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/ghdcj.html">解决Node.jsmysql客户端不支持认证协议引发的问题-创新互联</a>
</li><li>
<a href="/article/dspeoc.html">怎么用frameset实现复杂的页面布局-创新互联</a>
</li><li>
<a href="/article/cijdoi.html">如何注册网站域名？新手域名注册指南</a>
</li><li>
<a href="/article/sggpsg.html">抖音账号运营是什么工作,抖音账号认证-抖音账号企业认证、抖音账号运营、抖音账号代</a>
</li><li>
<a href="/article/eseipj.html">北京短视频代运营哪家好,专业的北京短视频代运营公司推荐</a>
</li><li>
<a href="/article/poejcc.html">30W代码量的学长告诉你学习C语言的秘诀是什么？</a>
</li><li>
<a href="/article/doedjoo.html">数组是哪种php数据类型 php中数组元素是由什么组成的</a>
</li><li>
<a href="/article/doggogs.html">vb.net如何静音 vbnet break</a>
</li><li>
<a href="/article/deocejj.html">关于企业sap维护系统迁移的信息</a>
</li><li>
<a href="/article/disjcps.html">android日期键盘 安卓手机设置日期</a>
</li> </ul>
</div>
</div>
<footer>
<div class="foot container">
<div class="footl fl">
<h3>联系我们</h3>
<dl>
您好HELLO!<br>
感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们，
我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
</dl>
<ul>
<li>电话：028- <span>86922220 18980695689</span></li>
<li>商务合作邮箱：631063699@qq.com</li>
<li>合作QQ： 532337155</li>
<li>成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼</li>
</ul>
</div>
<div class="footr fr">
<h3>乐尚佳建站工作室</h3>
<dl>
成都乐尚佳网站建设公司拥有多年以上互联网从业经验的精英团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。
我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，乐尚佳建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！
</dl>
<h3>乐尚佳观点</h3>
<dl>
相对传统的成都网站建设公司而言，乐尚佳鼎是互联网中的网站品牌策划精英，我们精于企业品牌与互联网相结合的整体战略服务。<br>
我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
</dl>
</div>
</div>
<div class="link">
<div class="container"> <span> 友情链接：</span>
<a href="http://www.pzixm.com/" title="昆明勺贸菩汽车装饰" target="_blank">昆明勺贸菩汽车装饰</a> <a href="https://www.cdcxhl.com/quanwang.html" title="成都全网营销推广" target="_blank">成都全网营销推广</a> <a href="http://www.scwszj.com/" title="成都建筑保温橡塑" target="_blank">成都建筑保温橡塑</a> <a href="http://www.kfwge.com/" title="昆明实木餐桌销售" target="_blank">昆明实木餐桌销售</a> <a href="http://www.sxncvku.com/" title="成都柴油发电机维保" target="_blank">成都柴油发电机维保</a> <a href="http://www.yfrkm.com/" title="新都区柴油发电机" target="_blank">新都区柴油发电机</a> <a href="http://www.kmqzi.com/" title="昆明茶具供应" target="_blank">昆明茶具供应</a> <a href="http://www.scdkjj.com/" title="合影拍摄" target="_blank">合影拍摄</a> <a href="http://www.zxpux.com.cn/" title="成都促销广告伞" target="_blank">成都促销广告伞</a> <a href="http://chengdu.xwcx.net/mobile/" title="手机网站建设套餐" target="_blank">手机网站建设套餐</a> </div>
</div>
<div class="copy">
