使用這些提示獲取事實
所有的網頁瀏覽器都包含了所謂的“詭異風格”。 這些樣式決定了HTML元素在沒有任何其他樣式信息的情況下的外觀和風格。 例如，在幾乎每個瀏覽器中，超鏈接的默認外觀都是明亮的藍色，並帶有下劃線。 除非您告訴他們以不同的方式顯示，否則這些鏈接就是這樣。
默認的瀏覽器樣式可能會有所幫助，但在很多情況下，Web設計人員想要刪除這些樣式，以便他們可以使用100％控制的樣式重新開始。 這是使用所謂的“主樣式表”完成的。
主樣式表應該是您在所有文檔中調用的第一個樣式表。 您可以使用主樣式表來清除在跨瀏覽器Web設計中可能導致問題的默認瀏覽器設置。 一旦你用主樣式表清除了樣式，你的設計就從所有瀏覽器中的同一個地方開始 - 就像一幅用於繪畫的干淨的畫布。
全局默認值
您的主樣式表應該首先清除頁面上的邊距，填充和邊框 。 某些Web瀏覽器會將文檔的主體默認為從瀏覽器窗格邊緣縮進的1或2個像素。 這確保它們都顯示相同的內容：
html，body {margin：0px; padding：0px; border：0px; }你也想讓字體一致。 請務必將字體大小設置為100％或1em，以便您的頁面可以訪問，但大小仍然一致。 並且一定要包含行高。
body {font：1em / 1.25 Arial，Helvetica，sans-serif; }標題格式
標題或標題標記（H1，H2，H3等）通常默認為粗體文本，邊距較大或周圍填充。 通過清除重量，邊距和填充，您可以確保這些標籤仍然保持比它們周圍的文本更大（或更小），而沒有額外的樣式：
h1，h2，h3，h4，h5，h6 {margin：0; 填充：0; font-weight：normal; font-family：Arial，Helvetica，sans-serif; }您可能需要考慮為標題標籤設置特定的尺寸，字母間距和填充，但這取決於您正在設計的網站的樣式，應該排除在主樣式表之外。 您可以根據特定設計的需要為這些標題添加更多樣式。
純文本格式
除了標題之外，還有其他的文字標籤，您應該確保清除。 人們常常忘記的一組是表格單元標籤（TH和TD）和表格標籤（SELECT，TEXTAREA和INPUT）。 如果您沒有將它們設置為與您的正文和段落文本相同的大小，那麼您可能會對瀏覽器呈現它們的方式感到不快。
p，th，td，li，dd，dt，ul，ol，blockquote，q，首字母縮寫詞，abbr，a，input，select，textarea {margin：0; 填充：0; font：normal normal normal 1em / 1.25 Arial，Helvetica，sans-serif; }將您的報價（BLOCKQUOTE和Q），首字母縮寫詞和縮寫縮小一點，這樣也很好，讓它們更加突出：
blockquote {margin：1.25em; padding：1.25em} q {font-style：italic; }首字母縮寫，abbr {cursor：help; border-bottom：1px虛線; }鏈接和圖像
鏈接很容易管理，並從上述明亮的藍色下劃線文本更改。 我更喜歡始終將鏈接標註為下劃線，但如果您偏好採用其他方式，則可以分別設置這些選項。 我也不在主樣式表中包含顏色，因為這取決於設計。
a，a：link，a：visited，a：active，a：hover {text-decoration：underline; }使用圖像時，關閉邊界很重要。 儘管大多數瀏覽器不會在純圖像周圍顯示邊框，但當圖像鏈接時，瀏覽器會打開邊框。 解決這個問題：
img {border：none; }表
儘管表格不再用於佈局目的，但您的網站仍然可以將它們用於實際的tabluar數據。 這是HTML表格的一個很好的用法。 我們已經確保表格單元格的默認文字大小相同，但您應該設置一些其他樣式，以便您的表格保持不變：
表{margin：0; 填充：0; border：none; }形式
與其他元素一樣，您應該清除表單周圍的邊距和填充。 我喜歡做的另一件事是將表單標籤重寫為“ inline ”，以便在代碼中放置標籤時不會添加額外的空間。 與其他文本元素一樣，我定義了select，textarea和上面的輸入的字體信息，以便與我的其余文本相同。
表格{margin：0; 填充：0; 顯示：內聯; }為標籤更改光標也是一個好主意。 這有助於人們看到標籤在點擊時會做些事情。
標籤{cursor：pointer; }通用類
對於主樣式表的這一部分，您應該定義對您有意義的類 。 這些是我經常使用的一些課程。 請注意，它們沒有設置為任何特定元素，因此您可以將它們分配給您需要的任何內容：
清除{clear：both; } .floatLeft {float：left; } .floatRight {float：right; } .textLeft {text-align：left; } .textRight {text-align：right; } .textCenter {text-align：center; } .textJustify {text-align：justify; } .blockCenter {display：block; margin-left：auto; margin-right：auto; } / *記得設置寬度* / .bold {font-weight：bold; } .italic {font-style：italic; } .underline {text-decoration：underline; } .noindent {margin-left：0; padding-left：0; } .nomargin {margin：0; } .nopadding {padding：0; } .nobullet {list-style：none; list-style-image：none; }請記住，因為這些類都是在任何其他樣式之前編寫的，並且它們只是類，所以它們很容易覆蓋級聯中稍後發生的更具體的樣式屬性。 如果你發現你在一個元素上設置了一個普通的類並且它沒有生效，那麼你應該檢查一下，以確保在你後面的一個樣式表中沒有其他樣式影響同一個元素。
整個主樣式表
/ *全局默認值* / html，body {margin：0px; padding：0px; border：0px; } body {font：1em / 1.25 Arial，Helvetica，sans-serif; } / *標題* / h1，h2，h3，h4，h5，h6 {margin：0; 填充：0; font-weight：normal; font-family：Arial，Helvetica，sans-serif; } / *文本樣式* / p，th，td，li，dd，dt，ul，ol，blockquote，q，首字母縮寫詞，abbr，a，input，select，textarea {margin：0; 填充：0; font：normal normal normal 1em / 1.25 Arial，Helvetica，sans-serif; } blockquote {margin：1.25em; padding：1.25em} q {font-style：italic; }首字母縮寫，abbr {cursor：help; border-bottom：1px虛線; } small {font-size：.85em; } big {font-size：1.2em; } / *鏈接和圖片* / a，a：link，a：visited，a：active，a：hover {text-decoration：underline; } img {border：none; } / * Tables * / table {margin：0; 填充：0; border：none; } / * Forms * / form {margin：0; 填充：0; 顯示：內聯; } label {cursor：pointer; } / * Common Classes * / .clear {clear：both; } .floatLeft {float：left; } .floatRight {float：right; } .textLeft {text-align：left; } .textRight {text-align：right; } .textCenter {text-align：center; } .textJustify {text-align：justify; } .blockCenter {display：block; margin-left：auto; margin-right：auto; } / *記得設置寬度* / .bold {font-weight：bold; } .italic {font-style：italic; } .underline {text-decoration：underline; } .noindent {margin-left：0; padding-left：0; } .nomargin {margin：0; } .nopadding {padding：0; } .nobullet {list-style：none; list-style-image：none; }Jennifer Krynin的原創文章。 在10/6/17由Jeremy Girard編輯