hujung hadapan web
tutorial css
Bagaimana untuk menukar warna teks yang dipilih menggunakan CSS?
Bagaimana untuk menukar warna teks yang dipilih menggunakan CSS?
Penggayaan teks pada tapak web ialah aspek penting dalam reka bentuk dan pembangunan web. Untuk tujuan ini, CSS (Cascading Style Sheets) ialah alat berkuasa yang boleh anda gunakan. CSS ialah alat serba boleh yang membolehkan penampilan teks dimanipulasi dalam pelbagai cara. Salah satu teknik yang paling dicari ialah menukar warna teks yang dipilih. Dalam artikel ini, kita akan mempelajari dua teknik untuk menukar warna teks yang dipilih menggunakan CSS.
::Pilih unsur pseudo
::elemen pseudo-pilihan ialah ciri berkuasa yang membolehkan kami memilih dan menggayakan teks yang diserlahkan oleh pengguna pada masa ini. Untuk menukar warna teks yang dipilih, kami menggunakan sifat warna. Contohnya, jika kami mahu teks yang dipilih kelihatan merah marun, kami akan menggunakan CSS berikut -
::selection {
color: red;
}
Ini akan menukar warna teks yang dipilih bagi keseluruhan halaman web kepada merah.
Contoh
Contoh berikut menukar warna teks yang dipilih kepada merah dan warna latar belakang kepada hitam.
<html >
<head>
<title>Change the color of selected text using CSS?</title>
<style>
::selection {
color: red;
background-color:black;
}
</style>
</head>
<body>
<h2>Changing the color of selected text using CSS</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting</p>
</body>
</html>
Dengan menggunakan elemen atau kelas tertentu
Kami boleh menukar warna dan warna latar belakang teks yang dipilih pada elemen atau kelas tertentu. Sebagai contoh, kita boleh menukar warna teks yang dipilih di dalam teg "h1" tertentu menggunakan CSS berikut -
h1::selection {
background: red;
color: white;
}
Ini akan menukar warna teks yang dipilih dalam elemen h1 kepada putih dan warna latar belakang teks yang dipilih kepada merah.
Contoh
Contoh berikut menukar warna teks
yang dipilih kepada putih dan warna latar belakang kepada merah, teks kepada merah dan warna latar belakang kepada kuning,
teks kepada biru dan warna latar belakang kepada merah jambu.
<html>
<title>Change the color of selected text using CSS</title>
<style>
h1::selection {
background: red;
color: white;
}
h2::selection {
background: yellow;
color: red;
}
p::selection {
background: pink;
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to tutorialsPoint</h1>
<h2>Change the color of selected text using CSS</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting</p>
</body>
</html>
Kesimpulan
Menukar warna teks yang dipilih menggunakan CSS adalah tugas yang mudah dan boleh dicapai dengan memanfaatkan ::selection pseudo-element. Dengan menggunakan sifat warna dan warna latar belakang kami boleh menukar rupa teks yang dipilih di tapak web kami. Selain itu, kita boleh menggunakan ::selection pseudo-element pada elemen atau kelas tertentu untuk mempunyai kawalan yang lebih tepat ke atas penggayaan teks yang dipilih.
Atas ialah kandungan terperinci Bagaimana untuk menukar warna teks yang dipilih menggunakan CSS?. 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
1386
52
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
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
