coretan teks css

PHPz
Lepaskan: 2023-04-24 09:09:02
asal
158 orang telah melayarinya

Struktur teks CSS ialah kesan gaya teks biasa Anda boleh menambah garis mendatar pada teks untuk menunjukkan bahawa teks telah dipadamkan atau ulasan juga boleh digunakan untuk menekankan perubahan dalam teks.

Dalam reka bentuk web, coretan teks CSS digunakan secara meluas dalam beberapa catatan blog untuk menunjukkan bahawa pengarang telah mengubah suai atau memadamkan kandungan teks asal. Sudah tentu, coretan teks CSS juga boleh digunakan untuk memaparkan harga istimewa atau membuat beberapa teks yang ditekankan khas.

Khususnya, atribut yang digunakan oleh coretan teks CSS ialah hiasan teks, dan nilainya adalah baris, seperti yang ditunjukkan di bawah:

<code>text-decoration: line-through;</code>
Salin selepas log masuk

Selain itu, dalam aplikasi praktikal, Kita boleh juga menggunakan pemilih kelas pseudo CSS untuk mencapai coretan teks yang lebih fleksibel.

Sebagai contoh, kita boleh menambah kesan coretan apabila tetikus melayang ke teks dengan ID demo, seperti yang ditunjukkan di bawah:

<code>#demo:hover {
    text-decoration: line-through;
}</code>
Salin selepas log masuk

Kod di atas bermaksud menambahkan tetikus ke teks dengan ID demo Kesan coretan apabila melayang, iaitu, apabila tetikus bergerak ke atas teks, teks akan muncul coretan.

Jika kita ingin menambah gaya coretan khas, kita boleh menggunakan unsur pseudo CSS :sebelum atau :selepas untuk mencapainya, seperti yang ditunjukkan di bawah:

<code>#demo:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background-color: #000;
}</code>
Salin selepas log masuk

Kod di atas menunjukkan bahawa ID ialah Tambah gaya coretan di hadapan teks demo Warna coretan adalah hitam, lebar menempati keseluruhan lebar teks, ketinggian ialah 1 piksel dan kedudukan berada di tengah-tengah teks.

Perlu diambil perhatian bahawa apabila menggunakan coretan teks CSS, kita juga mesti memberi perhatian kepada isu keserasian. Oleh kerana penyemak imbas yang berbeza mungkin mentafsirkan hiasan teks secara berbeza, elakkan menggunakan kaedah pengubahsuaian gaya khusus penyemak imbas semasa menulis. Adalah disyorkan untuk menggunakan atribut universal.

Atas ialah kandungan terperinci coretan teks css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan