Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar warna teks yang dipilih menggunakan CSS?
Bagaimana untuk menukar warna teks yang dipilih menggunakan CSS?
- WBOYke hadapan
- 2023-08-26 14:33:022928semak imbas
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!