如何在 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.