如何在 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>
廣告
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP