首頁 > 文章 > web前端 > 如何使用 @counter-style 規則使用 CSS 自訂清單項目？

如何使用 @counter-style 規則使用 CSS 自訂清單項目？

PHPz轉載: 2023-09-10 21:25:021464瀏覽

如何使用 @counter-style 规则使用 CSS 自定义列表项？

清單是Web開發的基本部分，用於以有組織和結構化的方式呈現資訊。在HTML中，有3種類型的清單：有序列表、無序列表和定義列表。然而，當我們需要根據要求設計清單時，樣式化這些清單可能會具有挑戰性。 CSS提供了@counter-style規則，它允許我們以更靈活和創造性的方式自訂清單項目標記。

在本文中，我們將學習如何使用@counter-style規則來使用CSS自訂清單項目。 @counter-style規則用於定義不屬於預先定義樣式集的計數器樣式，並定義如何將計數器值轉換為字串表示。

什麼是@counter-style？

The @counter-style rule is used to define a counter style that can be used in conjunction with the CSS counter property. This rule is used to define a custom list item marker style. The counter properused to define a custom list item marker style. The counter property allows us tocrement increment a counter, which is used to generate content for pseudo-elements like :before and :after.

文法

@counter-style name {
   // write all the CSS styles properties and values
}

The name parameter is used to specify the name of the counter style that we are defining. Within the curly braces, we can define a set of properties and values that control the appearance of the counter. Some of the properties that use include −

System − 它指定要使用的編號系統，例如十進位、小寫字母、大寫羅馬數字等。
符號 - 它指定了計數器每個層級使用的符號。
後綴 − 它指定在計數器值之後添加的後綴。
Prefix − It specifies the prefix to add before the counter value.
Pad − 它指定在顯示計數器值時要使用的最小位元數。

Steps to use @counter-styles Rule in CSS

以下是CSS中使用@counter-styles規則的步驟 -

Step 1: Create an Ordered List

第一步是建立一個有序列表，並使用我們自己的列表項目標記進行自訂。在下面的範例中，我們希望使用羅馬數字而不是預設的編號系統。以下是我們清單的HTML程式碼 −

<ol>
   <li>Learn to code in python</li>
   <li>Learn to code in java</li>
   <li>Learn to code in c++</li>
</ol>

Step 2: Define the @counter-style

@counter-style my-numerals {
   system: upper-roman;
   symbols: I II III IV V VI VII VIII IX X;
}

In the above code, we have defined a counter style named my-numerals and set the system property to upper-roman which means the counter will be set to use the uppercase Roman numerpartals in the list. Apart from this, wewet also set the symbol's property to a string of Roman numerals from I to X.

Step 3: CSS Styles

ol {
   counter-reset: section;
}
li {
   counter-increment: section;
   list-style: none;
}
li:before {
   content: counter(section, my-numerals) ". ";
   margin-right: 10px;
}

在上述程式碼中，counter-reset屬性被設定為ol元素的section，這表示計數器將從0開始。在這裡，我們也為每個li元素設定了counter-increment屬性的section。

Example 1

的翻譯為：

範例1

<html>
<head>
   <title>Example to use @counter-style to customize the List Item Markers using CSS</title>
   <style>
      /* Defining a custom counter style to have the list as upper roman numerals */
      @counter-style roman-numerals {
         system: upper-roman;
         symbols: I II III IV V VI VII VIII IX X;
      }
      /* applying the custom counter style to the ordered list */
      ol {counter-reset: section; }
      /* incrementing the counter for each list item */
      li {counter-increment: section; list-style: none;}
      /* using the counter value to display the custom list item marker */
      li:before {
         content: counter(section, roman-numerals) ". ";
         margin-right: 8px;
         color: green;
         font-size: 15px;
      }
   </style>
</head>
<body>
   <h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
   <p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
   <ol>
      <li>Learn to code in python</li>
      <li>Learn to code in java</li>
      <li>Learn to code in c++</li>
   </ol>
</body>
</html>

In the example above, we have defined a custom counter style named my-roman using the @counter-style rule. Here, we have set the system property to upper-roman to use the uppercase Roman numerals andymso set the use the uppercase Roman numerals andymso set the use. property to a string of Roman numerals from I to X.

在此之後，我們使用counter-reset屬性將自訂計數器樣式套用至有序列表，並使用counter-increment屬性為每個列表項目遞增計數器，並使用list-style屬性移除了預設的列表項標記。

最後，為了使用羅馬數字顯示自訂清單項目標記，我們使用了:before偽元素，透過content屬性和counter函數（有兩個參數：計數器的名稱（在本例中為section）和計數器樣式的名稱（在本例中為roman-numerals））。

Example 2

的中文翻譯為：

範例2

<html>
<head>
   <title>Example to use @counter-style to customize the List Item Markers using CSS</title>
   <style>
      /* removing the default list item markers */
      ul { list-style: none;}
      /* using images as list item markers */
      li:before {
         content: "";
         display: inline-block;
         width: 25px;
         height: 25px;
         background-image: url("yourimage.png");
         background-repeat: no-repeat;
         margin-right: 8px;
      }
   </style>
</head>
<body>
   <h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
   <p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
   <ol>
      <li>Learn to code in python</li>
      <li>Learn to code in java</li>
      <li>Learn to code in c++</li>
   </ol>
</body>
</html>

在上面的範例中，我們使用了list-style屬性來刪除無序列表元素的預設清單項目標記。此外，我們也使用了:before偽元素來顯示列表項，借助content屬性和空字串。

我們已將display屬性設為inline-block，以確保圖像已正確顯示，並將寬度和高度屬性設為標記圖像的大小。我們使用background-image屬性指定標記影像的URL，並使用background-repeat屬性防止影像重複。最後，我們使用margin-right屬性在圖像右側添加了一些邊距。

Conclusion

在處理HTML清單時，可以使用CSS中的@counter-style規則來自訂清單項目標記的外觀。這個規則提供了一種簡單而靈活的方式來定義有序列表的自訂樣式。 @counter-style規則的語法包括幾個參數，如system、symbols、suffix、prefix和pad。這些參數允許對清單項目標記的外觀進行修改。使用@counter-style規則，可以更輕鬆地建立與目前專案設計需求相符的清單項目標記。

以上是如何使用 @counter-style 規則使用 CSS 自訂清單項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html String define for include 字符串 using Property symbol this display margin 伪元素 background li

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：從零開始學習CSS3：逐步掌握核心技術下一篇：從零開始學習CSS3：逐步掌握核心技術

看更多