個人博客的設計與搭建模板「博客設計心得體會」

上帝他老人家創造了星期，一個禮拜還要工作六天。看你那麼虔誠，上帝賜你周末休息兩天。給你個機會感恩，周末奉獻一天陪我。我代上帝保佑你：願你不忙不累盡享悠閑，快樂滿足幸福翻倍！

周末就要到了，不忙不閑之餘，也別忘了關心下我哦，畢竟……畢竟…姨媽期的玻璃心，說碎就碎呀，好了，廢話不多說啦，今天我來跟大家分享一下我最最最喜歡的話題——CSS設計，不過這次，小編也絞盡腦汁，別出心裁啦，帶着你一起學用CSS來設計博客，怎麼樣？心動吧？要是你關注過我其他博客，如Earl Grey的話，你可能見過相關文章 Intro to CSS + Cheat Sheet CSS（裏面有我的速查表更新），可能內容有重複的地方，不過這次，我對CSS也有了更深層次的理解，希望對大家有所幫助哦。 1、添加CSS代碼

CSS是層疊樣式表，HTML的好搭檔，是用來設計網站、博客、插件等最好的技術，你在樣式表在添加CSS代碼的時候，也可以用簡稱（就像CSS也是「cascading…」的一部分），沒必要再返回原代碼，找你要更改的部分（除非你願意那樣做）。

2、修改博客字體

CSS是由選擇器、屬性和值組成的。選擇器是你的樣式元素。它可以被歸類為一個ID，類、段落、鏈接或部分頁面（DIV，跨度，等等）。一個ID總是始於一個標籤，就在一個類生成的時候，該ID選擇器將設計一個主區域，但類選擇器可以在一個類中設計多個元素。

如果我想把我博客的正文字體改為宋體，我的CSS代碼應該是這樣的： .entry {font-family:tahoma;}。下面是一些加載CSS代碼的例子：
正如你所看到的，我先用ID來設計我的導航欄（#nav-primary），這只是一個控制菜單。然後我使用類選擇器（.nav-menu-item）來設計菜單的每個鏈接。你的CSS代碼的間距不是很重要，基本上它只是增加了組織，注意你的編碼，最重要的是冒號，分號和括號的位置。

3、插入CSS的位置

大多數博客平台都會給你留出一個特殊空間來插入CSS代碼的。在WordPress中，我經常是在「Dashboard」的「Appearance」下面的編輯區域插入的。博客裏面，你也可以在模板設計區的「Advanced」部分添加CSS代碼。

4、用CSS設計博客的作用

（1）美化網站。CSS允許你快速添加邊距以及填充元素，使你的設計看起來更專業和更具可讀性。你的編碼本身也將更加有組織性。使用CSS，你可以在一行代碼中編輯好幾個要素。你沒必要非得到單個頁面來改變特定元素的樣式。

（2）權重SEO(搜索引擎優化)。這意味着你在搜索時，從搜索結果中獲取的訪問量將更高。另外，你也可以用PS圖象處理軟件或CSS來創建博客的幾個要素。我建議大家試着用CSS來設計博客。例如，您想要添加一個標題為「設計贈品」的工具欄，可能用PS做個矩形框，再添加一些文字，上傳到你的博客也不錯，但如果你選擇純文本，用CSS來做，搜索引擎就簡單方便多了。

（3）提高速度。如果你像我一樣，也喜歡經常更改顏色，你可以到CSS編輯器裏面，快速地更改背景顏色，字體，懸浮效果等，不需要再編輯/保存/上傳了。

（4）增添趣味性。當然，這只是我個人看法。我可以整天都坐那兒敲CSS代碼。體驗不同的選擇器和屬性，瀏覽你自己設計的漂亮博客是多麼有趣的一件事情啊！想讓你的個人資料圖片變成圓形嗎？CSS來幫你實現，想創建一個漂亮且有懸浮效果的下拉菜單嗎？那就用CSS。用CSS，一切皆有可能！關於編碼問題，直接通過CSS在谷歌搜索，你就能找到答案。

附：CSS速查表

為了給你的博客或網站增加視覺吸引力，你也可以在CSS樣式表裡添加更多不同的代碼，前一段時間我做了一個速查表，但最近做過一些迭代，下圖是我用CSS重新做出來的（注意：不是用PS哦），大家看一下我更新後的速查表以及每個屬性的定義： 在心的扉頁上，我寫下了無數個夢的憧憬，朝你追尋知識的方向，我的祝福，是窗外的一片藍天，讓雲捎去滿心的祝福，點綴你甜蜜的夢，願你周末快樂！ 我們一起期待新的CSS教程吧，不要吝嗇留下足跡，你的建議就是我們進步的源泉。