Thẻ p trong html xác định một đoạn văn bản. Nó là một phần tử cấp khối và luôn bắt đầu trên một dòng mới. Trước và sau mỗi đoạn văn, trình duyệt tự động thêm lề. Bạn có thể sửa đổi lề bằng thuộc tính lề CSS .
Nếu bạn chỉ cần chuyển văn bản sang một dòng mới, hãy sử dụng thẻ <br> .
1. Cú pháp Thẻ p trong HTML
Thẻ <p> đi theo từng cặp. Nội dung được viết giữa thẻ mở (<p>) và thẻ đóng (</p>). Nếu thẻ đóng bị bỏ qua, thì phần cuối của đoạn văn được coi là khớp với phần bắt đầu của phần tử cấp khối tiếp theo.
Lứu ý:
- Các dấu cách giữa thẻ <p> mở và nội dung của nó bị trình duyệt bỏ qua. Để đặt thụt lề, hãy sử dụng thuộc tính CSS text-indent .
- Thẻ <p> không được chứa bảng và các phần tử cấp khối khác.
2. Ví dụ về Thẻ p trong HTML
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ p trong HTML</title>
</head>
<body>
<p>Đây là đoạn văn bản.</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”zYqqPWz” default_tab=”html,result” user=”davidkhai”]See the Pen zYqqPWz by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
3. Sử dụng CSS trong thẻ
Để căn chỉnh văn bản trong một đoạn văn, thay vì thuộc tính căn chỉnh lỗi thời , hãy sử dụng thuộc tính căn chỉnh văn bản CSS . Ví dụ về thẻ HTML được sử dụng với thuộc tính CSS text-align:
<!DOCTYPE html> <html> <head> <title>Ví dụ về thẻ p trong HTML</title> <style> div.paragraph { text-align: center; } </style> </head> <body> <h1>Webaffiliatevn</h1> <div class="paragraph"> <p>Căn chỉnh văn bản ở giữa được đặt bằng thuộc tính CSS text-align.</p> </div> </body> </html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”mdPPqLa” default_tab=”html,result” user=”davidkhai”]See the Pen mdPPqLa by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
Ví dụ về thẻ HTML được sử dụng với thẻ br:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ p trong HTML</title>
</head>
<body>
<p> Bên trong đoạn văn, chúng ta có thể đặt thẻ < br/ >, <br> để chuyển một phần văn bản sang dòng khác nếu cần.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. <br/> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”GRZZOGz” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/GRZZOGz’>GRZZOGz</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
4. Các thuộc tính Thẻ p trong HTML
| Thuộc tính | Giá trị | Sự miêu tả |
|---|---|---|
| align (căn chỉnh) | right left justify |
Xác định căn chỉnh văn bản. Không được hỗ trợ trong HTML5 |
5. Cách tạo kiểu cho thẻ <p>?
Các thuộc tính phổ biến để thay đổi độ nặng / độ nhấn mạnh / kích thước trực quan của văn bản trong thẻ <p>:
- Thuộc tính kiểu phông chữ CSS thiết lập kiểu phông chữ. bình thường | chữ nghiêng | xiên xiên | ban đầu | thừa kế.
- Thuộc tính font-family CSS chỉ định danh sách ưu tiên gồm một hoặc nhiều họ phông chữ và / hoặc họ chung cho phần tử đã chọn.
- Thuộc tính font-size CSS đặt kích thước của phông chữ.
- Thuộc tính font-weight CSS xác định xem phông chữ nên đậm hay dày.
- Thuộc tính chuyển đổi văn bản CSS kiểm soát cách viết hoa và viết hoa văn bản.
- Thuộc tính trang trí văn bản CSS chỉ định trang trí được thêm vào văn bản và là thuộc tính viết tắt cho văn bản-trang trí-dòng, văn bản-trang trí-màu, văn bản-trang trí-kiểu.
Tô màu văn bản trong thẻ <p>:
- Thuộc tính màu CSS mô tả màu của nội dung văn bản và trang trí văn bản.
- Thuộc tính background-color trong CSS đặt màu nền của một phần tử.
Các kiểu bố cục văn bản cho thẻ <p>:
- Thuộc tính CSS text-indent chỉ định thụt lề của dòng đầu tiên trong một khối văn bản.
- Thuộc tính tràn văn bản CSS chỉ định cách báo hiệu nội dung bị tràn không được hiển thị cho người dùng.
- Thuộc tính khoảng trắng CSS chỉ định cách xử lý khoảng trắng bên trong một phần tử.
- Thuộc tính ngắt từ trong CSS chỉ định vị trí các dòng sẽ được ngắt.
Các thuộc tính khác đáng xem xét cho thẻ <p>:
- Thuộc tính CSS text-shadow thêm bóng vào văn bản.
- Thuộc tính CSS text-align-last đặt căn chỉnh của dòng cuối cùng của văn bản.
- Thuộc tính line-height trong CSS chỉ định chiều cao của một dòng.
- Thuộc tính letter-spacing CSS xác định khoảng cách giữa các chữ cái / ký tự trong một văn bản.
- Thuộc tính giãn cách từ trong CSS đặt khoảng cách giữa các từ.
>>> Xem thêm:
