书写高效CSS注意的七个方面分别是什么

这期内容当中小编将会给大家带来有关书写高效CSS注意的七个方面分别是什么，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

创新互联公司致力于互联网品牌建设与网络营销，包括成都网站制作、成都网站设计、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联公司为不同类型的客户提供良好的互联网应用定制及解决方案，创新互联公司核心团队十多年专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。

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

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

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

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

不推荐使用行间样式

ExampleSourceCode

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    Pagetitle-52css.comtitle> head> <body> <pstylepstyle="color:red">...p> body> html></pre><p>不推荐使用内嵌样式</p><p>ExampleSourceCode</p><pre>"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></pre><p>推荐使用外联样式</p><p>ExampleSourceCode</p><pre>"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></pre><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> "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></pre><p>推荐引入外部样式表方式</p><p>ExampleSourceCode</p><pre>"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></pre><p><strong>三、使用继承</strong></p><p>ExampleSourceCode</p><pre>低效率的   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;}  h2{font-family:georgia,times,serif;}   高效的   body{font-family:arial,helvetica,sans-serif;}  body{font-family:arial,helvetica,sans-serif;}  h2{font-family:georgia,times,serif;}</pre><p><strong>四、使用多重选择器</strong></p><p>ExampleSourceCode</p><pre>低效率的   h2{color:#236799;}  h3{color:#236799;}  h4{color:#236799;}  h5{color:#236799;}   高效的   h2,h3,h4,h5{color:#236799;}</pre><p><strong>五、使用多重声明</strong></p><p>ExampleSourceCode</p><pre>低效率的   p{margin:001em;}  p{background:#ddd;}  p{color:#666;}   译者注：对于十六进制颜色值，个人偏向于色值不缩写且英文字母要大写的方式.   高效的   p{margin:001em;background:#ddd;color:#666;}</pre><p><strong>六、使用简记属性</strong></p><p>ExampleSourceCode</p><pre>低效率的   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;}</pre><p><strong>七、避免使用!important</strong></p><p>ExampleSourceCode</p><pre>慎用写法   #news{background:#ddd!important;}  特定情况下可以使用以下方式提高权重级别  #container#news{background:#ddd;}  body#container#news{background:#ddd;}</pre><p>上述就是小编为大家分享的书写高效CSS注意的七个方面分别是什么了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。</p>            
            
                        <br>
            本文题目：书写高效CSS注意的七个方面分别是什么            <br>
            文章来源：<a href="http://cqcxhl.cn/article/jojsdg.html">http://cqcxhl.cn/article/jojsdg.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/depsegi.html">带路由器的猫 带路由器的猫怎么设置无线路由器</a>
                </li><li>
                    <a href="/article/depseig.html">java代码的回复功能 java代码的回复功能怎么用</a>
                </li><li>
                    <a href="/article/depsejs.html">linuxps命令状态 linux中ps命令的作用</a>
                </li><li>
                    <a href="/article/depssdo.html">java抛物线实验代码 java实现平抛</a>
                </li><li>
                    <a href="/article/depseej.html">linux命令行输入 linux常用命令输入</a>
                </li>        </ul>
    </div>
</div>
<div class="footer">
    <div class="footer_content">
        <div class="footer_content_top clear">
            <div class="content_top_share fl">
                <div><img src="/Public/Home/img/logo.png"></div>
                <div class="top_share_content">
                    <dd>分享至：</dd>
                    <dt class="bdsharebuttonbox clear" id="share">
                        <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a>
                        <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a>
                        <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a>
                        <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a>
                    </dt>
                    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                </div>
            </div>
            <div class="content_top_left fl clear">
                <div class="top_left_list fl">
                    <dd><a href="/about/">关于我们</a></dd>
                    <dt>
                        <a href="/about/#gsjj">公司简介</a>
                        <a href="/about/#fzlc">发展历程</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/service/">服务项目</a></dd>
                    <dt>
                        <a href="/service/">高端网站建设</a>
                        <a href="/miniprogram/">小程序开发</a>
                        <a href="/service/app.html">APP开发</a>
                        <a href="/service/yingxiao.html">网络营销</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/jianzhan/">建站知识</a></dd>
                    <dt>
                        <a href="/jianzhan/2.html">网站建设</a>
                        <a href="/jianzhan/3.html">网站设计</a>
                        <a href="/jianzhan/4.html">网站制作</a>
                        <a href="/jianzhan/5.html">小程序</a>
                    </dt>
                </div>
                <div class="top_left_list fl">
                    <dd><a href="/contact/">联系我们</a></dd>
                    <dt>
                        <a href="/contact/#lxwm">公司地址</a>
                        <a href="/contact/#rczp">人才招聘</a>
                    </dt>
                </div>
            </div>
            <div class="content_top_right addressR fr">
                <div class="top_right_title addressf_title">
                    <a href="javascript:;" class="on">成都</a>
                    <a href="javascript:;">重庆</a>
                </div>
                <div class="top_right_content addressf">
                    <div class="right_content_li on">
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">电话：028-86922220</dt>
                        </div>
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt>
                        </div>
                    </div>
                    <div class="right_content_li">
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">电话：028-86922220</dt>
                        </div>
                        <div class="right_content_list clear">
                            <dd class="fl iconfont"></dd>
                            <dt class="fl">地址：重庆市南岸区弹子石腾龙大道58号2栋21-6</dt>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer_content_copyright clear">版权所有：成都创新互联科技有限公司重庆分公司
        <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">渝ICP备2021005571号-4</a>
    </div>
</div>

<!--浮窗-->
<div class="FloatingWindow clear">
    <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt><span>在线</span>咨询</dt>
        </div>
    </a>
    <a href="javascript:;" class="FloatingWindow_list fr">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt>服务热线</dt>
        </div>
        <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div>
    </a>
    <a href="javascript:;" class="FloatingWindow_list fr STop">
        <div class="FloatingWindow_list_title">
            <dd class="iconfont"></dd>
            <dt>TOP</dt>
        </div>
    </a>
</div>
<script src="/Public/Home/js/jquery-1.8.3.min.js"></script>
<script src="/Public/Home/js/comm.js"></script>
<script src="/Public/Home/js/wow.js"></script>
<script src="/Public/Home/js/common.js"></script>
</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);
        }
    });
</script>

重庆分公司，新征程启航

书写高效CSS注意的七个方面分别是什么