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?
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses
Mar 08, 2025 am 09:45 AM
Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam
Buat borang hubungan JavaScript dengan rangka kerja pintar
Mar 07, 2025 am 11:33 AM
Tutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.
Menambah bayang -bayang kotak ke blok dan elemen WordPress
Mar 09, 2025 pm 12:53 PM
CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)
Mar 04, 2025 am 10:22 AM
Artikel ini meneroka skrip pembina bentuk PHP teratas yang terdapat di Envato Market, membandingkan ciri -ciri, fleksibiliti, dan reka bentuk mereka. Sebelum menyelam ke dalam pilihan tertentu, mari kita faham apa pembina bentuk PHP dan mengapa anda menggunakannya. Borang PHP
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
