今天就跟大家聊聊有关书写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://kswsj.cn/article/iisdpo.html">http://kswsj.cn/article/iisdpo.html</a>
</div>
</div>
<div class="other">
<h3>其他资讯</h3>
<ul>
<li>
<a href="/article/jjhcjp.html">Go语言字符串的高效拼接方法</a>
</li><li>
<a href="/article/jjhsoo.html">怎么使用AJAX实现分页</a>
</li><li>
<a href="/article/jjhsid.html">Android中利用Viewpage调用notifyDataSetChanged()时界面无刷新如何解决</a>
</li><li>
<a href="/article/jjhcpg.html">Android沉浸式实现兼容的示例分析</a>
</li><li>
<a href="/article/jjhssj.html">lnmp安装多版本PHP</a>
</li> </ul>
</div>
</div>
<div class="line"></div>
<!--底部-->
<footer id="5">
<div class="foot1 container">
<div class="list">
<div class="item">
<a href="javascript:;">
<span class="ico1"><i class="iconfont"></i><img src="/Public/Home/img/ewm.png" alt=""></span>
<strong>关注我们</strong>
</a>
</div>
<div class="item">
<a href="" target="_blank">
<span><i class="iconfont"></i></span>
<strong>索要报价</strong>
</a>
</div>
<div class="item">
<a href="" target="_blank">
<span><i class="iconfont"></i></span>
<strong>我要咨询</strong>
</a>
</div>
<div class="item">
<a href="" target="_blank">
<span><i class="iconfont"></i></span>
<strong>找到我们</strong>
</a>
</div>
<div class="item">
<a href="" target="_blank">
<span><i class="iconfont"></i></span>
<strong>投诉建议</strong>
</a>
</div>
</div>
<div class="tel">
<dl>
<tel><a href="tel:400-028-6601" target="_blank">400-028-6601</a></tel><br>
<span>也许您需要专业的服务，欢迎来电咨询</span>
</dl>
<dl>
<tel><a href="tel:18980820575" target="_blank">18980820575</a></tel><br>
<span>您的需求，是我们前进的动力</span>
</dl>
</div>
</div>
<div class="friend">
<div class="container">
<span class="tit">友情链接：</span>
<div class="inner">
<a href="https://www.cdcxhl.com/" target="_blank">成都网站制作公司</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文发稿投放平台</a><a href="https://www.cdcxhl.com/sosuo.html" target="_blank">关键词优化排名</a><a href="https://www.cdcxhl.com/yunying.html" target="_blank">网站托管运营</a><a href="https://www.cdcxhl.com/qiye.html" target="_blank">成都企业网站建设</a><a href="https://www.cdcxhl.com/xiaochengx.html" target="_blank">小程序开发公司</a><a href="https://www.cdcxhl.com/pinpai.html" target="_blank">品牌网站建设公司</a><a href="https://www.cdcxhl.com/ddos/" target="_blank">DDOS防护</a><a href="https://www.cdcxhl.com/zuyong/" target="_blank">服务器租用</a><a href="https://www.cdcxhl.com/link/" target="_blank">外链</a><a href="https://www.cdcxhl.com/jigui/" target="_blank">服务器机柜租用</a><a href="https://www.cdcxhl.com/" target="_blank">成都网站设计公司</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文营销</a><a href="https://www.cdcxhl.com/xiangyingshi.html" target="_blank">成都响应式网站建设</a><a href="https://www.cdcxhl.com/xiaochengx.html" target="_blank">成都小程序开发</a><a href="https://www.cdcxhl.com/cloud/" target="_blank">成都云服务器租用</a><a href="https://www.cdcxhl.com/link/" target="_blank">买链接</a><a href="https://www.cdcxhl.com/" target="_blank">成都网站建设公司</a> </div>
</div>
</div>
<div class="foot">
<div class="container">
<div class="footNav">
<h3>网站建设</h3>
<a href="http://chengdu.cdcxhl.cn/seo/" target="_blank">营销网站建设</a><a href="http://www.cdkjz.cn/fangan/response/" target="_blank">响应式网站建设方案</a><a href="http://www.sclezhi.cn/" target="_blank">乐至网站建设</a> </div>
<div class="footNav">
<h3>服务器托管</h3>
<a href="https://www.xwcx.net/tgxq/cdghjf.html" target="_blank">成都光华机房</a><a href="https://www.cdcxhl.com/idc/meishan.html" target="_blank">眉山服务器托管</a><a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" target="_blank">绵阳机房托管</a> </div>
<div class="footNav">
<h3>网站制作</h3>
<a href="http://www.cxjianzhan.com/" target="_blank">网站制作</a><a href="http://www.myzwz.com/" target="_blank">绵阳网站制作</a><a href="http://m.cdcxhl.com/" target="_blank">成都网站制作</a> </div>
<div class="footNav">
<h3>企业服务</h3>
<a href="https://www.cdcxhl.com/service/zzgj.html" target="_blank">备案资质管家服务</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">免费收录</a><a href="https://www.cdcxhl.com/mianfei/jianzhan/" target="_blank">成都免费建站</a> </div>
<div class="fr ecode">
<div class="fl">
<img src="/Public/Home/img/ewm.jpg">
<p>关注企业微信</p>
</div>
<div class="fr slogan">
<p class="icon">
<a class="ph" href=""><i class="iconfont"></i></a>
<a class="qq" href="tencent://message/?uin=1683211881&Site=&Menu=yes"><i class="iconfont"></i></a>
</p>
<p>
<i>想要找 </i> <a href="">小程序开发</a>、<a href="">APP开发</a>、
<a href="">营销型网站建设</a>、<a href="">网站建设</a>、
<i><a href="">网站定制开发</a></i> ，就选<a href="">创新互联</a>
</p>
</div>
</div>
</div>
<div class="bottom container">
<p class="fl">
版权所有：成都创新互联科技有限公司
备案号：<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备19037934号</a>
服务热线：028-86922220
</p>
<p class="fr">
<a href="https://www.cdxwcx.com/" target="_blank">成都网站建设</a>：
<a href="https://www.cdcxhl.com/" target="_blank">创新互联</a>
</p>
</div>
</div>
</footer>
<!--在线咨询-->
<div class="fot">
<ul>
<li>
<a href="https://p.qiao.baidu.com/cps/mobileChat?siteId=11284691&userId=6256368&type=1&reqParam=%20{%22from%22:0,%22sessionid%22:%22%22,%22siteId%22:%2211284691%22,%22tid%22:%22-1%22,%22userId%22:%226256368%22,%22ttype%22:1,%22siteConfig%22:%20{%22eid%22:%226256368%22,%22queuing%22:%22%22,%22siteToken%22:%226ce441ff9e2d6bedbdfc2a4138de449e%22,%22userId%22:%226256368%22,%22isGray%22:%22false%22,%22wsUrl%22:%22wss://p.qiao.baidu.com/cps3/websocket%22,%22likeVersion%22:%22generic%22,%22siteId%22:%2211284691%22,%22online%22:%22true%22,%22webRoot%22:%22//p.qiao.baidu.com/cps3/%22,%22bid%22:%22160142915792139572%22,%22isSmallFlow%22:0,%22isPreonline%22:0,%22invited%22:0%20},%22config%22:%20{%22themeColor%22:%224d74fa%22%20}%20}&appId=&referer=&iswechat=0&expectWaiter=-1&openid=null&otherParam=null&telephone=null&speedLogId=null&eid=null&siteToken=6ce441ff9e2d6bedbdfc2a4138de449e" 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>
