Jadual Kandungan
Apakah itu @gaya kontra?
tatabahasa
Langkah untuk menggunakan Peraturan @counter-styles dalam CSS
Langkah 1: Buat Senarai Tertib
Langkah 2: Tentukan @gaya balas
Langkah 3: Gaya CSS
Contoh 2
Kesimpulan
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?

Sep 10, 2023 pm 09:25 PM

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

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
}
Salin selepas log masuk

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>
Salin selepas log masuk

Langkah 2: Tentukan @gaya balas

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

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;
}
Salin selepas log masuk

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>
Salin selepas log masuk

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 bagi

Contoh 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>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses 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 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 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 &#039; 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 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 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) 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 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? 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.

See all articles