如何使用 @counter-style 規則使用 CSS 自訂清單項目？
- PHPz轉載
- 2023-09-10 21:25:021495瀏覽
清單是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中文網其他相關文章！