lucida程序員

⑴ 記事本的軟體概要

此軟體相當常見，其存儲文件的擴展名為.txt，文件屬性沒有任何格式標簽或者風格，所以相當適合在DOS環境中編輯。
記事本的特點是只支持純文本。一般來說，如果把文本從網頁復制並粘貼到一個文字處理軟體，它的格式和嵌入的媒體將會被一起粘貼並且難以去除。但是，如果將這樣一個文本先粘貼到記事本中，然後從記事本中再次復制到下最終需要的軟體里，記事本將會去除所有的格式，只留下純文本，在某些情況下相當有用。記事本幾乎可以編輯任何文件，但不包括Unix風格的文本文件。
早期的記事本只提供最基本的功能，例如文字查找功能。較新版本的Windows所搭載的新版記事本可以支持查找及取代功能，快捷鍵是（Ctrl+H），而Ctrl+F則是傳統的查找功能。在一些舊版的Windows中，例如Windows 95、Windows 98、Windows Me和Windows 3.1，其所自帶的記事本有64k的文件大小的編輯限制，源自操作系統的一個「EDIT」層面的限制。
Windows Me中，記事本仍不支持任何快捷鍵操作，亦不支持行數統計功能。從Windows 2000開始，一些普遍的功能開始有快捷鍵的操作，例如新增、打開和存儲。同時，狀態欄亦開始出現，有行數統計器，在自動換行功能取消時才會出現。
在Windows 95中，記事本只支持Fixedsys字體，到了Windows NT 4.0和Windows 98，記事本便開始支持字體變更。在Windows 2000和Windows XP中，默認字體已變為Lucida Console。
在以Windows NT為基礎的操作系統中，記事本可以編輯傳統的8-bit文本文件，同時支持Unicode文本文件（UTF-8和UTF-16）。
記事本利用EDIT作為其系統自帶的類型名稱。
記事本亦集成了一個簡單的日誌功能，每一次打開文件，都可以記下一個新的時間標簽。要激活這個功能，在文檔開頭的第一行，必須是.LOG，不包括引號。
記事本直到最後，仍然是一款只可以在Windows下運行的軟體。但如果利用開源的ReactOS操作系統，並配合Wine，就可以在非微軟的操作系統中，運行記事本。該軟體是開源的，並且是GNU寬通用公共許可證的軟體。
從Windows XP開始（Windows ME及Windows 2000未經確認）附帶的記事本，若在自動換行功能打開時保存，且當前窗口內有任何行長度超過編輯窗口寬度，則保存後該行會如同在原自動換行位置插入硬回車一樣「斷開」，更改窗口寬度（無論是擴大還是縮小）便可發現此現象。但是，保存至文檔中的內容並不會受到影響。
由於記事本功能簡單，稍有經驗的程序員都可以開發出與記事本功能近似的小軟體，所以在一些編程語言工具書上也會出現仿照記事本功能作為參考的示例，有趣的是，記事本亦可用來撰寫軟體，但不包含程序的編譯功能，編譯程序仍得通過外部程序解決。

⑵ java程序員代碼一般用什麼字體

一般適合用作程序代碼顯示的字體，有下列幾個：
（1）：Courier New 9pt, Verdana, Lucida Console (宋體，新宋體等不在討論之列)
首先說說Courier New， 這個字體雖說經典，但總體感覺其實不好。因為是等寬字體，所以對編程而言，其優點是每個字元區分的十分清楚，方便查找程序中的輸入錯誤。不好的地方在於，因為是等寬字體，特別浪費顯示空間，在看代碼的時候恨不得顯示器變成 21寸的才好。總之就是感覺用來看那種大的框架的源代碼的時候，非常不適合。一屏只能看到很少的幾句代碼，有隻見樹木，不見森林之感，不利於從宏觀角度理解代碼的邏輯。另外在 VS.NET 2003 裡面該字體顯示的中文特別大，而且很醜陋 -_-!
（2）：Verdana: 非等寬字體。總體可讀性好些，但是小的錯誤，比如多一個少一個空格之類的，很難排查。
Lucida Console 是等寬字體。可讀性也不錯，但是 vs.Net 顯示出來有鋸齒。
serif 字體通常不同筆順的粗細有別，且起筆落筆處有多餘的小折線。
sans-serif 字體筆畫不論方向粗細相同，且起筆落筆沒有多餘折線。
中文字體中，可以與此類比：宋體相當於 serif 字體，黑體相當於 sans-serif 字體。
正文中應該用 serif 字體以提高可讀性，標題可以用 sans serif 字體以示強調。
（3）：serif 字體在視覺上強調單詞的整體，因此作為正文更可讀；而 sans serif 強調單個的字母。
研究顯示，在 web 中 sans-serif 字體更易閱讀。正文字體比較好的選擇：Arial 9.75 或 MS Sans Serif 9.75。為了提高閱讀准確性和速度，最好的字體大小是 8.25, 9.0, 或 9.75（"MS Serif 8.25" 除外）。
（4）養眼的編輯器配色
環境：VS2005
字體：Verdana, 10pt
普通文本背景色：238,239,230 (#E6EFEE)

⑶ 什麼是CSS

CSS（cascading style sheet，層疊樣式表，也有人稱cascading為「級聯」，從而也成為「級聯樣式表」）是描述文檔怎樣被呈現的語言。使用CSS可以對HTML文檔進行描述，通過描述，可以將HTML文檔以不同的方式呈現在不同的介質上，這些介質包括計算機顯示器、列印機，甚至是使用語音合成器讀出。

⑷ 哪些英文字體每個字母的寬度都是一樣的

這個問題比較不好辦，關繫到了一個比例字體和等寬字體的概念。
簡單的說吧，比例字體（Proportionality）在顯示不同的字元使用不同的寬度，而等寬字體（non-proportional，fixed-width， monospace font）則使用相同的寬度。一般來說，中文像simsun之類的用的都是等寬字體，英文的則比較少見，比例字體，現在看來是一種趨勢了。
你可以試試選擇用網頁的等寬字體（如Courier）。等寬字體的寬度不變，所以每個字元或字母佔用相同的空間。
希望聽到你的好消息。
找了幾個等寬字體：1.Bitstream Vera Sans Mono;2. Clean;3. Courier;4. Fixed;5. Gothic;6. Lucidatypewriter;7. Mincho;8. Nil;9. Terminal;10. Nimbus;11. Mono L，你看看你系統有哪幾個吧呵呵
以上引用自http://www.dxy.cn/bbs/topic/6147707 網友LaoLang_cool的答案

⑸ 如何命名CSS文件及樣式規范更利於SEO優化

堅持使用統一的CSS命名規則並養成習慣，可以讓你更容易維護、修改以前編寫過的CSS代碼，進而提高自己的工作效率，而且還能加強搜索引擎的SEO優化，方便記憶，那麼，我們如何才能將CSS的命名做得井井有條呢？
1、CSS文件及樣式命名
首先，先為大家展示一些CSS文件及樣式的命名樣例，因為這些名稱能使大家立馬明白定義的文件，具體如下所示：
（1）、CSS文件命名規范
全局樣式：global.css
框架布局：layout.css
字體樣式：font.css
鏈接樣式：link.css
列印樣式：print.css
主要的：master.css
專欄：columns.css
主題：themes.css
（2）、CSS樣式命名規范
對於CSS樣式的命名規則，建議用字母、_號工、-號、數字組成，必須以字母開頭，不能為純數字，為了開發後樣式名管理方便，大家請用有意義的單詞或縮寫組合來命名，讓同事一看就明白這樣式大概是哪一塊的，這樣就節省了查找樣式的時間。
例如：頭部樣式用header，頭部左邊，可以用header_left或header_l，還有如果是列結構的可以這樣——box_1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box_3of3 (三列中的第三列)，其它的我就不一一舉例了，大家按以上規律去命名就好。
下面列出一些常用的命名單詞方便大家使用（以後大家工作過程中慢慢把自己積累的單詞都共享出來，那大家的命就會更加統一了，就不會有一義多詞的情況了）：
容器：container/box
頭部：header
主導航：mainNav
子導航：subNav
頂導航：topNav
邊導航：sidebar
左導航：leftsideBar
右導航:rightsideBar
網站標志：logo
大廣告：banner
頁面中部：mainBody
整個頁面：content
底部：footer
菜單：menu
菜單內容：menuContent
子菜單：subMenu
子菜單內容：subMenuContent
搜索：search
搜索關鍵字：keyword
搜索范圍：range
標簽文字：tagTitle
標簽內容：tagContent
當前標簽：tagCurrent/currentTag
標題：title
內容：content
列表：list
當前位置：currentPath
側邊欄：sidebar
圖標：icon
注釋：note
登錄：login
注冊：register
麵包屑：breadCrumb(即頁面所處位置導航提示)
列定義：column_1of3 (三列中的第一列)、column_2of3 (三列中的第二列)、column_3of3 (三列中的第三列)
2、CSS的優先順序
行內樣式(inline style) > ID選擇符 > 樣式(class)、偽類(pseudo-class)和屬性(attribute)選擇符 > 類別(type)，偽對象(pseudo-element)。
博客註解：
*內聯樣式(inline style)：元素的style屬性，比如 <div style="color:red;"></div>，其中的color:red;就是行內樣式。
*ID選擇符：元素的id屬性，比如<div></div>可以用ID選擇符#content
*偽類(pseudo-class)：最常見的是錨(a)偽類，比如a:link,a:visited.
*屬性選擇符(attribute selectors)：比如div[class=demo],含有class為demo的div元素。
*類別選擇器(type selector)：HTML標簽選擇，比如div .demo,div元素下含有class為demo的元素。
*偽對象選擇器(pseudo-element selector)：比如div:first-letter,div元素下的第一個單詞。
3、默認值
通常padding和margin的默認值為0，background-color的默認值是transparent，但是在不同的瀏覽器默認值可能不同。
如果怕有沖突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，例如：
* {
padding:0;
margin:0
}
或者是針對某元素來定義：
ul,li,div,span {
padding:0;
margin:0
}
4、不要重復定義可繼承的值
CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中可以直接繼承，不需要重復定義。
除非是為了更變當前元素樣式不使用父元素的屬性值，但是要注意，瀏覽器可能用一些默認值覆蓋你的定義。
5、CSS代碼書寫樣式
在寫CSS代碼的時候，對於縮進、斷行、空格，每個人有每個人的書寫習慣，在經過不斷實踐後，我決定採用下面這樣的書寫樣式：
.classname {
width:100px;
}
當使用聯合定義時，我通常將每個選擇器單獨寫一行，這樣方便在CSS文件中找到它們，在最後一個選擇器和大括弧之間加一個空格，每個定義也單獨寫一行，分號直接在屬性值後，不要加空格。
我習慣在每個屬性值後面都加分號，雖然規則上允許最後一個屬性值後面可以不寫分號，但是如果你要加新樣式時容易忘記補上分號而產生錯誤，所以還是都加比較好，最後，關閉的大括弧單獨寫一行，這樣的空格和換行有助與閱讀
6、使用css縮寫
使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀，常用的css縮寫的主要規則有：
（1）、顏色
16進制的色彩值，如果每兩位的值相同，可以縮寫一半，例如：
#000000可以縮寫為#000;#336699可以縮寫為#369;
（2）、盒尺寸
通常有下面四種書寫方法:
property:value1; 表示所有邊都是一個值value1
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left
方便的記憶方法是順時針，上右下左，具體應用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
（3）、邊框(border)
邊框的屬性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以縮寫為一句：border:1px solid #000;
語法是：border:width style color;
（4）、背景(Backgrounds)
背景的屬性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以縮寫為一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
語法是：background:color image repeat attachment position;
你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值為：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
（5）、字體(fonts)
字體的屬性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以縮寫為一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
提示：如果你縮寫字體定義，至少要定義font-size和font-family兩個值。
（6）、列表(lists)
取消默認的圓點和序號可以這樣寫list-style:none;
list的屬性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以縮寫為一句：list-style:square inside url(image.gif);
7、多重CSS樣式定義，屬性追加重復最後優先原則
一個標簽可以同時定義多個class，也可以是同一個class中重復定義屬性，例如：
我們先定義兩個樣式：
.one{width:200px;background:url(http://www.mahaixiang.cn/1.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(http://www.mahaixiang.cn/2.jpg) no-repeat left top;}
在頁面代碼中，我們可以這樣調用:
<div class="one" two></div>
這樣最終的顯示效果是這個div樣式是什麼呢？重復的是以哪一個為准呢？
<div class="one" two></div>應用到的樣式如下：
width:200px;
border:10px solid #000;
background:url(http://www.mahaixiang.cn/2.jpg) no-repeat left top;
因為，當應用兩個或多個樣式時，瀏覽器所應用的樣式根據是屬性追加重復最後優先原則。
就是說兩個或多個或重復的樣式名定義，瀏覽器所應用的樣式是按先後順序的，如果定義了重復的屬性值，以最後定義的為准，如果應用了兩個或多個樣式名，裡面不重復定義的屬性值就追加上去，重復的屬性值就以最後一個為准。
這里要注意的是，樣式的先後不是根據頁面上應用的名字順序，而是樣式表裡的樣式順序。
8、導入(Import)和隱藏CSS
因為老版本瀏覽器不支持CSS，一個通常的做法是使用@import技巧來把CSS隱藏起來，例如：
@import url(main.css);
然而，這個方法對IE4不起作用，這讓我很是頭疼了一陣子，後來我用這樣的寫法：
@import main.css;
這樣就可以在IE中也隱藏CSS了，呵呵，還節省了5個位元組呢！
9、CSS hack
有些時候，你需要對IE瀏覽器的bug定義一些特別的規則，這里有太多的CSS技巧(hacks)，我只使用其中的兩種方法，不管微軟在即將發布的IE版里是否更好的支持CSS，這兩種方法都是最安全的。
（1）、注釋的方法
a、在IE中隱藏一個CSS定義，你可以使用子選擇器(child selector):
html>body p {
}
b、下面這個寫法只有IE瀏覽器可以理解(對其他瀏覽器都隱藏)
* html p {
}
c、還有些時候，你希望IE/Win有效而IE/Mac隱藏，你可以使用反斜線技巧：
* html p {
declarations
}
d、下面這個寫法只有IE7瀏覽器可以理解(對其他瀏覽器都隱藏)
*+ html p {
}
（2）、條件注釋(conditional comments)的方法
另外一種方法，我認為比CSS Hacks更加經得起考驗就是採用微軟的私有屬性條件注釋，用這個方法你可以給IE單獨定義一些樣式，而不影響主樣式表的定義，就像這樣：
<!--[if IE]>
<link rel=stylesheet/css href="http://www.mahaixiang.cn/style/ie.css" />
<![endif]-->
還有更多的CSS hack大家可以通過網上找找，但是有很多hack都是不符合w3c標準的，根據以上的hack寫了一個能區分IE6、IE7、FF的樣式，而且可以符合w3c標准，代碼如下：
.classname {width:90px!important;width:100px;}
*+html .classname {width:95px!important;}
這樣寫後在IE6下寬是100px，IE7下是95px，火狐下是90px。
10、明確定義單位，除非值為0
忘記定義尺寸的單位是CSS新手普遍的錯誤，在HTML中你可以只寫width=100，但是在CSS中，你必須給一個准確的單位，比如：width:100px width:100em。
只有兩個例外情況可以不定義單位：行高和0值，除此以外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。
11、區分大小寫
當在XHTML中使用CSS，CSS里定義的元素名稱是區分大小寫的，為了避免這種錯誤，建議大家將所有的定義名稱都採用小寫。
class和id的值在HTML和XHTML中也是區分大小寫的，如果你一定要大小寫混合寫，請仔細確認你在CSS的定義和XHTML里的標簽是一致的。
12、id和class的使用及區別
我們知道在樣式表定義一個樣式的時候，可以定義id，也可以定義class，例如：
ID方法：#test{color:#333333}，在頁面中調用<div>內容<div>
CLASS方法：.test{color:#333333}，在頁面中調用<div class="test">內容<div>
一般來說，id是一個頁面只可以使用一次，class是可以多次引用的。
可我在頁面中用了多個相同id在IE中顯示也正常，id和class好象沒什麼區別，用多個相同id有什麼影響嗎？
頁面存在多個相同的ID影響就是不能通過W3的校驗，在頁面顯示上，目前的瀏覽器還都允許你犯這個錯誤，用多個相同ID「一般情況下」也能正常顯示，但是當你需要用JavaScript通過id來控制這個div，那就會出現錯誤。
id是一個標簽，用於區分不同的結構和內容，就象你的名字，如果一個屋子有2個人同名，就會出現混淆。
class是一個樣式，可以套在任何結構和內容上，就象一件衣服。
從概念上來說：id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。
對此，建議大家在寫XHML+CSS時如果是維一的結構定位的就用id，否則就用class吧（這樣讓出非結構定位的div塊的id讓程序員自己定義使用）！
13、取消class和id前的元素限定
當你寫給一個元素定義class或者id，你可以省略前面的元素限定，因為ID在一個頁面里是唯一的，class可以在頁面中多次使用，在看來，你限定某個元素是毫無意義的，例如：
div#id1{}可以寫成#id1{}
這樣可以節省一些位元組。
14、使用子選擇器(descendant selectors)
使用子選擇器是影響他們效率的原因之一，子選擇器可以幫助你節約大量的class定義，我們來看下面這段代碼：
<div>
<ul>
<li class="subnavitem"> <a href="http://www.mahaixiang.cn/seo/#" class="subnavitem">SEO</a></li>>
<li class="subnavitemselected"> <a href="http://www.mahaixiang.cn/seo/#" class="subnavitemselected">SEO</a> </li>
<li class="subnavitem"> <a href="http://www.mahaixiang.cn/seo/#" class="subnavitem">SEO</a> </li>
</ul>
</div>
這段代碼的CSS定義是：
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
你可以用下面的方法替代上面的代碼：
<ul id=」subnav」>
<li> <a href="http://www.mahaixiang.cn/seo/#">SEO</a> </li>
<li class="sel"> <a href="http://www.mahaixiang.cn/seo/#">SEO</a> </li>
<li> <a href="http://www.mahaixiang.cn/seo/#">SEO</a> </li>
</ul>
樣式定義是：
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。
如果一個容器里有多個同樣的元素，而且這些元素樣式都不一樣，請避免用這個方式，建以大家可以採用不同的class如：
<ul class=」one」><li></li></ul>
<ul class=」tow」><li></li></ul>
15、不需要給背景圖片路徑加引號
為了節省位元組，建議不要給背景圖片路徑加引號，因為引號不是必須的，例如：
background-image:url(images
margin:0 auto;
}
但是IE5/Win不能正確顯示這個定義，我們採用一個非常有用的技巧來解決：用text-align屬性，就像這樣：
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第一個body的text-align:center;規則定義IE5/Win中body的所有元素居中(其他瀏覽器只是將文字居中) ，第二個text-align:left;是將#warp中的文字居左。
16、層占據的空間
當調試CSS發生錯誤，你就要像排版工人，逐行分析CSS代碼，我通常在出問題的層上定義一個背景顏色，這樣就能很明顯看到層占據多大空間？
有些人建議用border，一般情況也是可以的，但問題是，有時候border會增加元素的尺寸，border-top和boeder-bottom破壞縱向margin的值，所以使用background更加安全些（更多的介紹，

⑹ 我是如何對網站CSS進行架構的 轉自張鑫旭

關於如何處理網站的CSS，各個網站做法都不一樣，這隨著網站的性質及大小不同，公司前人留下的規范不同，以及CSS工程師的眼界不同而有所不同。由於我從業經歷有限，所知甚淺，只能說些膚淺業余的內容，不準確之處歡迎指出。

就CSS文件而言，有的網站分為header.css, body.css, footer.css，不做評價；
有的分為reset.css, main.css, content.css，不做評價；
有的分為common.css,然後每個種類的頁面一個CSS，例如home.css(主頁), album.css(相冊頁面),message.css(站內信頁面),blog.css(日誌頁面)等，不做評價；
有的分為base.css，然後每個活動頁面一個單獨的CSS，等，不做評價；
還有的直接將CSS嵌在頁面中，而非外部鏈接調用，不做評價。

這些不同的處理方法，沒有什麼正確與錯誤之分，只有適合不適合。每種方法都有其存在的道理，所以我是沒有資格做任何評價的。

就每個CSS文件的內容而言，一般都會有一段長長的CSS reset（樣式重置），然後就是有著統一前綴，命名較長的樣式內容，就像人人網的部分樣式截圖：

例如，上圖中標注的u113的意思其實是u(1,13)，這種小圖標命名的方法我稱之為「小圖標矩陣命名法」。此命名略有不足在於在使用小圖標時需要打開源文件或通過注釋准確查詢到對應的class。

6-10、網站通用樣式
這里的「網站通用樣式」可以說與「網站通用樣式庫」最為對立的兩部分。網站通用樣式專指「獨立元素」的通用樣式，所謂「獨立元素」指的是網站通用的導航，菜單，按鈕，選項卡，文本框裝飾，圖片裝飾，圓角處理等等。這些「獨立元素」的樣式千萬不能對其進行分離並歸入「網站通用樣式庫」中，否則，日後會給你留下無盡的痛苦的！

我幾乎從不對按鈕或是導航進行定寬，都是寬度自適應，這樣，可以大大節約Sprite背景圖片以及CSS代碼的成本。以前多有探討，這里不多說了。

網站通用樣式的代碼量在整個CSS文件中所佔據的比重是相當大的，如果您的CSS文件中發現CSS通用樣式只佔整個CSS文件的一小部分，尤其網站項目較大時，那就需要引起警惕，可能最後的結果就是CSS文件超負荷，最後反而一團糟。

11、網站公共結構樣式
所謂「網站的結構樣式」主要指的是最外框div的樣式，一般限制網站的寬度(960~990不等)，還有就是網站的分欄布局樣式，這里的樣式僅僅針對主體結構，例如left_part，或是right_part；還包括網站的頭部的一些公用結構，底部的樣式結構等。

我是強烈建議公共結構僅僅定寬定高，設置浮動屬性，切不可在結構樣式上添加margin或是padding屬性，這會使網站的公共結構的重用性大大降低！

12、單頁面的精細結構
如果上述11項您都架構的非常好，那麼您在編寫每個具體頁面的時候，就會非常輕松，非常迅速。因為80%~90%的樣式都可以從上面11項中直接拿來用（上述11項全部都是網站公用樣式）。

對於中型大型網站，我們可能要花3~4天甚至更多的時間分析頁面設計圖，處理CSS Sprite，架構網站的CSS，這段時間不寫任何頁面，就是處理網站（可以說是）唯一的CSS文件。所謂「磨刀不誤砍柴功」，站在整站的角度上去思考CSS是非常重要的，這可以讓你避免迷路，有助於寫出精簡高效的樣式代碼。

當我們把1-11項都完成了，就開始著手寫頁面了，這時候，整個網站的頁面基本上都在你腦中了，您在下手的時候就會清除：我現在做的是哪個頁面，在整個網站中扮演著什麼樣的地位，這個頁面的CSS對整個網站的CSS有什麼影響，這里的樣式該怎麼處理（分離，合並還是獨立）等。

一般而言，就我個人經驗，每個頁面，即使這個頁面看上去很復雜，其代碼開銷也是非常小的。其新增的代碼開銷去處有三處：一是分離一些樣式歸入「網站CSS樣式庫」中；二是凡事使用的CSS Sprite的樣式與其他樣式進行合並；三就是一些精細的復雜的樣式，這些就是CSS文件的架構的最後一部分「單頁面的精細結構了」，何為單頁面的精細結構，如下圖的樣式，就可以說是精細結構，需要獨立出來新寫樣式（可適當分離，注意「適當」一詞）：

例如上圖滑鼠經過後顯示，紅色虛框樣式，剪刀，粗邊框投影，最優惠標示，一些按鈕等就屬於精細結構，我們需要在頁面上單獨寫一個樣式。雖然理論上，我們使用分離也是可以實現這個效果的，但是此時html代碼的開銷實在太大，根本就不適合使用分離，這里就該老老實實的寫樣式。這里的寫法，命名都應該跟隨內容而不是屬性本身。我們可以在單一類別的頁面使用同樣的前端的前綴避免樣式沖突等~~

四、關於適用性

有些東西雖然看上去好，但是卻不適用。通過上述的CSS架構，我可以把網站的樣式控制地非常的精簡與高效（當然，需要設計師與後台工程師的通力配合），但是，對於別人，套用此架構可能就沒有這樣的效果，可能反而會更糟。前面也提到了，這種架構是我自己摸索出來的，是根據自己的寫法，布局思想，甚至性格等形成的，帶有明顯的個人印記。

比方說，我是個推崇自適應布局（流體布局）的人，是個十足的自適應控，但是，有很大一部分同行是固定布局（像素級兼容，有計算）。固定布局固然有其優點，但是其CSS代碼的消耗量以及頁面的擴展性我是很詬病的，顯然，這是無法應用到我這里的架構中的。

其次，不少CSS剛入門的頁面開發工程師對CSS屬性理解不夠透徹，常會寫一些沒有必要的冗餘代碼。對於他們而言，但CSS文件的架構確實很吃力。

說實話，我對自己的這個CSS架構的適應性都不看好，一是自己在表達方面的火候欠缺，沒有很好的展示架構的精髓，二是因為此架構本身需要有很多的控制，這種控制受制於設計師，網站頁面架構，CSS工程師自身的功力，一旦樣式泛濫，這種架構也就毫無意義，反而弄巧成拙；但是，一旦控制下來，那麼網站就CSS性能這塊保證領先，而這些需要優秀的有眼界的CSS工程師來掌控，需要優秀的設計師，程序員通力協作。雖然全然套用我展示的這套架構會由於不熟悉或是掌控不夠而產生問題，但是，裡面一些概念，一些思想應該能有一定的啟示作用的，這也是本文的意義所在了。

我只是個初出茅廬的小生，我知道，很多真正功力深厚的前端開發人員有著更好的更廣泛適應的前端架構，如果您有幸來到這里，歡迎分享您的一些見解與認識。還有，文中若有您覺得不合理的觀點，也非常歡迎通過評論或是郵件[email protected])的方式進行指正。我們需要在不斷的交流中提高的。