你对如何书写高效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>
分享URL：<a href="http://www.scanyue.cn/article/djodces.html">http://www.scanyue.cn/article/djodces.html</a>
</div>
</div>
<div class="news_r">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/djecgjo.html">C#读取word文档实例浅析</a>
</li><li>
<a href="/article/djecjcc.html">动态vps是什么？怎么用？(vps如何自动拨号上网)</a>
</li><li>
<a href="/article/djecjsi.html">Word文档如何合并表格</a>
</li><li>
<a href="/article/djecgpp.html">游戏平台搭建在韩国大带宽服务器CN2路线哪里的比较不错</a>
</li><li>
<a href="/article/djecjsp.html">23种设计模式，我竟然秒懂了...</a>
</li> </ul>
</div>
</div>
<!--尾部begin-->
<!--尾部begin-->
<footer>
<div class="f_bg">
<div class="wrap">
<div class="links">
<h2 class="h2">云锦诚建站解决方案<a href="../solution/" title="更多" class="more">更多+</a></h2>
<ul>
<li><a href="../solution/xiaochengxu.html" title="小程序定制解决方案">小程序定制解决方案</a></li>
<li><a href="../solution/qiyewz.html" title="企业网站建设解决方案">企业网站建设解决方案</a></li>
<li><a href="../solution/menhuwz.html" title="行业门户网站建设解决方案">行业门户网站建设解决方案</a></li>
<li><a href="../solution/yingxiaowz.html" title="营销型网站建设解决方案">营销型网站建设解决方案</a></li>
<li><a href="../solution/waimaowz.html" title="外贸网站建设解决方案">外贸网站建设解决方案</a></li>
<li><a href="../solution/pingpaiwz.html" title="品牌形象网站建设解决方案">品牌形象网站建设解决方案</a></li>
<li><a href="../solution/dianziwz.html" title="数码、电子产品网站建设解决方案">数码、电子产品网站建设解决方案</a></li>
<li><a href="../solution/jituanwz.html" title="集团、上市企业网站建设解决方案">集团、上市企业网站建设解决方案</a></li>
<li><a href="../solution/dichanwz.html" title="房地产、地产项目网站建设解决方案">房地产、地产项目网站建设解决方案</a></li>
<li><a href="../solution/zhubaowz.html" title="珠宝高端奢侈品网站建设解决方案">珠宝高端奢侈品网站建设解决方案</a></li>
</ul>
</div>
<div class="links w2">
<h2 class="h2">我们的实力<a href="../about/" title="更多" class="more">更多+</a></h2>
<ul>
<li>多年专业互联网服务经验</li>
<li>安岳高端建站设计团队</li>
<li>资深行业分析策划</li>
<li>B2C营销型网站建设者</li>
<li>前沿视觉设计、研发能力</li>
<li>前端代码深度符合SEO优化</li>
<li>安岳市高新技术企业证书</li>
<li>具有完备的项目管理</li>
<li>完善的售后服务体系</li>
<li>深厚的网络运营经验</li>
<li>时刻新技术研发能力</li>
<li>16个网站系统软件著作权</li>
</ul>
</div>
<div class="f_div2_r">
<h2 class="h2">关于云锦诚网站建设<a href="../about/" title="更多" class="more">更多+</a></h2>
云锦诚网站设计，为客户量身定制各类网站建设业务，包括企业型、电子商务型、行业门户型、品牌建立型等各类网站，实战经验丰富，成功案例众多。以客户利益为出发点，云锦诚网站建设网站制作为客户规划、定制符合企业需求、带有营销价值的建站方案，提供从网站前期定位分析策划到网站界面设计... </div>
<div class="c_l"></div>
</div>
<div class="wrap">
<div class="link">
友情链接：
<a href="http://www.sczizhong.com/" title="资中网站设计" target="_blank">资中网站设计</a> <a href="http://www.cdwebwh.com/" title="成都网站维护公司" target="_blank">成都网站维护公司</a> <a href="http://www.njdkfx.com/" title="成都不锈钢标牌" target="_blank">成都不锈钢标牌</a> <a href="http://www.ncfdjwx.com/" title="南充柴油发电机维修" target="_blank">南充柴油发电机维修</a> <a href="http://www.cdhuace.com/fuwu.html" title="名片" target="_blank">名片</a> <a href="http://www.gzzfdj.com/" title="甘孜发电机" target="_blank">甘孜发电机</a> <a href="http://www.ty18.com/" title="天缘科技" target="_blank">天缘科技</a> <a href="http://www.scxgfdj.com/" title="康明斯发电机组租赁" target="_blank">康明斯发电机组租赁</a> <a href="http://chengdu.cdcxhl.com/dingzhi/" title="成都定制网站" target="_blank">成都定制网站</a> <a href="http://www.zzdkfx.cn/" title="景区公园导视牌" target="_blank">景区公园导视牌</a> </div>
</div>
<div class="wrap">
<div class="f_div3"> <span class="l">安岳网站建设案例©2025 成都云锦诚科技有限公司 安岳建站云锦诚 版权所有 | <a href="http://www.scanyue.cn/" target="_blank">安岳网站设计</a><a href="http://www.scanyue.cn" target="_blank">www.scanyue.cn</a></span> <span class="r"><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024117194号-9</a></span> </div>
</div>
</div>
</footer>
<!--尾部end-->
<script language="javascript" src="/Public/Home/js/foot.js"></script>
<!--尾部end-->
<!--侧边栏begin-->
<div class="side">
<ul>
<li id="qqonline_xbceo"><a href="tencent://message/?uin=631063699&Site=&Menu=yes"><i class="bgs1"></i>QQ咨询</a></li>
<li class="shangqiao"><a href="tencent://message/?uin=532337155&Site=&Menu=yes" title="在线咨询">
<div><i class="bgs2"></i>在线咨询</div>
</a></li>
<li class="sideewm"><i class="bgs3"></i>官方微信
<div class="ewBox"></div>
</li>
<li class="sideetel"><i class="bgs4"></i>联系电话
<div class="telBox">
<dd class="bgs1"><span>座机</span><a href="tel:028-86922220" target="_blank">028-86922220</a></dd>
<dd class="bgs2"><span>手机</span><a href="tel:13518219792" target="_blank">13518219792</a></dd>
</div>
</li>
<li class="sidetop" onClick="goTop()" id="sidetop"><i class="bgs6"></i>返回顶部</li>
</ul>
</div>
<script type="text/javascript">
$('.sideewm').hover(function(){
$('.ewBox').stop().fadeIn();
},function(){
$('.ewBox').stop().fadeOut();
});
$('.sideetel').hover(function(){
$('.telBox').stop().fadeIn();
},function(){
$('.telBox').stop().fadeOut();
});
</script>
<!-- WPA start -->
<!-- WPA end -->
<!--侧边栏end-->
</body>
</html>
<script>
$(".con img").each(function(){
var src = $(this).attr("src"); //获取图片地址
var str=new RegExp("http");
var result=str.test(src);
if(result==false){
var url = "https://www.cdcxhl.com"+src; //绝对路径
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script>
