如何在 HTML 中使用内部 CSS(样式表)?

htmlweb developmentfront end technology更新于 2024/6/29 0:44:17

层叠样式表用于格式化网页的呈现方式。

CSS 用于设置网页的样式和布局——您可以使用 CSS 来控制网页的呈现方式，例如更改内容的字体、颜色、大小和间距，将其拆分为多列，或添加动画和其他 CSS 属性中可用的装饰功能。

内部 CSS

内部 CSS 用于在单个 HTML 页面的样式标签内定义。它在 HTML 页面的 <head> 标签内的 <style> 标签元素内定义。

示例

以下是示例程序，使用内部 CSS 在 HTML 中进行样式设置。


<!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>

示例

以下是示例程序，使用内部 CSS 为 HTML 中的 <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>

示例

以下是示例程序，使用内部 CSS 为 HTML 中的 <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>