书写高效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://scyanting.com/article/jojsdg.html">http://scyanting.com/article/jojsdg.html</a>
            </div>
        </div>
        <div class="contentr fr">
            <h3>其他资讯</h3>
            <ul>
                <li>
                        <a href="/article/ddpsded.html">怎么加子域名解析 子域名怎么弄</a>
                    </li><li>
                        <a href="/article/ddpsdgh.html">erpsap财务系统的简单介绍</a>
                    </li><li>
                        <a href="/article/ddpsdih.html">c语言数组大小的函数 数组c语言比大小</a>
                    </li><li>
                        <a href="/article/ddpsdjj.html">阿里云java服务器 java 阿里云</a>
                    </li><li>
                        <a href="/article/ddpsopd.html">java十全十美数的代码 java十全十美数的代码怎么写</a>
                    </li>            </ul>
        </div>
    </div>
</div>
<!--底部-->
<footer>
    <div class="foot">
        <div class="container">
            <h1>盐亭大橙子建站您身边的网站制作服务商</h1>
            <div class="foot1">
                <ul>
                    <li>
                        <dl><i class="iconfont"></i><b>地址ADDRESS</b></dl>
                        <p>四川-成都青羊区太升南路288号<br>
                            锦天国际A座10楼
                        </p>
                    </li>
                    <li>
                        <dl><i class="iconfont"></i><b>电话/TEL</b></dl>
                        <p><a href="tel:02886922220" target="_blank">028 86922220</a> (工作日)<br>
                            <a href="tel:18980820575" target="_blank">1898082 0575</a> ( 7x24 )
                        </p>
                    </li>
                    <li>
                        <dl><i class="iconfont"></i><b>QQ咨询</b></dl>
                        <p> 244261566 (售前)<br>
                            631063699 (售后)
                        </p>
                    </li>
                    <li>
                        <dl><i class="iconfont"></i><b>邮箱/E: mail</b></dl>
                        <p> service@cdcxhl.com (业务)<br>
                            hr@cdcxhl.com (求职)
                        </p>
                    </li>
                </ul>
            </div>
            <div class="link">
                友情链接：
                <a href="http://www.cdkjz.cn/wangzhan/" title="seo优化排名" target="_blank">seo优化排名</a>   <a href="https://www.cdcxhl.com/sosuo.html" title="关键词排名" target="_blank">关键词排名</a>   <a href="http://m.cdcxhl.cn/wechat/
" title="微信公众号开发" target="_blank">微信公众号开发</a>   <a href="https://www.xwcx.net/jigui.html" title="成都服务器机柜租用" target="_blank">成都服务器机柜租用</a>   <a href="https://www.cdcxhl.com/yingxiao.html" title="营销型网站" target="_blank">营销型网站</a>   <a href="http://www.shjinzhi.cn/" title="兴宏源活动板房" target="_blank">兴宏源活动板房</a>   <a href="https://www.djxuejia.com/" title="古巴雪茄" target="_blank">古巴雪茄</a>   <a href="http://www.sczitong.com/" title="彩乐斯" target="_blank">彩乐斯</a>   <a href="http://www.tjysf.cn/" title="明安消防器材" target="_blank">明安消防器材</a>   <a href="http://www.skart.cn/" title="四川艺考培训" target="_blank">四川艺考培训</a>               </div>
        </div>
    </div>
    <div class="copy container">
        Copyright © 2017-2023 All Rights Reserved. 青羊区大橙子信息咨询工作室 版权所有  <a href="http://www.beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2022028542号-18</a>
        [原创设计,独立版权。未经许可.不得拷贝或镜像]<br>
        <a href="http://www.kswsj.cn/" target="_blank">网站营销推广</a> | <a href="https://www.cdcxhl.com/pinpai.html" target="_blank">品牌网站设计</a> | <a href="http://www.cdweb.net/" target="_blank">自适应网站制作</a> | <a href="http://cdkjz.cn/wangzhan/pinpai/" target="_blank">品牌网站制作</a> | <a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a> | <a href="https://www.cdcxhl.com/cloud/" target="_blank">云服务器</a> | <a href="https://www.cdcxhl.com/weihu/abazhou.html" target="_blank">盐亭网站维护</a> | (盐亭网站制作QQ : 631063699 )</div>
</footer>
<!--在线咨询-->
<div class="fot">
    <ul>
        <li>
            <a href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" target="_blank">
                <img src="/Public/Home/img/fot1.png" alt="建站咨询">
                <p>在线咨询</p>
            </a>
        </li>
        <li>
            <a href="tel:18980820575" target="_blank">
                <img src="/Public/Home/img/fot2.png" alt="建站电话">
                <p>拨打电话</p>
            </a>
        </li>
    </ul>
</div>
</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>