你对如何书写高效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://chengdu.cdxwcx.cn/article/djodces.html">http://chengdu.cdxwcx.cn/article/djodces.html</a>
</div>
</div>
</div>
<!--左边end-->
<!--右边begin-->
<div class="news_r">
<div class="news_t"><h2 class="h2">其他资讯</h2></div>
<div class="news_ul3">
<ul>
<li>
<a href="/article/dpiihig.html">
<h3 class="h3">安全漏洞扫描是否适用于移动应用程序和物联网设备？</h3>
</a>
</li><li>
<a href="/article/dpiihoj.html">
<h3 class="h3">研究着眼于企业领导人在满足日益增长的客户期望方面面临的压力</h3>
</a>
</li><li>
<a href="/article/dpiihcj.html">
<h3 class="h3">学会Python的这五点搞定作用域</h3>
</a>
</li><li>
<a href="/article/dpiihci.html">
<h3 class="h3">开启Linux之路：为用户赋予权力（linux给用户赋权）</h3>
</a>
</li><li>
<a href="/article/dpiihid.html">
<h3 class="h3">全世界的网络总服务器在那里？哪里服务器好</h3>
</a>
</li> </ul>
</div>
</div>
<!--右边end-->
<div class="c_l"></div>
</div>
</div>
<!--正文end-->
<!--尾部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>10年专业互联网服务经验</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="f_div3"> <span class="l">成都网站制作案例©2020 甜橘子设计 版权所有 | <a href="http://chengdu.cdxwcx.cn" target="_blank">甜橘子网站设计</a><a href="http://chengdu.cdxwcx.cn" target="_blank">chengdu.cdxwcx.cn</a></span> <span class="r"><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备11025516号</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();
});
$(".con_id 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);
}
});
</script>
<!-- WPA start -->
<!-- WPA end -->
<!--侧边栏end-->
</body>
</html>
