我们专注孝感网站设计 孝感网站制作 孝感网站建设
成都网站建设公司服务热线：18982081108

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

书写高效CSS注意的七个方面

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

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

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

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

　　不推荐使用行间样式

ExampleSourceCode

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. 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://www.ytofo.com/article/djodces.html">http://www.ytofo.com/article/djodces.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/cosphcd.html">云服务器如何添加连接用户名</a>
                </li><li>
                    <a href="/article/cosppph.html">windows8简体中文原版?（windows8中文版)</a>
                </li><li>
                    <a href="/article/cospphg.html">探索Redis实现高效并发请求（并发请求redis）</a>
                </li><li>
                    <a href="/article/cosphci.html">美国cdn云服务器租用有哪些好处</a>
                </li><li>
                    <a href="/article/cosphse.html">广告违禁词在线查询，违禁词在线查询</a>
                </li>        </ul>
    </div>
</div>
<footer>
    <div class="message">
        <div class="mess container">
            <p>免费获取网站设计制作与品牌网站建设策划方案报价</p>
            <span>网站设计 + 品牌建站，策划方案 + 精准报价，现在免费领！品牌要升级，官网先发力！免费领取网站设计制作方案 + 精准报价，专业团队帮你落地</span>
            <form action="">
                <input type="text" class="ipt1" placeholder="联系人">
                <input type="text" class="ipt2" placeholder="联系电话">
                <textarea name="" id=""  placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"></textarea>
                <a href="">提交需求</a>
            </form>
        </div>
    </div>
    <div class="footA">
        <div class="footAs container">
            <ul>
                <h3>联系我们</h3>
                <b>18980820575</b>
                <li>手机：13518219792</li>
                <li>地址：湖北孝感市大悟城关镇鄂北物流城13栋125号</li>
                <li class="hr1"></li>
                <li>24小时服务热线：18982081108</li>
            </ul>
            <ul>
                <h3>网站建设服务</h3>
                <li>网页设计</li>
                <li>网站制作</li>
                <li>网站开发</li>
            </ul>
            <ul>
                <h3>网站推广服务</h3>
                <li>营销网站建设</li>
                <li>百度快速排名</li>
                <li>整站网站推广</li>
            </ul>
            <ul>
                <h3>网站运维服务</h3>
                <li>基础维护</li>
                <li>网站改版</li>
                <li>网站维护</li>
            </ul>
            <ul>
                <h3>FOLLOW US</h3>
                <li class="hr2"></li>
                <li>
                    <dd class="fl"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>
                    <dd class="fr"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd>
                </li>
            </ul>
        </div>
        <div class="link container">
            友情链接：
            <a href="http://www.cdbranddesign.com/" title="成都品牌宣传" target="_blank">成都品牌宣传</a>   <a href="http://www.cdxwcx.cn/tuoguan/ershu.html" title="二枢服务器托管" target="_blank">二枢服务器托管</a>   <a href="http://www.brtkl.com/" title="大悟县户外帐篷" target="_blank">大悟县户外帐篷</a>   <a href="http://www.qlacybr.com/" title="成都锦江区代办公司" target="_blank">成都锦江区代办公司</a>   <a href="http://www.aehno.com/" title="昆明体育护具" target="_blank">昆明体育护具</a>   <a href="http://www.tyanhua.com" title="发光字制作加工" target="_blank">发光字制作加工</a>   <a href="http://www.mintianidc.com/" title="珉田IDC机房" target="_blank">珉田IDC机房</a>   <a href="http://www.aehdb.com/" title="海口家电公司" target="_blank">海口家电公司</a>   <a href="http://www.qkjzk.com/" title="资阳发电机维修" target="_blank">资阳发电机维修</a>   <a href="http://www.fsxib.com/" title="重型叉车维修" target="_blank">重型叉车维修</a>           </div>
    </div>
    <div class="footB">
        <div class="container">
            <div class="fl">
                Copyright © 2025  湖北孝感网站建设公司     湖北孝感网站建设公司-选我们！湖北专业的孝感网站制作公司！
            </div>
            <div class="fr">
                All Rights Reserved 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">鄂ICP备2025125038号-8</a>
            </div>
        </div>
    </div>
</footer>
</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>