Hướng dẫn how to color a line in html - cách tô màu một dòng trong html

Question

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.

Nội dung chính Show

Ví dụ về việc thêm màu vào thẻ với thuộc tính màu nền:
Kết quả
Ví dụ về việc thêm màu vào thẻ với thuộc tính Border-Top:
Làm thế nào để bạn tô màu một dòng trong CSS?
Làm thế nào để bạn vẽ một đường màu xanh trong HTML?
Làm thế nào để bạn thay đổi màu sắc của một đường ngang?
Làm thế nào để bạn tạo ra một dòng tối trong HTML?

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>

Tôi không thể sử dụng màu sắc cho thẻ "HR". Ai đó có thể giúp tôi hiển thị một dòng màu trên trang JSP của tôi bằng HTML không?

Đã hỏi ngày 19 tháng 11 năm 2014 lúc 11:14Nov 19, 2014 at 11:14

4

hr {
  height: 2px;
  background-color: #ff0000;
  border: none;
}

1 không sử dụng màu, nó sử dụng

hr {
  height: 2px;
  background-color: #ff0000;
  border: none;
}

2

Đã trả lời ngày 19 tháng 11 năm 2014 lúc 11:15Nov 19, 2014 at 11:15

RoiroiRoi

5611 Huy hiệu vàng12 Huy hiệu bạc25 Huy hiệu đồng1 gold badge12 silver badges25 bronze badges

2

Bạn có thể áp dụng màu đường viền thay vì màu

<style>
hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
border-color:red;
} 
</style>

Đã trả lời ngày 19 tháng 11 năm 2014 lúc 11:46Nov 19, 2014 at 11:46

Nikitanikitanikita

2733 Huy hiệu bạc15 Huy hiệu Đồng3 silver badges15 bronze badges

<hr size="20" color="blue">

Đã trả lời ngày 19 tháng 11 năm 2014 lúc 11:21Nov 19, 2014 at 11:21

michael-mammutmichael-mammutmichael-mammut

2.4635 huy hiệu vàng26 Huy hiệu bạc43 Huy hiệu đồng5 gold badges26 silver badges43 bronze badges

<hr style="height:1px;border-top:1px solid #f00" />

Nên làm vậy.

Đã trả lời ngày 19 tháng 11 năm 2014 lúc 11:21Nov 19, 2014 at 11:21

hr:first-child{color:red;}
hr:nth-child(2){color:yellow;}
hr:last-of-type{color:blue;}

<hr><hr><hr>

Đã trả lời ngày 19 tháng 11 năm 2014 lúc 11:21Nov 19, 2014 at 11:21

2.4635 huy hiệu vàng26 Huy hiệu bạc43 Huy hiệu đồngBilly

Nên làm vậy.1 gold badge10 silver badges13 bronze badges

<hr color="yellow"  width="100%" >

BillybillyNov 19, 2014 at 11:25

2.4381 Huy hiệu vàng10 Huy hiệu bạc13 Huy hiệu đồng

Đã trả lời ngày 19 tháng 11 năm 2014 lúc 11:25

hr {
  height: 2px;
  background-color: #ff0000;
  border: none;
}

3 hoạt động trong IE, Firefox và Chrome theo các bài kiểm tra và htmlgoodies của riêng tôi

Đã trả lời ngày 19 tháng 11 năm 2014 lúc 11:21Nov 19, 2014 at 11:21

candied_orangecandied_orangecandied_orange

2.4635 huy hiệu vàng26 Huy hiệu bạc43 Huy hiệu đồng2 gold badges27 silver badges61 bronze badges

hr {
  height: 2px;
  background-color: #ff0000;
  border: none;
}

0

Nên làm vậy.

BillybillyDec 1, 2014 at 12:09

2.4381 Huy hiệu vàng10 Huy hiệu bạc13 Huy hiệu đồngRakesh

Đã trả lời ngày 19 tháng 11 năm 2014 lúc 11:252 gold badges5 silver badges19 bronze badges

Làm thế nào để bạn tô màu một dòng trong CSS?

Bạn có thể chỉ cần sử dụng thuộc tính màu nền CSS kết hợp với chiều cao và đường viền để thay đổi màu mặc định của một phần tử. Trong ví dụ sau, chúng tôi đã thay đổi màu của thẻ HR 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 chiều cao.use the CSS background-color property in combination with the height and border to the change the default color an

element. In the following example we've changed the color of hr tag to light grey. You can also increase the thickness of the line by simply increasing the value of the height property.

Làm thế nào để bạn vẽ một đường màu xanh trong HTML?

Màu đường biên giới: màu xanh;} }

Làm thế nào để bạn thay đổi màu sắc của một đường ngang?

Làm thế nào để thay đổi màu của đường ngang (phần tử) bằng CSS?Thẻ HTML được sử dụng để chèn quy tắc ngang hoặc ngắt theo chủ đề trong trang HTML để phân chia hoặc các phần tài liệu riêng biệt.Màu sắc của thẻ có thể được đặt bằng cách sử dụng thuộc tính màu nền trong CSS.The color of the

tag can be set by using the background-color property in CSS.