CSS 資料型別 - <string>



CSS 資料型別<string>表示文字或字元字串。它用於各種屬性中來指定文字內容,例如偽元素 (::before 和 ::after) 上下文中 content 屬性。<string> 資料型別用於插入文字文字或動態生成文字內容。

  • 構成 <string> 資料型別的 Unicode 字元用雙引號 (“”) 或單引號 (') 括起來。

  • 幾乎所有字元都有直接的表示形式。

    或者,所有字元都可以用其對應的十六進位制 Unicode 程式碼點表示,前面帶有反斜槓 (\)。雙引號 (\22)、單引號 (') 和版權符號 (©) 分別用 \22、\27 和 \A9 表示。

  • 要輸出換行符,請使用換行符 (\A 或 \00000A) 轉義它們。如果字串跨越多行,則字串中每行的最後一個字元應為 \。

CSS <string> - 基本示例

以下示例演示了在 content 屬性中使用 <string> 資料型別。

<html>
<head>
<style>
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f4f4f4;
   }
   .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
   }
   .box {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: #ed8013;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
   .box::before {
      content: "\"Life\" is never 'fair', And perhaps it is good thing for most of us that it is \'not\'." " - Oscar Wilde";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
廣告
© . All rights reserved.