css怎麼清除預設樣式

CSS是一種前端開發技術，可以讓網頁變得更美觀、更容易操作。但是，為了讓網頁看起來更漂亮，我們可能會使用許多CSS樣式，這些樣式會使網頁失去原本的風格，甚至與我們希望的效果不一致。本文將介紹一些CSS清除預設樣式的技巧，以便更能掌握CSS的基本原理。

一、CSS Reset

CSS Reset是一種清除預設樣式的技巧。它可以將瀏覽器中的預設樣式全部刪除，從而清除網頁中的所有預設外觀和效果。 CSS Reset的實作方式可以是手工編寫，也可以使用一些現成的工具。以下是一個手寫的CSS Reset範例：

*{

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 1;
vertical-align: baseline;
list-style: none;

}

此程式碼將所有元素的外邊距，內邊距，邊框，字體大小，字體粗細，字體樣式，行高，垂直對齊方式和清單樣式全部重設為預設值。透過這種方式，我們可以確保每個元素都只是在基礎CSS之上運作，而不受原始CSS和瀏覽器的預設樣式的影響。

二、Normalize.css

雖然CSS Reset可以完全清除預設樣式，但有時我們希望保留一些預設樣式，只是希望更好的控制它們。這時就需要使用Normalize.css。 Normalize.css是一種用於標準化樣式的CSS文件，可以保留瀏覽器本身的預設樣式，同時統一瀏覽器之間的樣式差異。以下是範例程式碼：

/! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css /

/* Document
  =================================================== ========================= */

/**

• ##修正所有瀏覽器中的行高。
• #防止方向變更後調整字體大小iOS .
  2. */
     

##html {

 line-height: 1.15; /
1 /  -webkit-text-size-adjust: 100%; /
2 /  -ms-text-size-adjust: 100%; /
2 /  -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 box-sizing: border-box;
}

/* Sections

  ======================= ==================================================== = */

/**

在所有瀏覽器中刪除邊距。
• */
  

body {

 margin: 0;
 padding: 0;
}
. ..

以上程式碼只是Normalize.css的一小部分，它會根據需要重置瀏覽器常見的HTML部分。使用Normalize.css，我們可以確保不同的瀏覽器都能正常顯示網頁，而不受任何預設樣式的干擾。

三、使用選擇器

除了使用CSS Reset和Normalize.css之外，我們還可以使用選擇器清除預設樣式。透過新增選擇器樣式，我們可以輕鬆消除瀏覽器中的預設樣式。以下是範例程式碼：

html,body,h1,h2,h3,h4,p,ol,ul,li,blockquote {

margin:0;
padding:0;

}

在這裡，我們使用了逗號分隔的元素列表，將一些最常用的HTML元素樣式重設為0。這樣一來，我們可以隨時新增需要重設的元素，清除瀏覽器的預設樣式。

四、使用CSS函式庫

為了避免手工寫CSS Reset或Normalize.css，我們可以使用預先寫好的CSS函式庫。以下是一些常見的CSS庫列表：

Bootstrap;
1. Bulma;
2. Foundation;
3. Semantic UI.

這些函式庫都提供了一套先進的CSS樣式，在設計網站時非常方便且實用。借助這些庫，我們可以使用許多預置的樣式，清除預設樣式，使用穩定的基礎樣式和佈局，從而加快網站開發的速度。

在使用這些函式庫時，我們應該注意預覽他們的目錄和文檔，以了解它們的編碼方式以及每個樣式背後的含義，以便有效地使用它們。

總結

CSS清除預設樣式技術是前端開發中的一項基本操作。透過CSS Reset、Normalize.css和選擇器樣式，我們可以清除瀏覽器預設樣式，從而讓我們輕鬆地設計出更美觀、優雅的網頁。當然，在實際的開發過程中，選擇使用CSS函式庫也是一個不錯的選擇，可以為我們提供高效、穩定、相容性強的基礎樣式。

以上是css怎麼清除預設樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！