Bagaimana untuk memaparkan elemen perenggan sebaris menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk memaparkan elemen perenggan sebaris menggunakan CSS?

WBOY

Lepaskan： 2023-09-06 16:41:04

ke hadapan

1323 orang telah melayarinya

如何使用 CSS 将段落元素显示为内联？

CSS mempunyai gaya dalaman dan gaya sebaris yang boleh digunakan untuk memaparkan elemen perenggan sebaris. CSS ialah bahasa yang digunakan untuk menggayakan teks HTML dan XML. Menukar sifat paparan unsur HTML ialah tugas CSS biasa. Sifat paparan elemen menunjukkan cara ia harus dipaparkan, seperti blok, sebaris atau blok sebaris. Apabila memaparkan elemen perenggan sebaris, anda mesti mengubah suai sifat paparan daripada nilai blok lalainya kepada sebaris.

Di sini, kita akan belajar cara membangunkan kod CSS yang memaparkan elemen perenggan sebaris.

tatabahasa

<p style="display : inline">..write the paragraph...</p>

Salin selepas log masuk

Perenggan dalam HTML diwakili oleh tag p. Sifat paparan menentukan cara kandungan mengalir.

Elemen yang ditetapkan untuk memaparkan "sebaris" akan muncul sebagai kotak sebaris, bermakna ia akan mengalir dalam baris teks.

Sebaliknya, elemen "blok" akan mengisi keseluruhan lebar bekas induknya dan menambah baris kandungan baharu di bawah mana-mana kandungan sedia ada.

Tajuk, perenggan dan elemen div ialah contoh elemen peringkat blok, manakala pautan, elemen span dan imej ialah contoh elemen sebaris.

Atribut yang digunakan

Atribut berikut yang digunakan dalam contoh ialah -

Warna - Mentakrifkan warna teks.
warna-latar - Tentukan teks menjadi nipis atau tebal.
display - Atribut paparan menentukan tingkah laku paparan.

Contoh

Dalam contoh ini, kita akan mula menggunakan elemen perenggan untuk menyediakan beberapa baris teks. Untuk memaparkan elemen perenggan sebaris, ia menggunakan sifat paparan untuk menetapkan nilai sebaris melalui CSS sebaris. Kemudian gayakan beberapa elemen, seperti badan, p, untuk menarik interaksi pengguna pada halaman web.

<!DOCTYPE html>
<html>
<title>Display paragraph elements as inline using CSS</title>
<head>
</head>
<body style="background-color: powderblue;">
   <center>
      <h1>Rich Dad and Poor Dad</h1>
   </center>
   <p style="background-color:#a89032; color: white; font-style: italic; display: inline;">Rich
      Dad Poor Dad, by Robert Kiyosaki, was initially published in 1997 and immediately became a must-read
      for anybody interested in investment, money, or the global economy. The book has been translated into
      dozens of languages and sold all over the world, becoming the best-selling personal finance book of all
      time. Rich Dad Poor Dad's overriding theme is how to use money as a tool for wealth growth. It debunks
      the idea that the wealthy are born wealthy, explains why your personal residence may not be an asset,
      defines the distinction between an asset and a liability, and much more.
   </p>
   <p style="font-weight: bold; text-align: right; display: inline; color: darkgreen;">@tutorialspoint.com</p>
</body>
</html>

Salin selepas log masuk

KESIMPULAN

Dalam output di atas, kita dapat melihat cara mengawal susun atur gaya teks dengan bantuan nilai sebaris dalam sifat paparan CSS. Adalah idea yang baik untuk menguji variasi memaparkan elemen perenggan sebagai elemen sebaris. Untuk mengekalkan fleksibiliti dalam peletakan teks, kadangkala sesuai untuk menukar sifat yang dipaparkan.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan elemen perenggan sebaris menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!