快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

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

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

书写CSS时需要的七个方面指的是什么

今天就跟大家聊聊有关书写CSS时需要的七个方面指的是什么，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网站空间、营销软件、网站建设、龙亭网站维护、网站推广。

书写CSS时注意的七个方面

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

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

◆不推荐使用行间样式

XML/HTML代码

                    Page title - book.chinaz.comtitle>     head>       <body>     <p style="color: red"> ... p>       body>       html></pre><p>◆不推荐使用内嵌样式</p><p>XML/HTML代码</p><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">       <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>Page title - book.chinaz.comtitle>       <style type="text/css" media="screen">     p { color: red; }       style>       head>       <body>... body>       html></pre><p>◆推荐使用外联样式</p><p>XML/HTML代码</p><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">     <html lang="en">     <head>       <meta http-equiv="content-type" content="text       <title>Page title - book.chinaz.comtitle>       <link rel="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提出的所以老的浏览器不支持。</p><p>@import和link在使用上会有一些区别， 利用二者之间的差异，可以在实际运用中进行权衡。</p><p>关于@import和link方式的比较在52CSS.com上有几篇文章可以拓展阅读。</p><p>◆不推荐@import导入方式</p><p>XML/HTML代码</p><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">       <html lang="en">     <head>       <meta http-equiv="content-type" content="text       <title>Page title - 52css.comtitle>       <style type="text/css" media="screen">       @import url("styles.css");      style>     head>     <body> ... body>     html></pre><p>◆推荐引入外部样式表方式</p><p>XML/HTML代码</p><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>     <meta http-equiv="content-type" content="text       <title>Page title - blog.huangchao.orgtitle>     <link rel="stylesheet" href="name.css" type="text/css" media="screen" />     head>       <body> ... body>       html></pre><p><strong>三、使用继承</strong></p><p>低效率的</p><p>CSS代码</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; }</pre><p>高效的</p><p>CSS代码</p><pre>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>低效率的</p><p>CSS代码</p><pre>h2 { color: #236799; }       h3 { color: #236799; }      h4 { color: #236799; }      h5 { color: #236799; }</pre><p>高效的</p><p>CSS代码</p><pre>h2, h3, h4, h5 { color: #236799; }</pre><p><strong>五、使用多重声明</strong></p><p>低效率的</p><p>CSS代码</p><pre>p { margin: 0 0 1em; }      p { background: #ddd; }      p { color: #666; }</pre><p>译者注： 对于十六进制颜色值，个人偏向于色值不缩写且英文字母要大写的方式.</p><p>高效的</p><p>CSS代码</p><pre>p { margin: 0 0 1em; background: #ddd; color: #666; }</pre><p><strong>六、使用简记属性</strong></p><p>低效率的</p><p>CSS代码</p><pre>body { font-size: 85%; font-family: arial, helvetica, sans-serif; background-image: url(image.gif);   background-repeat: no-repeat; background-position: 0 100%; 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;</pre><p>高效的</p><p>CSS代码</p><pre>body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%;   margin: 1em 1em 0; padding: 10px; border: 1px   solid red; color: #222; }</pre><p><strong> 七、避免使用 !important</strong></p><p>慎用写法</p><p>CSS代码</p><pre>#news { background: #ddd !important; }</pre><p>特定情况下可以使用以下方式提高权重级别</p><p>CSS代码</p><pre>#container #news { background: #ddd; }      body #container #news { background: #ddd; }</pre><p>看完上述内容，你们对书写CSS时需要的七个方面指的是什么有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。</p>            
            
                        <br>
            当前名称：书写CSS时需要的七个方面指的是什么            <br>
            文章URL：<a href="http://6mz.cn/article/iisdpo.html">http://6mz.cn/article/iisdpo.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/djhpjc.html">python和java哪个容易学-创新互联</a>
                </li><li>
                    <a href="/article/djhpsp.html">杨辉三角形-创新互联</a>
                </li><li>
                    <a href="/article/djhphe.html">SpringDI实现案例-创新互联</a>
                </li><li>
                    <a href="/article/djhpsi.html">如何使用React中的Ref-创新互联</a>
                </li><li>
                    <a href="/article/djhpog.html">laravel数据库事务回滚-创新互联</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>028-86922220</b>
                <li>手机：13518219792</li>
                <li>地址：成都市太升南路288号锦天国际A幢1002号</li>
                <li class="hr1"></li>
                <li>24小时服务热线：400-028-6601</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://chengdu.cdcxhl.com/seo/" title="成都网站优化" target="_blank">成都网站优化</a>   <a href="http://www.njzdgg.com/" title="内江广告" target="_blank">内江广告</a>   <a href="http://m.cdcxhl.cn/dingzhi/
" title="定制网站" target="_blank">定制网站</a>   <a href="http://www.jinhuajc.com/" title="橡塑板" target="_blank">橡塑板</a>   <a href="https://www.cdxwcx.com/" title="网站建设" target="_blank">网站建设</a>   <a href="http://www.cqcxhl.com/miniprogram/" title="重庆小程序开发公司" target="_blank">重庆小程序开发公司</a>   <a href="http://www.ruijiemsc.com/" title="瑞杰企业管理" target="_blank">瑞杰企业管理</a>   <a href="http://www.schdas.cn/" title="四川鸿达" target="_blank">四川鸿达</a>   <a href="http://www.lbtgc.cn/" title="力比特工程" target="_blank">力比特工程</a>   <a href="http://chengdu.cdcxhl.com/" title="成都营销网站制作" target="_blank">成都营销网站制作</a>           </div>
    </div>
    <div class="footB">
        <div class="container">
            <div class="fl">
                Copyright © 2022  成都快上网科技有限公司     成都网站建设公司-选网站建设公司快上网！国内专业的网站制作公司！
            </div>
            <div class="fr">
                All Rights Reserved 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备19037934号-11</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>