嵌入式 CSS 可以直接在 HTML 頁面中嵌入樣式,從而改變文本或圖像的顏色、大小、布局等。下面是關于嵌入式 CSS 用法的詳細介紹。
首先,在 HTML 頁面中使用 <style> 標簽來嵌入 CSS 樣式:
<head> <title>嵌入式 CSS</title> <style> p { color: red; font-size: 20px; } </style> </head>
在上面的例子中,<style> 標簽的內容定義了所有 <p> 標簽的樣式:文本顏色為紅色,字號為 20 像素。
當然,還可以指定某個具體的標簽的樣式:
<head> <title>嵌入式 CSS</title> <style> .important { font-weight: bold; color: blue; } </style> </head> <body> <p>這是一段普通的文本</p> <p class="important">這是重要的內容</p> </body>
在上面的例子中,<style> 標簽定義了名為“important”的 CSS 類,它將文本字體加粗并設置為藍色。而在 HTML 頁面中,我們使用 class 屬性為某個 <p> 標簽指定了該 CSS 類,從而該標簽的樣式就受到了影響。
除了基本的樣式設置,嵌入式 CSS 還支持許多其他的 CSS 屬性和選擇器,例如:
/* 將所有表格的邊框設置為 1 像素粗的實線 */ table { border: 1px solid black; } /* 隔行變色 */ tr:nth-child(even) { background-color: #f2f2f2; } /* 鼠標懸停時背景顏色變為淺藍色 */ a:hover { background-color: lightblue; }
總之,嵌入式 CSS 是一種簡單靈活的樣式設置方式,可以讓我們更加方便地為網頁添加樣式,提高網頁的美觀度和可讀性。