書寫高效CSS注意的七個方面
你對如何書寫高效CSS是否熟悉，這里和大家分享一下書寫高效CSS注意的七個方面，主要包括使用外聯(lián)樣式替代行間樣式或者內嵌樣式，建議使用link引入外部樣式表等內容，相信本文介紹一定會讓你有所收獲。
CSS經(jīng)驗分享：書寫高效CSS注意的七個方面
隨著CSS網(wǎng)頁布局的應用越來越廣泛，更多的CSSer開始書寫CSS，如何才能寫出高效規(guī)范的CSS代碼呢，本文向大家介紹一下必須要注意的七個方面：
一、使用外聯(lián)樣式替代行間樣式或者內嵌樣式
不推薦使用行間樣式
ExampleSourceCode
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>Pagetitle-52css.comtitle>
- head>
- <body>
- <pstylepstyle="color:red">...p>
- body>
- html>
不推薦使用內嵌樣式
ExampleSourceCode
- "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>
推薦使用外聯(lián)樣式
ExampleSourceCode
- "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>
#p# 二、建議使用link引入外部樣式表
為了兼容老版本的瀏覽器，建議使用link引入外部樣式表的方來代替@import導入樣式的方式.
譯者注：@import是CSS2.1提出的所以老的瀏覽器不支持，點擊查看@import的兼容性。
@import和link在使用上會有一些區(qū)別，利用二者之間的差異，可以在實際運用中進行權衡。
關于@import和link方式的比較在52CSS.com上有幾篇文章可以拓展閱讀。
不推薦@import導入方式
ExampleSourceCode
- "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>
推薦引入外部樣式表方式
ExampleSourceCode
- "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>
三、使用繼承
ExampleSourceCode
- 低效率的
- 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;}
- h1{font-family:georgia,times,serif;}
- 高效的
- body{font-family:arial,helvetica,sans-serif;}
- body{font-family:arial,helvetica,sans-serif;}
- h1{font-family:georgia,times,serif;}
#p#
四、使用多重選擇器
ExampleSourceCode
- 低效率的
- h1{color:#236799;}
- h2{color:#236799;}
- h3{color:#236799;}
- h4{color:#236799;}
- 高效的
- h1,h2,h3,h4{color:#236799;}
五、使用多重聲明
ExampleSourceCode
- 低效率的
- p{margin:001em;}
- p{background:#ddd;}
- p{color:#666;}
- 譯者注：對于十六進制顏色值，個人偏向于色值不縮寫且英文字母要大寫的方式.
- 高效的
- p{margin:001em;background:#ddd;color:#666;}
六、使用簡記屬性
ExampleSourceCode
- 低效率的
- 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;}
七、避免使用!important
ExampleSourceCode
- 慎用寫法
- #news{background:#ddd!important;}
- 特定情況下可以使用以下方式提高權重級別
- #container#news{background:#ddd;}
- body#container#news{background:#ddd;}
那么，如何讓（后續(xù)）維護你站點的人更容易理解你的樣式代碼呢？我們在51cto.com以后的文章中和大家共同討論學習。
【編輯推薦】
