這篇“css中縱向書(shū)寫和橫向書(shū)寫的特點(diǎn)有哪些”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“css中縱向書(shū)寫和橫向書(shū)寫的特點(diǎn)有哪些”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過(guò)這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。

目前創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、河曲網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

css是什么意思

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

不同的css寫法有不同的優(yōu)勢(shì)，比如在開(kāi)發(fā)時(shí)，css豎著寫，按規(guī)范編碼，格式縮進(jìn)，一是代碼可讀性強(qiáng)，二是容易調(diào)試；在上線時(shí)，css讓橫著寫，可以用gulp或grunt等構(gòu)建工具編寫腳本，優(yōu)化css縮小css體積，使生成代碼變橫的。

css橫著寫還是豎著寫？

開(kāi)發(fā)：豎著寫，按規(guī)范編碼，格式縮進(jìn)，一是代碼可讀性強(qiáng)，二是容易調(diào)試

上線：用gulp或grunt等構(gòu)建工具編寫腳本，優(yōu)化css縮小css體積，生成代碼變橫的

拓展：

縱向書(shū)寫特點(diǎn)：

每個(gè)CSS屬性獨(dú)立一行，一般不會(huì)出現(xiàn)換行或橫向滾動(dòng)條。

可以通過(guò)firebug等工具查找到模塊，在DW中ctrl+g行定位，修改方便。

屬性段落間有縮進(jìn)，保證了代碼的整潔，層次清楚，符合編程語(yǔ)言代碼規(guī)范，修改更加直觀。

存在的問(wèn)題：代碼冗余（如空格符、tab符、換行符）；文件大小增加；容易出現(xiàn)縱向滾動(dòng)條。

橫向書(shū)寫特點(diǎn)：

較大化的利用了空間，單屏內(nèi)能顯示更多，減小了縱向滾動(dòng)條出現(xiàn)的幾率，能夠快速捕獲較多的信息。

減小了文件大小，省去了不必要的空格、換行等。

橫向書(shū)寫方便分塊以及注釋，便于查看CSS結(jié)構(gòu)，選擇符一目了然。當(dāng)今顯示器正朝著越來(lái)越大，越來(lái)越寬發(fā)展，基本上一行內(nèi)可以顯示完全。

加快編寫CSS速度，不用每次敲換行和tab，并且減少拉動(dòng)滾動(dòng)條的次數(shù)。

如果是活動(dòng)頁(yè)，不用作壓縮處理。使用CSS optimizers 來(lái)優(yōu)化CSS是提倡的，但是使用橫向書(shū)寫，基本上不存在多余的空格和換行，因此可以不用壓縮，這樣效率和能力都會(huì)得到提高。

便于閱讀和查找相關(guān)結(jié)構(gòu)。代碼編輯器對(duì)同行數(shù)定位做的都比較好，因此我們要解決的是如何快速縱向定位目標(biāo)。橫向書(shū)寫時(shí)選擇符縱向?qū)R，再加上

.class_name_2 .class_name_2_1 .class_name_2_1_1的選擇符層次分明，因此很容易定位到目標(biāo)。

在調(diào)試小Bug的時(shí)候就可以直接打開(kāi)CSS更改，不用再打開(kāi)firebug去找到模塊。

橫向書(shū)寫，是基于CSS選擇符的寫法，層次容易對(duì)比，更利于模塊化。對(duì)整體CSS規(guī)劃有好處，后期維護(hù)成本低。

便于不同版本的CSS代碼對(duì)比。

存在的問(wèn)題：書(shū)寫過(guò)密，從而影響閱讀。這種弊端顯而易見(jiàn)，但只要優(yōu)化做到家，這種狀況會(huì)很少。

盡管對(duì)于現(xiàn)如今的帶寬來(lái)說(shuō)，網(wǎng)頁(yè)文件那僅以K為單位的大小實(shí)在是微不足道，但如何將這以K來(lái)計(jì)算的網(wǎng)頁(yè)文件精簡(jiǎn)到最小還是網(wǎng)頁(yè)設(shè)計(jì)師們應(yīng)該考慮的問(wèn)題之一。而橫向書(shū)寫省去了不必要的空格、換行等，大大減小了文件大小。

我們不能說(shuō)哪種書(shū)寫是對(duì)的，至于具體采用哪種寫法依個(gè)人選擇，當(dāng)然改變習(xí)慣可能會(huì)影響一個(gè)人的工作效率，那我們提倡的是：提交的CSS樣式文件是經(jīng)過(guò)代碼格式化的，而這個(gè)工作可以完全交給DW等工具，我們只要點(diǎn)擊一下，整個(gè)文件就會(huì)像我們想象的那樣呈現(xiàn)出來(lái)。這樣的代碼看起來(lái)很舒服，修改容易，團(tuán)隊(duì)成員在后續(xù)交接也會(huì)變得更加順利。

感謝你的閱讀，希望你對(duì)“css中縱向書(shū)寫和橫向書(shū)寫的特點(diǎn)有哪些”這一關(guān)鍵問(wèn)題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：css中縱向書(shū)寫和橫向書(shū)寫的特點(diǎn)有哪些-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://jinyejixie.com/article20/ddchjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、虛擬主機(jī)、面包屑導(dǎo)航、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)