CSS樣式在網頁設計中非常重要,這篇文章將討論樣式應該寫在哪個文件中。
在 HTML 文檔中,最好的位置是在 head 中通過<style>
標簽定義 CSS 樣式。這樣可以使頁面加載時同時加載 CSS 樣式,避免頁面元素首先呈現了無樣式的頁面,再逐漸添加樣式的尷尬情況。以下是一些樣式應寫在<head>中的例子:
1)全局樣式
<head> <style> body { font-family: Arial, sans-serif; color: #333; } h1 { font-size: 36px; } </style> </head>
2)局部樣式
<head> <style> .my-class { background-color: #ccc; } #my-id { font-weight: bold; } </style> </head>
3)響應式樣式
<head> <style> @media (max-width: 768px) { body { background-color: white; } } </style> </head>
另外,如果您只有幾個樣式規則,可以使用內聯樣式。
<div style="color: red; font-size: 20px;"> 這是紅色字體,字號為20px。 </div>
總而言之,最佳實踐是將 CSS 樣式放在<head>
標簽中,這樣可以避免頁面加載時出現無樣式元素。