如何使用 `` 标签为 HTML 元素设置样式？

我们使用 `` 标签来为文本的一部分或文档的一部分着色。此标签主要用于将类似的内容组合在一起，以便于设置样式。我们对 `` 标签使用内联样式，因为它将样式应用于内联元素。

如果我们想使某些文本或任何其他内容与其他内容不同，我们将其包装在 `` 标签中，并添加 class 属性以进行识别，然后添加属性值以进行样式设置。

语法

以下是 `` 标签的语法。

<span class=" ">Text…</span>

示例 1

下面是一个使用 `` 标签设置 HTML 元素样式的示例。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>
      <span style="color:green;font-weight:bolder">
         Major Sandeep Unnikrishnan</span>was an officer in the Indian Army serving in the elite 51 Special Action Group of the National Security Guards. He was martyred in action during the November 2008 Mumbai attacks.
      <span style="background-color: yellow;"> He was consequently awarded the Ashoka Chakra, India's highest peacetime gallantry award, on 26 January 2009 by the president Pratibha Patil.</span>
   </p>
</body>
</html>

以下是上述示例程序的输出。

示例 2

下面是一个使用 `` 标签设置 HTML 元素样式的示例。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>
      <span style="text-transform: uppercase; font-weight:bolder">
      Major Sandeep Unnikrishnan</span> was an officer in the Indian Army serving in the elite 51 Special Action Group of the National Security Guards. He was martyred in action during the November 2008 Mumbai attacks.
      <span style="font-family:cursive; color: green"> He was consequently awarded the Ashoka Chakra, India's highest peacetime gallantry award, on 26 January 2009 by the president Pratibha Patil.</span>
   </p>
</body>
</html>

以下是上述示例程序的输出。

示例 3

您可以尝试运行以下代码来学习 `` 标签的使用方法。在这里，我们将在 `

` 标签内使用 `` 标签。

<!DOCTYPE html>
<html>
<head>
   <title>HTML span Tag</title>
</head>
<body>
   <p>Java is a Programming language widely followed. <span style = "color:#FF0000;">Developed by James Gosling. </span>This is demo text.</p>
   <p>
   <span style = "color:#8866ff;">
   Current Version: 1.8 </span> </p>
</body>
</html>

更新于： 2022年10月19日

2K+ 次浏览