CSS樣式架構[1] 共用型、模組型、頁面型

241 月

CSS樣式架構[1] 共用型、模組型、頁面型

所有css都只用link的方式引入,其他的import、style embed都不使用,import的引入時間會是在所有用link方式的css之後,所以為了避免版面會在一開始的時候跑版,所以import的方法也都一律不使用,in-line style的方式則保留給JS運用。並統一集中在同一個資料夾內,資料夾名稱視專案的需求而定,不過通常不超出「c」、「css」這兩個名稱。

所有的css我們分為三大類型:
1.全站共用型:reset.css、layout.css、style.css、print.css這些,放在c這個樣式根目錄底下。
2.模組套件型:pager.css、form.css或js效果所需的css,這些則放在c這個樣式根目錄下面的「module」裡。
3.頁面群組型:針對每一頁所設計的css,如index.css、article.css,這些則放在c這個樣式根目錄下面的「page」裡。

這樣的樹狀結構如以下圖示:
 CSS樹狀結構

而這些css放在html裡面,用link引入的順序,也是按照上面的規則,依序共用型、模組型、頁面型,並且都要加上媒體類型(media),現在我們所使用的媒體類型有:media=”screen, projection”、media=”print”、或是media=”all”,底下就針對核心及通用的css按照順序做介紹。

 

 

 

Posted by admin  Posted on 24 1 月 
  • CSS
  • Post Comments 0