層疊樣式表與樣本樣式表的概述
從頭開始構建網站時，從定義的基本樣式開始很明智。 這就像從一個乾淨的畫布和新刷子開始。 網頁設計師面臨的第一個問題之一是網頁瀏覽器都是不同的。 默認的字體大小因平台而異，默認字體系列不同，有些瀏覽器在body標籤上定義邊距和填充，而其他瀏覽器則不定義，等等。 通過為您的網頁定義默認樣式來解決這些不一致問題。
CSS和字符集
首先，將CSS文檔的字符集設置為utf-8 。 儘管您設計的大多數網頁可能都是用英文書寫的，但有些網頁可能會根據不同的語言和文化背景進行本地化。 當它們是時，utf-8簡化了這個過程。 在外部樣式表中設置字符集不會優先於HTTP頭 ，但在所有其他情況下，它將會。
設置字符集很容易。 對於CSS文檔的第一行寫入：
@charset“utf-8”;這樣，如果您在內容屬性中使用國際字符或作為類和ID名稱， 則樣式表仍將正常工作。
設計頁面主體的樣式
默認樣式表需要的下一件事是將邊距，填充和邊框清零。 這確保所有瀏覽器將內容放置在相同的位置，並且瀏覽器和內容之間沒有任何隱藏空間。 對於大多數網頁來說，這太靠近文字的邊緣，但從這裡開始非常重要，以便背景圖像和佈局分區正確排列。
html，body {margin：0px; padding：0px; border：0px; }將默認前景色或字體顏色設置為黑色，並將默認背景色設置為白色。 雖然這對大多數網頁設計來說很可能會發生變化，但首先在主體和HTML標記上設置這些標準顏色使頁面更易於閱讀和使用。
html，body {color：＃000; 背景：#fff; }默認字體樣式
字體大小和字體系列是一旦設計出現問題就不可避免地發生變化，但是以默認字體大小1 em和Arial，Geneva或其他sans-serif字體的默認字體系列開始。 ems的使用保持頁面盡可能可訪問，並且無襯線字體在屏幕上更易讀。
html，body，p，th，td，li，dd，dt {font：1em Arial，Helvetica，sans-serif; }可能有其他地方可能會找到文本，但是， p ， th ， td ， li ， dd和dt是定義基本字體的良好開端。 包含HTML和正文以防萬一，但如果僅為HTML或正文定義字體，許多瀏覽器會覆蓋字體選項。
標題
HTML標題對於幫助您的網站概述並讓搜索引擎更深入您的網站非常重要。 沒有樣式，它們都相當醜陋，所以它們都設置了默認樣式，並為每個樣式定義字體系列和字體大小。
h1，h2，h3，h4，h5，h6 {font-family：Arial，Helvetica，sans-serif; } h1 {font-size：2em; } h2 {font-size：1.5em; } h3 {font-size：1.2em; } h4 {font-size：1.0em; } h5 {font-size：0.9em; } h6 {font-size：0.8em; }不要忘記鏈接
設計鏈接的顏色幾乎總是設計的關鍵部分，但是如果你沒有在默認樣式中定義它們，那麼你很可能會忘記至少一個偽類。 用藍色上的一些小變化來定義它們，然後在為所定義的網站調色板後更改它們。
要將鏈接設置為藍色陰影，請設置：
- 鏈接為藍色
- 訪問鏈接為深藍色
- 懸停鏈接為淺藍色
- 活躍的鏈接甚至變得蒼白
如下例所示：
a：link {color：＃00f; } a：visited {color：＃009; } a：hover {color：＃06f; } a：active {color：＃0cf; }通過使用相當無害的顏色方案對鏈接進行樣式設計，可以確保我不會忘記任何類，並且使它們比默認的藍色，紅色和紫色響亮一點。完整樣式表
這是完整的樣式表：
@charset“utf-8”; html，body {margin：0px; padding：0px; border：0px; 顏色：＃000; 背景：#fff; } html，body，p，th，td，li，dd，dt {font：1em Arial，Helvetica，sans-serif; } h1，h2，h3，h4，h5，h6 {font-family：Arial，Helvetica，sans-serif; } h1 {font-size：2em; } h2 {font-size：1.5em; } h3 {font-size：1.2em; } h4 {font-size：1.0em; } h5 {font-size：0.9em; } h6 {font-size：0.8em; } a：link {color：＃00f; } a：visited {color：＃009; } a：hover {color：＃06f; } a：active {color：＃0cf; }