Penggunaan inden teks dalam CSS-tutorial css-php.cn

Penggunaan inden teks dalam CSS

王林

Lepaskan： 2024-02-20 09:02:35

asal

1447 orang telah melayarinya

Penggunaan inden teks dalam CSS

Penggunaan inden teks dalam CSS memerlukan contoh kod khusus

CSS ialah bahasa helaian gaya yang digunakan untuk mentakrifkan gaya dan reka letak elemen dalam dokumen HTML. Antaranya, inden teks ialah sifat dalam CSS, digunakan untuk menetapkan lekukan baris pertama blok teks. Artikel ini akan memperkenalkan penggunaan atribut text-indent dan menyediakan beberapa contoh kod khusus.

1. Penggunaan asas atribut text-indent
Atribut text-indent digunakan untuk menentukan lekukan baris pertama blok teks dan boleh digunakan untuk perenggan, senarai, tajuk dan elemen lain. Ia ialah nilai integer bukan negatif dalam piksel, peratusan atau ems. Nilai positif menunjukkan lekukan ke kanan, nilai negatif menunjukkan lekukan ke kiri. Sintaks asas adalah seperti berikut:

selector {
  text-indent: value;
}

Salin selepas log masuk

Antaranya, pemilih ialah pemilih elemen yang hendak digayakan, dan nilai ialah nilai inden bagi baris pertama.

2. Lekukan baris pertama berdasarkan unit piksel
Untuk menetapkan lekukan baris pertama dalam unit piksel untuk blok teks, anda boleh menentukan secara langsung nilai positif atau negatif. Sebagai contoh, untuk menetapkan inden baris pertama perenggan kepada 30 piksel, anda boleh menggunakan kod berikut:

p {
  text-indent: 30px;
}

Salin selepas log masuk

Dengan cara ini, baris pertama semua elemen perenggan (

) akan diinden 30 piksel ke kanan.

3 Lekukan baris pertama berdasarkan unit peratusan
Atribut inden teks juga menyokong penggunaan peratusan sebagai unit. Dalam kes ini, nilai lekukan baris pertama akan dikira secara relatif kepada lebar elemen induk. Contohnya, untuk menetapkan lekukan baris pertama perenggan kepada 50% daripada lebar elemen induk, anda boleh menggunakan kod berikut:

p {
  text-indent: 50%;
}

Salin selepas log masuk

Dengan cara ini, baris pertama semua perenggan (

) elemen akan diinden ke kanan dengan lebar elemen induk 50%.

4. Lekukan baris pertama berdasarkan unit em
Atribut inden teks juga menyokong penggunaan em sebagai unit. Unit em ialah gandaan saiz fon elemen itu sendiri. Contohnya, untuk menetapkan lekukan baris pertama perenggan kepada 2 kali ganda saiz fon, anda boleh menggunakan kod berikut:

p {
  text-indent: 2em;
}

Salin selepas log masuk

Dengan cara ini, baris pertama semua elemen perenggan (

) akan menjadi inden 2 kali ganda saiz fon ke saiz yang betul.

5 Kesan menginden baris pertama berbilang perenggan

<!DOCTYPE html>
<html>
<head>
<style>
p.indent {
  text-indent: 30px;
}
</style>
</head>
<body>

<h2>多段落首行缩进示例</h2>

<p class="indent">这是一个缩进的段落。</p>
<p class="indent">这是另一个缩进的段落。</p>
<p>这是一个没有缩进的段落。</p>

</body>
</html>

Salin selepas log masuk

Dalam kod di atas, dengan mentakrifkan nama kelas .indent dan kemudian menggunakan kelas ini pada elemen perenggan yang memerlukan lekukan baris pertama, anda boleh mencapai berbilang perenggan. dengan kesan yang baik inden baris pertama.

6. Summary
text-indent ialah sifat dalam CSS yang digunakan untuk menetapkan lekukan baris pertama blok teks. Ia boleh ditetapkan dalam unit seperti piksel, peratusan dan ems. Di atas ialah penggunaan asas atribut teks-inden dan beberapa contoh kod khusus saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Penggunaan inden teks dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!