Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengesot teks dalam HTML menggunakan CSS?

Bagaimana untuk mengesot teks dalam HTML menggunakan CSS?

王林ke hadapan: 2023-09-11 15:57:031511semak imbas

如何使用 CSS 缩进 HTML 中的文本？

HTML, Hypertext Markup Language, digunakan untuk mencipta struktur halaman web. Selain itu, CSS ialah bahasa lembaran gaya yang digunakan untuk menggayakan penampilan visual halaman ini.

Indentation ialah salah satu aspek penting dalam pemformatan teks pada halaman web, kerana ia membolehkan penciptaan offset visual pada permulaan perenggan. atau blok teks. Lekukan boleh digunakan untuk menjadikan teks lebih mudah dibaca dan mewujudkan rasa struktur dalam dokumen.

Indentasi dalam CSS

CSS atau Cascading Style Sheets ialah alat berkuasa yang membolehkan kami mengawal persembahan visual elemen HTML pada halaman web. Menggunakan CSS, kita boleh menggayakan teks, menukar fon, saiz, warna dan juga lekukannya.

Dalam CSS, lekukan mencipta pemisahan visual antara elemen dengan menambahkan ruang atau padding di sebelah kiri atau kanan elemen. Ia membantu meningkatkan kebolehbacaan dan struktur halaman web dengan mewujudkan pemisahan yang jelas antara bahagian atau blok kandungan yang berbeza.

Terdapat pelbagai cara untuk mengesot teks dalam HTML menggunakan CSS. Di sini kita akan membincangkan dua kaedah biasa.

Kaedah 1: Gunakan atribut inden teks
Kaedah 2: Gunakan atribut padding-left

Kaedah 1: Gunakan atribut inden-teks

Atribut inden teks digunakan untuk mencipta ruang mendatar pada permulaan baris pertama teks dalam elemen. Ia sering digunakan untuk membuat perenggan inden atau blok teks yang berasingan daripada kandungan sekeliling. Nilai inden teks boleh ditentukan dalam piksel, em atau sebagai peratusan lebar elemen yang mengandungi.

tatabahasa

Berikut ialah sintaks untuk mengesot teks dalam HTML menggunakan CSS -

css selector {
   text-indent: value;
}

Contoh

Berikut ialah contoh menggunakan atribut text-indent untuk mengesot teks dalam HTML. Dalam contoh ini, kami mengesot baris pertama perenggan yang dipilih dengan 2em.

<!DOCTYPE html>
<html>
<head>
   <style>
      h3 {
         text-align: center;
      }
      .indented-p {
         text-indent: 2em;
      }
   </style>
</head>
   <body>
      <h3>This is an example of a text-indent property.</h3>
      <p class="indented-p">This is an indented paragraph. 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</p>
      <p>This is a simple paragraph. 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.</p>
   </body>
</html>

Kaedah 2: Gunakan atribut padding-left

sifat padding-left digunakan untuk mencipta ruang antara tepi kiri elemen dan kandungannya. Ia sering digunakan untuk membuat blok teks yang diinden, seperti senarai bertitik tumpu atau petikan blok. Nilai padding-left boleh ditentukan dalam piksel, em, atau sebagai peratusan lebar elemen yang mengandungi.

tatabahasa

css selector {
   padding-left: value;
}

Contoh

Berikut ialah contoh menggunakan atribut padding-left untuk mengesot teks dalam HTML. Dalam contoh ini, sifat padding-left akan digunakan untuk menambah 40 piksel ruang ke sebelah kiri perenggan.

<!DOCTYPE html>
<html>
<head>
   <style>
      h3 {
         text-align: center;
      }
      .indented-p {
         padding-left: 40px;
      }
   </style>
</head>
   <body>
      <h3>This is an example of a padding-left property.</h3>
      <p class="indented-p">This is an indented paragraph. 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</p>
      <p>This is a simple paragraph. 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.</p>
   </body>
</html>

KESIMPULAN

Inden ialah aspek penting dalam pemformatan teks dalam pembangunan web. Dengan CSS, kita boleh mengesot teks dengan mudah dalam HTML menggunakan sifat teks-inden atau padding-left. Kedua-dua kaedah adalah berkesan dan boleh digunakan bergantung pada keperluan khusus tapak web.

Atas ialah kandungan terperinci Bagaimana untuk mengesot teks dalam HTML menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html 样式表 padding

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk memilih secara rekursif semua elemen kanak-kanak menggunakan CSS?Artikel seterusnya：Bagaimana untuk memilih secara rekursif semua elemen kanak-kanak menggunakan CSS?

Artikel berkaitan

Lihat lagi