在網頁中使用CSS樣式表可以讓我們更方便的控制網頁的樣式,進而使網頁的外觀更加美觀。下面我們就介紹一下如何在網頁中使用CSS樣式表:
//在HTML文檔中引入CSS樣式表 <link rel="stylesheet" type="text/css" href="./style.css">
在HTML文檔中,我們可以使用link標簽添加CSS樣式表,其中href屬性指定CSS樣式表的路徑。如果CSS樣式表放在與HTML文檔同一目錄下,我們可以直接寫文件名,如上例。
//在CSS文件中定義樣式 h1 { color: blue; font-size: 36px; } p { color: gray; font-size: 18px; }
在CSS文件中,我們可以通過標簽選擇器為HTML文檔中的元素添加樣式,比如對h1標簽和p標簽添加了不同的樣式。上述代碼中,我們為h1標簽設置了藍色字體和36px的字號,為p標簽設置了灰色字體和18px的字號。
通過CSS樣式表,我們還可以為不同的頁面元素添加類和ID,進一步控制它們的樣式。如下代碼所示:
//在CSS文件中定義類和ID選擇器 .title { color: red; font-size: 24px; } #intro { color: green; font-size: 14px; }
在HTML文檔中,我們可以通過class和id屬性來引用這些類和ID選擇器:
//在HTML文檔中引用類和ID選擇器 <h2 class="title">新聞標題</h2> <p id="intro">這是一段新聞的簡介</p>
上述代碼中,為h2標簽添加了title類,因此它的字體顏色為紅色,字號為24px。而p標簽的id為intro,因此它的字體顏色為綠色,字號為14px。
總之,在網頁中使用CSS樣式表可以極大地方便我們控制網頁的樣式,只需要在CSS文件中定義好樣式,然后在HTML文檔中引用即可。