Chủ đề: HTML / CSSPREV | Tiếp theoPrev|Next
Trả lời: Sử dụng thuộc tính CSS background-color
Bạn có thể chỉ cần sử dụng thuộc tính CSS background-color kết hợp với height và border để thay đổi màu mặc định một phần tử <hr>.
Trong ví dụ sau, chúng tôi đã thay đổi màu của thẻ <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>0 thành màu xám nhạt. Bạn cũng có thể tăng độ dày của dòng bằng cách tăng giá trị của thuộc tính height.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Change the Color of hr Tag using CSS</title> <style> hr{ height: 1px; background-color: #ccc; border: none; } </style> </head> <body> <p>This is a paragraph</p> <hr> <p>This is another paragraph</p> </body> </html>
Câu hỏi thường gặp liên quan
Dưới đây là một số Câu hỏi thường gặp liên quan đến chủ đề này:
- Cách tạo biểu tượng Tam giác hoặc Caret bằng CSS
- Cách thêm đường viền vào một phần tử trên chuột di chuột mà không ảnh hưởng đến bố cục trong CSS
- Cách xóa phác thảo xung quanh các hộp đầu vào văn bản trong Chrome bằng CSS
Cách để - Phong cách HR (Thuốc/Dòng ngang))
Tìm hiểu làm thế nào để tạo kiểu cho một yếu tố HR với CSS.
Đường chân trời
Bạn có thể sử dụng thuộc tính border để tạo kiểu cho phần tử <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>0:
Thí dụ
/ * Biên giới đỏ */hr.New1 {& nbsp; Border-Top: 1px Solid Red;}
hr.new1 {
border-top: 1px solid red;
}
/ * Đường viền màu đỏ đứt nét */hr.new2 {& nbsp; Border-Top: 1px Dashed Red;}
hr.new2 {
border-top: 1px dashed red;
}
/ * Đường viền màu đỏ chấm */hr.New3 {& nbsp; Đường viền-đỉnh: 1px chấm màu đỏ; }
hr.new3 {
border-top: 1px
dotted red;
}
/ * Biên giới màu đỏ dày */hr.New4 {& nbsp; Biên giới: 1px màu đỏ rắn;}
hr.new4 {
border: 1px solid red;
}
/ * Đường viền màu xanh lá cây tròn lớn */hr.New5 {& nbsp; Biên giới: 10px Solid Green; & NBSP; Border-Radius: 5px;}
hr.new5 {
border: 10px solid green;
border-radius: 5px;
}
Hãy tự mình thử »
Các trang liên quan
Thẻ nhân sự HTML.
Phần tử HTML là phần tử cấp khối và đại diện cho quy tắc ngang. Nó tạo ra một đường ngang. Chúng ta có thể tạo kiểu cho đường ngang bằng cách thêm màu vào nó. Điều này sẽ làm cho giao diện người dùng của bạn hấp dẫn hơn. Có thể làm bằng cách thêm thuộc tính màu nền. Ngoài ra, chúng ta có thể chỉ định màu của đường ngang thông qua thuộc tính trên đường viền.
Trong đoạn trích này, bạn có thể tìm thấy một số ví dụ về việc thêm màu vào thẻ.
- Sử dụng hai yếu tố và thêm một phần tử giữa chúng.
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
- Chỉ định các thuộc tính chiều cao và màu nền.
- Đặt biên giới thành không có ai.
hr { height: 2px; background-color: #ff0000; border: none; }
Hãy cùng xem mã cuối cùng.
Ví dụ về việc thêm màu vào thẻ với thuộc tính màu nền:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> hr { height: 2px; background-color: #ff0000; border: none; } </style> </head> <body> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr> <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </body> </html>
Kết quả
Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in và sắp chữ.
Lorem Ipsum là văn bản giả tiêu chuẩn của ngành kể từ những năm 1500, khi một máy in không xác định lấy một loại galley và tranh giành nó để tạo ra một cuốn sách mẫu vật.
Hãy cùng xem một ví dụ khác.
Ví dụ về việc thêm màu vào thẻ với thuộc tính Border-Top:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> hr { display: block; height: 1px; border: 0; border-top: 3px solid #2c03fc; margin: 1em 0; padding: 0; } </style> </head> <body> <p> Lorem Ipsum </p> <hr> <p> 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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </body> </html>