如何在 HTML 中使用 style 属性?

htmlweb developmentfront end technology更新于 2024/8/11 14:36:17

本文将介绍如何在 HTML 中使用 style 属性。

HTML 样式本质上是一组规则，用于指定页面在浏览器中的显示方式。样式信息可以包含在 HTML 文档中，也可以作为单独的文档提供。在 HTML 中，样式可以通过 3 种不同的方式应用。

让我们逐一了解如何在 HTML 中使用 style 属性。

内联样式

style 属性用于内联样式，可以直接在起始标记内写入 CSS 规则。style 属性包含许多 CSS 属性和值对。任何适用样式集的样式属性都将被此属性全局覆盖。

我们来看以下示例

示例

在下面的示例中，我们使用了 onload 方法。

<!DOCTYPE html>
<html>
<body>
   <h1 style="color:#2ECC71 ;font-size:25px;">
      Welcome To TutorialsPoit
   </h1>
   <p style="color:#3498DB;">The Best E-Way Learning</p>
   <p style="color:#E74C3C ;">Where You Can Learn Lot Of Courses</p>
</body>
</html>

脚本执行后，将生成一个输出，显示应用于网页上脚本文本的样式。

使用外部样式

当需要将 CSS 应用于多个网页时，外部样式表方法会很有帮助。所有样式指南都包含在一个外部样式表中，您可以从网站的 HTML 页面链接该样式表。</p

示例

考虑以下示例

<!DOCTYPE html> 
<html> 
   <style> 
     body { 
       background-color: #D5F5E3 ; 
     } 
     h1 { 
       color: #A9CCE3; 
     } 
     p { 
       color: #FAD7A0 ; 
     } 
   </style> 
   <body> 
      <h1>Welcome To Tutorialspoint</h1> 
      <p>The Best E-Way Learning</p> 
   </body>
</html>

执行上述脚本后，它将提供包含应用于网站文本的样式的输出。

嵌入样式

内部样式表对其嵌入的文档之外没有任何影响。HTML 文档的 <head> 部分中的 <style> 标签用于声明嵌入的样式表。

示例

以下是嵌入样式的示例

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color:#D6EAF8;
      }
      h1 {
         color:#D2B4DE ;
         font-family: arial;
      }
      p {
         color:#5DADE2;
         font-family: verdana;
      }
	</style>
</head>
<body>
   <h1>Tutorials Point originated from the</h1>
   <p> idea that there exists a class of readers who respond better</p>
</body>
</html>

当脚本执行时，它将生成一个输出，显示网页上应用样式的代码中使用的文本。