Thẻ hr

Thẻ hr xác định một đường phân cách ngang. Ưu điểm của thẻ này là để tạo một đường kẻ đơn, không cần tạo thêm các khối không cần thiết. Không yêu cầu thẻ đóng.

Ví dụ

Hãy xem cách thẻ hr hoạt động:

html<hr>

Результат:

Ví dụ

Hãy thử đổi màu đường kẻ bằng cách sử dụng thuộc tính CSS border-color:

html<hr style="border-color: red;">

Результат:

Ví dụ

Màu của đường kẻ cũng có thể được thay đổi bằng thuộc tính color (tuy nhiên, nếu cả hai thuộc tính color và border-color cùng được đặt - thuộc tính thứ hai có độ ưu tiên cao hơn):

html<hr style="color: red">

Результат:

Ví dụ

Bây giờ hãy đổi màu đường kẻ bằng cách sử dụng thuộc tính CSS border. Lưu ý rằng khi làm vậy, đường kẻ sẽ có độ dày gấp đôi (vì chúng ta đã đặt đường viền cả trên lẫn dưới):

html<hr style="border: 1px solid red;">

Результат:

Ví dụ

Hãy thử đổi màu đường kẻ bằng thuộc tính CSS border-top, và chỉ đặt đường viền trên. Bây giờ sẽ không có đường kẻ kép nữa:

html<hr style="border-top: 1px solid red;">

Результат:

Ví dụ

Hãy tạo đường kẻ dạng chấm bằng thuộc tính CSS border-top, đặt giá trị dotted thay vì solid:

html<hr style="border-top: 1px dotted red;">

Результат:

Ví dụ

Hãy tăng độ dày của đường kẻ bằng thuộc tính CSS border-width:

html<hr style="border-width: 10px; border-color: red;">

Результат:

Ví dụ

Và bây giờ hãy thêm chiều cao height và đường viền thông qua border cho đường kẻ. Đường viền khi đó sẽ tách thành đường viền trên và dưới:

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Xem thêm