今天就跟大家聊聊有關(guān)書寫CSS時(shí)需要的七個(gè)方面指的是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、龍亭網(wǎng)站維護(hù)、網(wǎng)站推廣。
書寫CSS時(shí)注意的七個(gè)方面
隨著CSS網(wǎng)頁布局的應(yīng)用越來越廣泛，更多的CSSer開始書寫CSS，如何才能寫出高效規(guī)范的CSS代碼呢，今天向大家介紹，必須要注意的七個(gè)方面：
一、使用外聯(lián)樣式替代行間樣式或者內(nèi)嵌樣式
◆不推薦使用行間樣式
XML/HTML代碼
Page title - book.chinaz.comtitle> head> <body> <p style="color: red"> ... p> body> html></pre><p>◆不推薦使用內(nèi)嵌樣式</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>◆推薦使用外聯(lián)樣式</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導(dǎo)入樣式的方式.</p><p>譯者注： @import是CSS2.1提出的所以老的瀏覽器不支持。</p><p>@import和link在使用上會(huì)有一些區(qū)別， 利用二者之間的差異，可以在實(shí)際運(yùn)用中進(jìn)行權(quán)衡。</p><p>關(guān)于@import和link方式的比較在52CSS.com上有幾篇文章可以拓展閱讀。</p><p>◆不推薦@import導(dǎo)入方式</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>譯者注： 對(duì)于十六進(jìn)制顏色值，個(gè)人偏向于色值不縮寫且英文字母要大寫的方式.</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>特定情況下可以使用以下方式提高權(quán)重級(jí)別</p><p>CSS代碼</p><pre>#container #news { background: #ddd; } body #container #news { background: #ddd; }</pre><p>看完上述內(nèi)容，你們對(duì)書寫CSS時(shí)需要的七個(gè)方面指的是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。</p>
<br>
本文標(biāo)題：書寫CSS時(shí)需要的七個(gè)方面指的是什么 <br>
分享網(wǎng)址：<a href="http://weahome.cn/article/iisdpo.html">http://weahome.cn/article/iisdpo.html</a>
</div>
</div>
</div>
<div id="squ6kqw" class="other container">
<h3>其他資訊</h3>
<ul>
<li>
<a href="/article/dddgcpi.html">wordpress多地區(qū) wordpressdivi</a>
</li><li>
<a href="/article/dddgcee.html">zblog文章日期隱藏 zblog模板修改</a>
</li><li>
<a href="/article/dddgcjc.html">怎么下載圖形化mysql mysql圖形化界面下載</a>
</li><li>
<a href="/article/dddgcgp.html">智能聊天培訓(xùn)課程 tpc培訓(xùn)學(xué)校</a>
</li><li>
<a href="/article/dddgcho.html">阿里云服務(wù)器esc的英文全稱 阿里云服務(wù)器esc的英文全稱</a>
</li> </ul>
</div>
<div id="squ6kqw" class="footer">
<div id="squ6kqw" class="foota container">
<div id="squ6kqw" class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12">
<ul>
<li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<h3>網(wǎng)站制作</h3>
<a target="_blank">成都網(wǎng)站制作</a><a target="_blank">手機(jī)網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作</a><a target="_blank">達(dá)州網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作</a><a target="_blank">成都商城網(wǎng)站制作</a> </li>
<li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<h3>企業(yè)服務(wù)</h3>
<a target="_blank">免費(fèi)網(wǎng)站建設(shè)</a><a target="_blank">代理記賬</a><a target="_blank">網(wǎng)站備案</a><a target="_blank">免費(fèi)做網(wǎng)站</a><a target="_blank">軟文發(fā)布平臺(tái)</a><a target="_blank">免費(fèi)收錄</a> </li>
<li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<h3>網(wǎng)站建設(shè)</h3>
<a target="_blank">成都網(wǎng)站建設(shè)</a><a target="_blank">古藺網(wǎng)站建設(shè)</a><a href="http://weahome.cn/mobile/" target="_blank">重慶手機(jī)網(wǎng)站建設(shè)</a><a target="_blank">外貿(mào)網(wǎng)站建設(shè)</a><a target="_blank">成都網(wǎng)站建設(shè)</a><a target="_blank">成都網(wǎng)站建設(shè)哪家好</a> </li>
<li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<h3>服務(wù)器托管</h3>
<a target="_blank">成都服務(wù)器托管</a><a target="_blank">光華服務(wù)器托管</a><a target="_blank">服務(wù)器托管機(jī)柜</a><a target="_blank">光華服務(wù)器托管</a><a target="_blank">重慶聯(lián)通機(jī)房托管</a><a target="_blank">成都西云機(jī)房</a> </li>
</ul>
</div>
<div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12">
<p>全國免費(fèi)咨詢:</p>
<b>400-028-6601</b>
<p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p>
<p>節(jié)假值班：18980820575 / 13518219792</p>
<p>聯(lián)系地址：成都市太升南路288號(hào)錦天國際A幢1002號(hào)</p>
</div>
</div>
<div id="squ6kqw" class="footb">
<div id="squ6kqw" class="copy container">
<div id="squ6kqw" class="fl">Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 <a target="_blank">渝ICP備2021005571號(hào)</a></div>
<!--<div id="squ6kqw" class="fr"><a target="_blank">成都網(wǎng)站建設(shè)</a>：<a target="_blank">創(chuàng)新互聯(lián)</a></div>-->
</div>
</div>
<div id="squ6kqw" class="link">
<div id="squ6kqw" class="container">
友情鏈接:：
<a target="_blank">成都網(wǎng)站建設(shè)</a>
<a target="_blank">重慶網(wǎng)站建設(shè)</a>
<a href="">四川網(wǎng)站建設(shè)</a>
<a href="">重慶建設(shè)網(wǎng)站</a>
<a target="_blank">移動(dòng)服務(wù)器托管</a>
<a target="_blank">成都服務(wù)器托管</a>
<a target="_blank">云服務(wù)器</a>
<a target="_blank">廣告設(shè)計(jì)制作</a>
<a target="_blank">重慶網(wǎng)頁設(shè)計(jì)</a>
<a target="_blank">重慶做網(wǎng)站</a>
<a target="_blank">重慶網(wǎng)站制作</a>
<a href="">重慶網(wǎng)站建設(shè)</a>
<a href="">重慶網(wǎng)站公司</a>
<a href="">渝中網(wǎng)站制作</a>
<a href="">重慶網(wǎng)站設(shè)計(jì)</a>
</div>
</div>
</div>
<div id="squ6kqw" class="foot">
<ul class="public-celan">
<li>
<a target="_blank" class="a1 db tc">
<img src="/Public/Home/img/icon-23.png" alt="" class="db auto">
<span id="squ6kqw" class="span-txt">在線咨詢</span>
</a>
</li>
<li>
<a href="tel:18980820575" class="a1 db tc">
<img src="/Public/Home/img/icon-24.png" alt="" class="db auto">
<span id="squ6kqw" class="span-txt">電話咨詢</span>
</a>
</li>
<li>
<a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc">
<img src="/Public/Home/img/icon-25.png" alt="" class="db auto">
<span id="squ6kqw" class="span-txt">QQ咨詢</span>
</a>
</li>
<li>
<a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up">
<img src="/Public/Home/img/icon-26.png" alt="" class="db auto">
<span id="squ6kqw" class="span-txt">預(yù)約顧問</span>
</a>
</li>
</ul>
</div>
<div id="squ6kqw" class="customer">
<dl class="icon1">
<dt>
<a href="tencent://message/?uin=1683211881&Site=&Menu=yes">
<i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i>
<p>在線咨詢</p>
</a>
</dt>
</dl>
<dl class="icon2">
<dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨詢</p></dt>
<dd><img src="/Public/Home/img/ewm.png"></dd>
</dl>
<dl class="icon3">
<dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>電話咨詢</p></dt>
<dd>
<p>028-86922220（工作日）</p>
<p>18980820575（7×24）</p>
</dd>
</dl>
<dl class="icon4">
<dt class="sShow">
<a href="tencent://message/?uin=244261566&Site=&Menu=yes">
<i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p>
</a>
</dt>
</dl>
<dl class="icon5">
<dt class="gotop">
<a href="#top">
<i><img src="/Public/Home/img/top.png" alt=""></i><p>返回頂部</p>
</a>
</dt>
</dl>
</div>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://weahome.cn/" title="真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆">真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="mmuq2" class="pl_css_ganrao" style="display: none;"><xmp id="mmuq2"></xmp><delect id="mmuq2"><ul id="mmuq2"><source id="mmuq2"></source></ul></delect><dd id="mmuq2"></dd><pre id="mmuq2"><tfoot id="mmuq2"><em id="mmuq2"></em></tfoot></pre><tr id="mmuq2"></tr><xmp id="mmuq2"><rt id="mmuq2"><kbd id="mmuq2"></kbd></rt></xmp><xmp id="mmuq2"><rt id="mmuq2"><kbd id="mmuq2"></kbd></rt></xmp><abbr id="mmuq2"><center id="mmuq2"><input id="mmuq2"></input></center></abbr><delect id="mmuq2"><strike id="mmuq2"><rt id="mmuq2"></rt></strike></delect><cite id="mmuq2"><kbd id="mmuq2"><dl id="mmuq2"></dl></kbd></cite><xmp id="mmuq2"><rt id="mmuq2"><kbd id="mmuq2"></kbd></rt></xmp><nav id="mmuq2"></nav><table id="mmuq2"></table><tr id="mmuq2"><code id="mmuq2"><center id="mmuq2"></center></code></tr><cite id="mmuq2"></cite><tbody id="mmuq2"></tbody><center id="mmuq2"></center><fieldset id="mmuq2"></fieldset><small id="mmuq2"></small><abbr id="mmuq2"></abbr><tbody id="mmuq2"><pre id="mmuq2"><samp id="mmuq2"></samp></pre></tbody><option id="mmuq2"></option><s id="mmuq2"></s><bdo id="mmuq2"></bdo><object id="mmuq2"></object><samp id="mmuq2"><source id="mmuq2"><tr id="mmuq2"></tr></source></samp><menu id="mmuq2"><noscript id="mmuq2"><option id="mmuq2"></option></noscript></menu><center id="mmuq2"></center><input id="mmuq2"><button id="mmuq2"><rt id="mmuq2"></rt></button></input><button id="mmuq2"></button><center id="mmuq2"><th id="mmuq2"><button id="mmuq2"></button></th></center><abbr id="mmuq2"><pre id="mmuq2"><blockquote id="mmuq2"></blockquote></pre></abbr><td id="mmuq2"></td><td id="mmuq2"><fieldset id="mmuq2"><optgroup id="mmuq2"></optgroup></fieldset></td><tr id="mmuq2"></tr><tr id="mmuq2"></tr><acronym id="mmuq2"></acronym><pre id="mmuq2"></pre><blockquote id="mmuq2"><tfoot id="mmuq2"><source id="mmuq2"></source></tfoot></blockquote><strike id="mmuq2"><s id="mmuq2"><bdo id="mmuq2"></bdo></s></strike><code id="mmuq2"></code><th id="mmuq2"><menu id="mmuq2"><noscript id="mmuq2"></noscript></menu></th><table id="mmuq2"></table><noframes id="mmuq2"><ul id="mmuq2"><pre id="mmuq2"></pre></ul></noframes><table id="mmuq2"></table><blockquote id="mmuq2"></blockquote><noframes id="mmuq2"><ul id="mmuq2"><center id="mmuq2"></center></ul></noframes><tbody id="mmuq2"></tbody><code id="mmuq2"></code><sup id="mmuq2"><center id="mmuq2"><dl id="mmuq2"></dl></center></sup></div>
</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; //絕對(duì)路徑
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script>
重慶分公司
重慶分公司