如何在 HTML 中使用內部 CSS(樣式表)?


層疊樣式表用於設定網頁的顯示樣式。

CSS 用於設定和佈局網頁的樣式,可以透過使用 CSS 屬性來控制網頁的顯示樣式,例如更改內容的字型、顏色、大小和間距,將其拆分為多個列,或新增動畫及其他裝飾元素。

內部 CSS

內部 CSS 用於在樣式標籤中定義單個 HTML 頁面。它在 HTML 頁面的 <head> 標籤內、<style> 標籤元素中進行定義。

示例

以下示例程式在 HTML 中使用內部 CSS 進行樣式設定。

<!DOCTYPE html> <html> <head> <style> body {background-color:tan;} h1 {color: whitesmoke; font-family: cursive} p {color:whitesmoke; background-color: dimgrey; font-family: monospace} </style> </head> <body> <h1>HTML-HyperText Markup Language </h1> <p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</p> </body> </html>

示例

以下示例程式在 HTML 中使用內部 CSS 對 <ol> 元素進行樣式設定。

<!DOCTYPE html> <html> <head> <style> ol.a { list-style-type: upper-roman; } </style> </head> <body> <h2>List</h2> <ol class = "a" > <li>GOT</li> <li>HOTD</li> <li>HBO</li> </ol> </body> </html>

示例

以下示例程式在 HTML 中使用內部 CSS 對 <table> 元素進行樣式設定。

<!DOCTYPE html> <html> <head> <title>Inline CSS</title> <style> table, th, td { border: 3px solid; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>SS</td> <td>Rajamouli</td> </tr> <tr> <td>Prashant</td> <td>Neel</td> </tr> </table> </body> </html>

更新日期:2022 年 11 月 11 日

4K+ 瀏覽量

職業生涯突飛猛進

透過完成課程獲得認證

入門
廣告
© . All rights reserved.