第10天筆記CSS文檔統(tǒng)籌
CSS文檔統(tǒng)籌
1）整站里相同的CSS樣式提取到一個樣式表里，各個頁面調用相同的樣式文件即可。
2）網(wǎng)站較大的情況下一般會把網(wǎng)站的頭部，尾部單獨分離出來，包括樣式文件。
15.1.1 根據(jù)頁面類型分離文件
15.1.2 根據(jù)功能模塊分離文件
15.1.3 根據(jù)設備類型分離文件
15.1.4 根據(jù)代碼規(guī)模綜合分離文件
網(wǎng)頁自身優(yōu)化（如何讓網(wǎng)站被搜索引擎搜索到）：
★頁面主題優(yōu)化
實事求是的寫下自己網(wǎng)站的名字，網(wǎng)站的名字要合理，最好包含網(wǎng)站的主要內容。
★頁面頭部優(yōu)化
頁面頭部指的是代碼中部分，具體一點就是中的“Description（描述）”和“Keywords（關鍵字）”兩部分：
1、“描述”部分應該用近乎描述的語言寫下一段介紹你網(wǎng)站的文字，在這其中，你應該適當?shù)膶δ憔W(wǎng)站的特色內容加以重復以求突出；
2、“關鍵字”部分應該列出你認為合適的，能突出網(wǎng)站內容的關鍵字就可以了，關鍵字不要設置太多，可設置10---8個，搜索引擎只會瀏覽靠前的幾個關鍵字。
<meta name="keywords" content="" />向搜索引擎說明你的網(wǎng)頁的關鍵詞； <meta name="description" content=""/>告訴搜索引擎你的站點的主要內容；
<meta name="generator" content="">用以說明生成工具（如Microsoft FrontPage 4.0）等； <meta name="author"content="你的姓名">告訴搜索引擎你的站點的制作的作者；
★超鏈接優(yōu)化
搜索引擎為何可以能夠索引全世界的網(wǎng)站，是因為各個搜索引擎程序中都有一個會自動“爬行”于互聯(lián)網(wǎng)上的智能機器人程序，這個機器人就是順著網(wǎng)站之間的鏈接游覽世界的，那么我們就應該為它創(chuàng)造一個良好的爬行通道——合理的設置鏈接。 怎樣的鏈接才是合理的呢？
1、采用純文本鏈接，少用，最好是別用Flash動畫設置鏈接，因為搜索引擎無法識別Flash上的文字.
許多公司、個人都喜歡酷酷的Flash動畫，網(wǎng)站的入口也做成Flash片斷，，搜索引擎很難光顧這樣的網(wǎng)站。而且個別設計者非常馬虎，把網(wǎng)站的入口鏈接放在了Flash上，有時因為網(wǎng)絡繁忙、缺少Flash插件而導致用戶根本就看不到網(wǎng)站的內容，
2、按規(guī)范書寫超鏈接，這個title屬性，它既可以起到提示訪客的作用，也可以讓搜索引擎知道它要去哪里.
3、最好別使用圖片熱點鏈接，理由和第一點差不多。
★圖片優(yōu)化(alt屬性，title屬性)
圖片優(yōu)化并不是修改圖片的大小、顏色，而是你應該為每個標簽加上alt屬性，alt屬性的作用是當圖片無法顯示時以文字作為替代顯示出來，而對于SEO來說，它可以令搜索引擎有機會索引你網(wǎng)站上的圖片，對于一些確實沒什么意義的圖片，最好也不要省略alt，而應該留空，即 alt=""。
★為網(wǎng)站制作一個“網(wǎng)站地圖”
什么是網(wǎng)站地圖？說白了就是一個頁面，在這個頁面上呢，列出了你網(wǎng)站中各個欄目的入口地址，例如：http://sitemap.163.com，站點地圖的作用很大，首先，對于一個欄目眾多的網(wǎng)站，它可以幫助訪客最快速度找到所需的內容；二則，可以給搜索引擎提供一份自己網(wǎng)站的“鳥瞰圖”，方便搜索機器人依次索引整個網(wǎng)站。
★PageRank（pr值,友情鏈接）
PR值是Google提出的一個重要參數(shù)，它標明了某個網(wǎng)站的重要程度，那么pr值是如何確定的呢？目前普通的解釋為：假如有ABC三個網(wǎng)站，彼此互作友情鏈接，那么當一個訪客通過A上的友情鏈接來到B時，Google就認為A為B投了“一票”，同理，如果有人從C訪問B，那么B又得一票，如果全世界的網(wǎng)站上都有B的友情鏈接，B就是世界上最重要的網(wǎng)站了！
那么如何提供我們自己的pr值，方法為交換鏈接！應該找一些和自己網(wǎng)站內容相近，且較為優(yōu)秀的網(wǎng)站，但不要瘋狂的交換鏈接，如果你的首頁上一下子多了幾百個友情鏈接，Google不但不會提升你的pr，有可能認為你作弊，從而把該網(wǎng)站從自己的數(shù)據(jù)庫中刪除.
★靜態(tài)頁面與動態(tài)頁面
目前所有的SEO都認為，Google一類的搜索引擎會盡量避免索引帶有參數(shù)動態(tài)頁面，而喜歡索引普通的靜態(tài)頁面，這一點并未得到Google等搜索引擎的明確回答，但從效果來看是這樣。
畢竟動態(tài)頁面的變數(shù)太大，舉個例子，你發(fā)了一個帖子，可能在論壇某板塊的第1頁上，可隨著跟貼的增加你的發(fā)言可能就被擠到第10頁上了， 因此，制作網(wǎng)站的時候，最好避免使用動態(tài)頁面，或者改良技術，讓動態(tài)頁面自動生成對應的靜態(tài)頁面，既能便于搜索引擎收錄，也可以降低網(wǎng)站服務器、數(shù)據(jù)庫負擔，一舉兩得，不過這也不是絕對的，網(wǎng)站流量決定一切，即便是一個全部采用動態(tài)頁面的網(wǎng)站，但因為很受歡迎訪客不斷，那么它還是會被搜索引擎青睞，還是會出現(xiàn)在搜索結果的前列。而且，隨著技術的進步，搜索引擎也會改進，搜索動態(tài)頁面將來必定會更加容易。
★避免大“體積”的頁面
有經(jīng)驗標明，搜索引擎不喜歡索引大體積的頁面，即一個頁面代碼部分的體積不要太大，控制在100kb內為佳.
★最重要的一點！合理的代碼結構
搜索引擎喜歡格式清晰，結構分明的頁面，理論上XML是最合乎搜索引擎，當然，這太極端了，不過如果采用XHTML+CSS技術將頁面數(shù)據(jù)同表現(xiàn)分離，即避免大量嵌套表格和其它冗余的代碼還是能夠完美實現(xiàn)這一要求的。
原則：簡化代碼，易修改
二、CSS規(guī)范
1、命名方法（語義化命名，結構化命名）
ID:結構化 header footer
class: .border0 . red: .font12 .clear
2、CSS命名規(guī)則
1）建議使用小寫字母
2）以英文字母開頭，后面可以連接數(shù)字、字母、下劃線、連字符，建議盡量使用英文字母，適當使用下劃線和連接線；
3）詞必達意，名稱要反映用途和相關信息，同時也要簡短。
三、樣式重置
1、規(guī)則設置
以新浪為例：
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img { border:none; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; } body { color:#333; font:12px/20px "SimSun","宋體","Arial Narrow",HELVETICA; background:#fff;/ overflow-y:scroll;/ overflow-x:hidden;}
a { color:#666; text-decoration:none; }
a:visited { color:#666; }
a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }
2、騰訊
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px "宋體","Arial Narrow",HELVETICA;background:#fff;} a{color:#172c45;text-decoration:none} a:hover{color:#cd0200;text-decoration:underline} em{font-style:normal} li{list-style:none} img{border:0;vertical-align:middle} table{border-collapse:collapse;border-spacing:0} p{word-wrap:break-word} .ind{text-indent:2em} .ind10{text-indent:10px;} .noborder{border:0;}
3、搜狐
body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;} body > div{text-align:center;margin-right:auto;margin-left:auto;} div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;} img,a img{border:0;margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none} table,td,input{font-size:12px;padding:0} / 默認鏈接顏色 / a{outline-style:none;color:#333;text-decoration:none} a:hover{color:#c00;text-decoration:underline;}
更多建議：