在網頁設計中，CSS是不可或缺的一部分。它可以讓你輕松地控制網頁的布局、顏色、字體等屬性。在開發過程中，我們通常會將CSS樣式集中在一個文件中，然后將其引入到HTML文檔中。這篇文章將向你展示如何在div中引入CSS。
首先，我們來看一下簡單的HTML代碼，它包含了一個div和一個內聯的樣式：
<p>這是一個如上代碼所示，我們把CSS樣式直接寫到div的style屬性中，這樣可以使它具有背景色、字體顏色、內邊距等屬性。但是，把CSS樣式寫在HTML標簽中并不是一個實際的選擇。原因有很多，比如： - 重復的CSS樣式需要多次寫入； - 代碼可讀性差； - 維護成本高。 因此，我們需要將CSS樣式從HTML文檔中分離出來，為此，我們需要創建一個CSS文件。我們可以在頭部引用該文件，并在其中定義我們的樣式，如下所示：紅色的div！</p>
<head> <link rel="stylesheet" href="styles.css"> </head>接著，我們打開“styles.css”文件，并在其中定義樣式。我們可以給div加上一個類名，以便在CSS中引用它的樣式：
.myDiv {
background-color: red;
color: white;
padding:10px;
}現在，我們需要在HTML文檔中使用我們的樣式類。我們可以為div添加一個class屬性，并在其中引用我們在CSS文件中定義的類名，“myDiv”：<p>這是一個<div class="myDiv">紅色的div</div>！</p>如上代碼所示，我們在div標簽中使用了“class”屬性，并引用了CSS文件中定義的樣式類名。 最后，讓我們來檢查一下我們的代碼是否按照預期工作： - 效果是正確的，div具有紅色背景、白色字體和10像素內邊距； - 我們的代碼更加易于維護并且具有更好的可讀性。 在這篇文章中，我們學習了如何在div中引入CSS樣式。我們了解了將CSS樣式從HTML文件中分離出來的原因，并學習了如何將它們應用到我們的div元素中。