引子：
今天在藍點看了yangwww.cppcns.com的部落格《css樣式表中繼承關係的空格與不空格》，思考了一下，本來想寫《css樣式的復合定義與復合呼叫及簡單的模組化設計》，但是內容太大，還是來點簡單的實惠。所以改叫《css樣式——從空格談起》吧。
一、空格運算子
（1）css語言
簡單地說，css語言類似js語言，是通過客戶端**後，通過本地瀏覽器解析。而css語言又是非常低階的「弱型別」語言，離js這種基於物件的比較完善的「弱型別」語言，還差相當一段距離。要知道css樣式是定義出來程式設計客棧的，而樣式的呈現是根據文件流順序和css優先級別，瀏覽器自己識別計算後顯示出來的。而瀏覽器又有忽略和糾錯功能（尤以ie為甚），所以樣式定義的語法有錯誤，並不影響瀏覽器正常工作，只不過顯示不出應有的效果罷了。在我們設計定義樣式的時候，排錯是比較令人苦惱的，其本質原因是於這種弱型別css語言本身的不嚴禁性有關係的，所以我們就更應該注重css定義的嚴禁，才能出較少的錯誤，較快更好的完成工作。
（2）css的運算子
首先說，css語言的運算子就不多，有.#{}:";還有乙個非常重要的空格。這幾個運算子，都是常用的定義宣告符號。而在css樣式定義中，空格就有點特殊，我們可以把它視為在.net或j**a中命名空間或類包定義中的 . 運算子。換句話說，我們可以把空格視為路徑指向的箭頭，表明html標籤的父子級別關係。css是與html想關聯的，也就是說，css的每乙個定義都與「某個html標籤」或「某段模組化html**」相對應，而html可以呼叫多個樣式類。乙個css樣式類可以根據html**來「復合定義」；乙個html標籤也可以「復合呼叫」多個樣式類。所以說，css樣式定義的複雜性與關聯的html是密不可分。
（3）例項說明
第乙個類b的類路徑是th .b
第二個類b的類路徑是th.b
第三個類b的類路徑是 .b
第三個類b的類路徑是 .b
講解：1、第乙個類b的類路徑是td .b，定義該html文件內所有的td標籤內的帶class="b"的標籤的樣式 。
也就是說，
td .b
定義的是
text
這組**塊中的b類，class="b"是包含在td標籤內的，是td的子級，所以在這裡要用「空格」指向明確表明父子級別關係。
2、第二個類www.cppcns.comb的類路徑是th.b，定義的是該html文件內所有的帶class="b"的th標籤的樣式。
也就是說，
th.b
定義的是text，在這裡的**中，th和class='b'是平級的，先th後.b組成乙個同級類路徑th.b，所以沒有空格代表「html類」和「自定義類」具有同級路徑！
3、第三個類b的類路徑是 .b，定義該html文件內所有的td標籤的樣式，它是該文件的乙個全域性樣式，是body .b的簡寫。
也就是說，
.b 定義了
第三個類b的類路徑是td.b
和第三個類b的類路徑是 .b
這兩處的b類沒有明確的路徑指向，優先級別要比有明確路徑的低。
4、大家可以看到，在html**中，同樣都是class="b"，但是在css定義時，採用的類路徑不同，作用就不同了。類路徑越完整，優先順序越高。在具體應用的時候，我們可以，使用完整類路徑來定義某html**塊某一些特殊地方，做異化處理。例如本例表頭th的黑體字顯示效果。
二、html中復合呼叫樣式類
（1）在乙個html標籤內，可以復合呼叫多個樣式類，也是用空格做運算子，復合類名總字元不能超過256。
（2）示例：
（3）應用：
對於某些多數樣式屬性累同，僅有幾個不同樣式屬性的定義，可以用這個方法來縮寫。
也可以在某個不改變某個通用樣式類的同時，用html呼叫復合類，突出區域性特例。
三、css html的模組化設計
（1）舉個簡單例子：
.classnamea .classnameb .classnamec
就是乙個類包路徑,a包含b,b包含c.
意思就是,在a塊內的全部html**(包括b塊、c塊),先應用樣式classnamea；
然後，在b塊內的全部html**(包括c塊),先應用樣式classnamea，之後再先應用樣式classnameb；
最後，在c塊內的全部html**,先應用樣式classnamea，再先應用樣式classnameb,最後應用樣式classnameb；
（2）在樣式表中，關於類包的路徑，對於某些複雜的hmtl**，最後寫絕對路徑，就是每乙個類名都不要拉下。這樣可讀性更強，錯誤率更小；當然，寬容度就越低。
例如
linktext
titletext
b11111111
樣式，按*.html從內層到外層；按*.css上下文，從下文到上文；按內聯樣式表上下文，從下文到上文；外聯的優先順序；
疊加覆蓋計算最終顯示效果。
css語句，嚴格說是js**的一類，換句話說，css語句也是「弱型別」的，空格是乙個「運算子」，由於「弱型別」不嚴謹，所以，沒有空格的時候，雖然不報錯，也有顯示效果，但那是按錯誤邏輯運算的，有時歪打正著，但確莫名其妙。再加上有很多滿足各瀏覽器的hack語法，css語句就更加零亂不堪。所以，寫的時候，盡量在滿足寬容度的情況下，嚴禁一些。
（3）給大家乙個案例
模組化設計，要求相對封閉獨立性、可重複性、可修改性、統一性等等是比較高的，當然，模組化越高越複雜的，修改起來也要月謹慎，因為牽一髮而動全身，這就要求，在開發設計前期要做好詳盡的策劃，從目錄結構、命名規範，到全域性和特例的界限劃分、後期修lunebenh改的寬容度估計等等，都要有個把握。
下面就給乙個我做的**的位址：
1、樣式表是按類路徑來模組化定義的，有中文注釋；
2、由於加了jsp程式，**格式有變動，也許會有不少垃圾**；
3、在firefox下，有幾處顯示不當、js未做相應優化，請用ie6 瀏覽；
4、感興趣者可以當html和css來，做參考。
本文標題: css模組化設計——從空格談起
本文位址:
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
宣告：凡註明"本站原創"的所有文字等資料，版權均屬程式設計客棧所有，歡迎**，但務請註明出處。
標籤：教程 網頁製作 網頁 設計 空格
div css常見錯誤彙總基本的頁面設計元素布局比例
您可能感興趣的文章:
廣告贊助
廣告贊助
最新發布
全站最新
廣而告之
© 2018-2021 程式設計客棧 贛icp備17006162號-9
贛公網安備 36110202000251號
top
模組化設計
儘管寫過很多模組，但一直對於模組化設計，沒有一直很清晰的認識，這次學習了軟體設計之道，終於從概念上對模組化設計有了乙個更清晰的認識。乙個軟體本質上是完成乙個或多個特定的功能，所以，寫程式的第一目標是實現需求。既然是實現需求，那是不是隨便怎麼寫，只要完成功能就行呢？不是的，因為，軟體是生命週期的，在乙...
css模組化策略
block element modifier 塊 元素 修飾封裝靠人為約定。繼承靠層疊特性。分治性強，復用性強。button button disabled button error button in progressprocessing.缺點 人為約定總是不靠譜，有人覆蓋了就呵呵噠。分治性強，復...
React 樣式 CSS模組化
css模組化，通過require引入樣式這種方式，優點是 解決了命名衝突和全域性汙染的問題 如何使用 1.安裝css loader依賴 npm install style loader css loader d2.配置webpack的css loader3.匯入和使用 footer.css foot...