溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

書(shū)寫(xiě)高效CSS注意的七個(gè)方面分別是什么

發(fā)布時(shí)間：2021-11-18 09:19:35 來(lái)源：億速云 閱讀：157 作者：柒染 欄目：web開(kāi)發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)書(shū)寫(xiě)高效CSS注意的七個(gè)方面分別是什么，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

你對(duì)如何書(shū)寫(xiě)高效CSS是否熟悉，這里和大家分享一下書(shū)寫(xiě)高效CSS注意的七個(gè)方面，主要包括使用外聯(lián)樣式替代行間樣式或者內(nèi)嵌樣式，建議使用link引入外部樣式表等內(nèi)容。

CSS經(jīng)驗(yàn)分享：書(shū)寫(xiě)高效CSS注意的七個(gè)方面

隨著CSS網(wǎng)頁(yè)布局的應(yīng)用越來(lái)越廣泛，更多的CSSer開(kāi)始書(shū)寫(xiě)CSS，如何才能寫(xiě)出高效規(guī)范的CSS代碼呢，本文向大家介紹一下必須要注意的七個(gè)方面：

一、使用外聯(lián)樣式替代行間樣式或者內(nèi)嵌樣式

不推薦使用行間樣式

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>

不推薦使用內(nèi)嵌樣式

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>

二、建議使用link引入外部樣式表

為了兼容老版本的瀏覽器，建議使用link引入外部樣式表的方來(lái)代替@import導(dǎo)入樣式的方式.

譯者注：@import是CSS2.1提出的所以老的瀏覽器不支持，點(diǎn)擊查看@import的兼容性。

@import和link在使用上會(huì)有一些區(qū)別，利用二者之間的差異，可以在實(shí)際運(yùn)用中進(jìn)行權(quán)衡。

關(guān)于@import和link方式的比較在52CSS.com上有幾篇文章可以拓展閱讀。

不推薦@import導(dǎo)入方式

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;}  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;}

四、使用多重選擇器

ExampleSourceCode

低效率的   h2{color:#236799;}  h3{color:#236799;}  h4{color:#236799;}  h5{color:#236799;}   高效的   h2,h3,h4,h5{color:#236799;}

五、使用多重聲明

ExampleSourceCode

低效率的   p{margin:001em;}  p{background:#ddd;}  p{color:#666;}   譯者注：對(duì)于十六進(jìn)制顏色值，個(gè)人偏向于色值不縮寫(xiě)且英文字母要大寫(xiě)的方式.   高效的   p{margin:001em;background:#ddd;color:#666;}

六、使用簡(jiǎn)記屬性

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

慎用寫(xiě)法   #news{background:#ddd!important;}  特定情況下可以使用以下方式提高權(quán)重級(jí)別  #container#news{background:#ddd;}  body#container#news{background:#ddd;}

上述就是小編為大家分享的書(shū)寫(xiě)高效CSS注意的七個(gè)方面分別是什么了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手