Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menyesuaikan item senarai menggunakan CSS menggunakan peraturan gaya @counter?
Bagaimana untuk menyesuaikan item senarai menggunakan CSS menggunakan peraturan gaya @counter?
- PHPzke hadapan
- 2023-09-10 21:25:021477semak imbas
Senarai ialah bahagian penting dalam pembangunan web dan digunakan untuk menyampaikan maklumat secara tersusun dan tersusun. Dalam HTML, terdapat 3 jenis senarai: senarai tersusun, senarai tidak tersusun dan senarai definisi. Walau bagaimanapun, menggayakan senarai ini boleh menjadi mencabar apabila kita perlu mereka bentuk senarai mengikut keperluan. CSS menyediakan peraturan @counter-style, yang membolehkan kami menyesuaikan penanda item senarai dengan cara yang lebih fleksibel dan kreatif.
Dalam artikel ini, kita akan belajar cara menggunakan peraturan gaya lawan untuk menyesuaikan item senarai menggunakan CSS. Peraturan @gaya pembilang digunakan untuk mentakrifkan gaya pembilang yang bukan sebahagian daripada set gaya yang dipratentukan dan mentakrifkan cara nilai pembilang ditukar kepada perwakilan rentetan.
Apakah itu @gaya kontra?
Peraturan gaya balas digunakan untuk menentukan gaya balas yang boleh digunakan bersama dengan sifat pembilang CSS Peraturan ini digunakan untuk menentukan gaya penanda item senarai tersuai kurangkan pembilang, yang digunakan untuk menjana kandungan bagi elemen pseudo seperti :sebelum dan :selepas.
tatabahasa
@counter-style name {
// write all the CSS styles properties and values
}
Parameter nama digunakan untuk menentukan nama gaya pembilang yang kami tentukan Dalam pendakap kerinting, kami boleh menentukan satu set sifat dan nilai yang mengawal penampilan pembilang yang boleh kita gunakan termasuk −
Sistem − Ia menentukan sistem penomboran untuk digunakan, seperti perpuluhan, huruf kecil, angka Rom besar, dsb.
simbol - Ini menentukan simbol yang digunakan untuk setiap tahap pembilang.
Akhiran − Ia menentukan akhiran yang ditambah selepas nilai pembilang.
Awalan − Ia menentukan awalan untuk ditambah sebelum nilai pembilang.
Pad − Ia menentukan bilangan minimum digit untuk digunakan apabila memaparkan nilai pembilang.
Langkah untuk menggunakan Peraturan @counter-styles dalam CSS
Berikut ialah langkah untuk menggunakan peraturan @counter-styles dalam CSS -
Langkah 1: Buat Senarai Tertib
Langkah pertama ialah membuat senarai tersusun dan menyesuaikannya dengan tag item senarai kami sendiri. Dalam contoh di bawah, kami ingin menggunakan angka Rom dan bukannya sistem penomboran lalai. Di bawah ialah kod HTML untuk senarai kami −
<ol> <li>Learn to code in python</li> <li>Learn to code in java</li> <li>Learn to code in c++</li> </ol>
Langkah 2: Tentukan @gaya balas
@counter-style my-numerals {
system: upper-roman;
symbols: I II III IV V VI VII VIII IX X;
}
Dalam kod di atas, kami telah mentakrifkan gaya pembilang bernama my-numerals dan menetapkan sifat sistem kepada huruf besar roman yang bermaksud pembilang akan ditetapkan untuk menggunakan angka Rom huruf besar dalam senarai Selain daripada ini, kami juga telah menetapkan sifat simbol kepada rentetan angka Rom dari I hingga X.
Langkah 3: Gaya CSS
ol {
counter-reset: section;
}
li {
counter-increment: section;
list-style: none;
}
li:before {
content: counter(section, my-numerals) ". ";
margin-right: 10px;
}
Dalam kod di atas, atribut set semula balas ditetapkan kepada bahagian elemen ol, yang bermaksud pembilang akan bermula dari 0. Di sini, kami juga menetapkan atribut kenaikan balas bahagian untuk setiap elemen li.
Contoh 1
diterjemahkan sebagai:Contoh 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>
Dalam contoh di atas, kami telah mentakrifkan gaya kaunter tersuai bernama my-roman menggunakan peraturan @counter-style Di sini, kami telah menetapkan sifat sistem kepada huruf besar-rom untuk menggunakan angka Rom huruf besar dan juga menetapkan sifat simbol kepada rentetan angka Rom daripada I hingga X.
Selepas ini, kami menggunakan gaya pembilang tersuai pada senarai tertib menggunakan atribut set semula balas, menambah pembilang untuk setiap item senarai menggunakan atribut kenaikan balas dan mengalih keluar lalai menggunakan item Senarai atribut gaya senarai tag.
Akhir sekali, untuk memaparkan penanda item senarai tersuai menggunakan angka Rom, kami menggunakan elemen pseudo :before, melalui atribut kandungan dan fungsi pembilang (yang mengambil dua parameter: nama pembilang (bahagian dalam kes ini) dan kaunter Nama gaya (nombor-roman dalam kes ini)).
Terjemahan bahasa Cina bagiContoh 2
ialah:Contoh 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>
Dalam contoh di atas, kami menggunakan atribut gaya senarai untuk mengalih keluar penanda item senarai lalai bagi elemen senarai tidak tertib. Selain itu, kami juga menggunakan :before pseudo-element untuk memaparkan item senarai dengan bantuan atribut kandungan dan rentetan kosong.
Kami telah menetapkan atribut paparan kepada inline-block untuk memastikan imej dipaparkan dengan betul, dan atribut lebar dan tinggi kepada saiz imej penanda. Kami menggunakan atribut imej latar belakang untuk menentukan URL imej berteg dan atribut ulang latar belakang untuk mengelakkan pertindihan imej. Akhir sekali, kami menambah sedikit jidar pada sebelah kanan imej menggunakan sifat jidar kanan.
Kesimpulan
Apabila berurusan dengan senarai HTML, anda boleh menggunakan peraturan @counter-style dalam CSS untuk menyesuaikan penampilan teg item senarai. Peraturan ini menyediakan cara yang mudah dan fleksibel untuk menentukan gaya tersuai untuk senarai tersusun. Sintaks peraturan gaya @counter termasuk beberapa parameter, seperti sistem, simbol, akhiran, awalan dan pad. Parameter ini membenarkan pengubahsuaian penampilan penanda item senarai. Menggunakan peraturan gaya @counter memudahkan anda membuat penanda item senarai yang sepadan dengan keperluan reka bentuk projek semasa anda.
Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan item senarai menggunakan CSS menggunakan peraturan gaya @counter?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!