如何使用CSS更改段落文字的大小寫?


CSS(層疊樣式表)是控制網站上文字佈局和外觀的強大工具。在本文中,我們將學習如何使用CSS更改段落文字的大小寫。

在網站文字樣式方面,最基本和常見的樣式選項之一是更改文字的大小寫,我們可以使用CSS中的`text-transform`屬性輕鬆實現這一點。`text-transform`屬性可以取以下值之一:

  • "capitalize" 將使所選元素中每個單詞的首字母大寫。

  • "uppercase" 將把所選元素中的所有文字轉換為大寫字母。

  • "lowercase" 將把所選元素中的所有文字轉換為小寫字母。

要更改段落文字的大小寫,首先我們需要使用CSS選擇器選擇段落元素。例如,要將段落文字更改為大寫,我們將使用以下CSS:

p {
   text-transform: uppercase;
} 

示例

這是一個使用CSS更改段落文字大小寫的示例。

<html>
<head>
   <title>Change the cases of text in paragraphs using CSS</title>
   <style>
      body{
         text-align:center;
      }
      .capitalize{
         color: blue;
         text-transform: capitalize;
      }
      .uppercase{
         color: red;
         text-transform: uppercase;
      }
      .lowercase{
         color: green;
         text-transform: lowercase;
      }
   </style>
</head>
<body>
   <h2>Change the cases of text in paragraphs using CSS</h2>
   <p class="capitalize">capitalize the first letter of each word in the selected element</p>
   <p class="uppercase">Converted all the text in the selected element to uppercase letters</p>
   <p class="lowercase">CONVERTED ALL THE TEXT IN SELECTES ELEMENT TO LOWERCASE LETTERS</p>
</body>
</html>

結論

要更改段落文字的大小寫,CSS中的`text-transform`屬性是更改段落文字大小寫的好方法。

更新於:2023年3月9日

610 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.