如何使用 `` 標籤為 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+ 次瀏覽