Cara membuat gaya coretan menggunakan CSS

CSS ialah bahasa helaian gaya yang boleh digunakan untuk mentakrif dan mereka bentuk rupa dan format dokumen HTML. Dalam CSS, coretan ialah gaya biasa yang sering digunakan dalam halaman web untuk mewakili kandungan yang telah atau tidak lagi sah. Artikel ini akan menerangkan cara membuat gaya coretan menggunakan CSS.

1. sifat hiasan teks

Untuk mencipta gaya coretan menggunakan CSS, anda boleh menggunakan sifat hiasan teks. Atribut hiasan teks boleh digunakan untuk menambah hiasan teks, termasuk garis bawah, garis atas, coretan, dsb. Untuk menambah gaya coretan, cuma tetapkan atribut hiasan teks kepada "baris melalui":

p {
    text-decoration: line-through;
}

Kod di atas akan menggunakan gaya coretan pada semua elemen perenggan (p). Jika anda hanya mahu menggunakan coretan dalam elemen tertentu, anda boleh menggantikan pemilih dengan nama kelas atau ID elemen tersebut.

2. sifat baris hiasan-teks

Terdapat juga sifat baris hiasan-teks dalam CSS, yang hanya mengawal jenis hiasan teks. Oleh itu, daripada menggunakan sifat hiasan teks, anda boleh menetapkan baris hiasan teks kepada "baris melalui". Ini akan membantu memastikan bahawa hiasan teks lain tidak mengganggu coretan.

p {
    text-decoration-line: line-through;
}

3. Warna teks dan warna coretan

Jika anda ingin menyesuaikan warna coretan, anda boleh menggunakan sifat warna hiasan-teks. Sebagai contoh, kod berikut akan menambah coretan biru:

p {
    text-decoration: line-through;
    text-decoration-color: blue;
}

Selain itu, jika anda hanya mahu menukar warna coretan, tanpa menukar warna teks, anda boleh menggunakan baris hiasan teks harta warna. Seperti yang ditunjukkan di bawah, ia akan menetapkan warna coretan kepada merah:

p {
    text-decoration-line: line-through;
    text-decoration-color: red;
}

4. Kedudukan dan gaya pukulan

Anda juga boleh menggunakan atribut gaya hiasan teks Tukar gaya strikethrough. Sifat gaya hiasan teks mengawal jenis garisan coretan, termasuk garisan pepejal, putus-putus, bertitik dan beralun:

p {
    text-decoration-line: line-through;
    text-decoration-style: dotted;
}

Selain itu, anda boleh menggunakan sifat kedudukan hiasan-teks untuk mengawal peletakan coretan dalam lokasi teks dalam. Potongan boleh diletakkan di bawah atau di atas teks (secara lalai). Contohnya, ini akan meletakkan coretan di atas teks:

p {
    text-decoration-line: line-through;
    text-decoration-position: over;
}

Dalam CSS, terdapat banyak pilihan untuk menyesuaikan gaya coretan. Anda boleh menukar warna, gaya dan kedudukannya mengikut keperluan anda. Selain itu, anda boleh menetapkan garisan-hiasan teks kepada "garis-garis" dan warna-hiasan teks kepada warna yang anda inginkan untuk memastikan hiasan teks lain tidak mengganggu coretan anda.

Atas ialah kandungan terperinci Cara membuat gaya coretan menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!