Quy tắc ngang trong css là gì?

Các đường kẻ ngang là một cách để phân tách nội dung và có thể được thực hiện bằng cách sử dụng phần tử nhân sự HTML hoặc quy tắc đường viền CSS

Hôm nay tôi sẽ chỉ cho bạn cách sử dụng phần tử HTML U để thêm ý nghĩa ngữ nghĩa cho phần gạch chân của bạn và CSS để tô điểm cho chúng. Bạn cũng sẽ học cách chỉ sử dụng CSS để thêm gạch chân vào văn bản và nội dung

HTML có thẻ hr để tuyên bố ngắt theo chủ đề cho nội dung. Trong các đặc tả HTML cũ hơn, thẻ HR chỉ là một quy tắc ngang và không cung cấp ý nghĩa ngữ nghĩa như bây giờ. Ngày nay, nó không cung cấp dấu ngắt có thể nhìn thấy, nhưng nên được tạo kiểu bằng CSS. Điều này mang lại nhiều quyền kiểm soát hơn cho nhà thiết kế để làm cho thẻ nhân sự phù hợp với chủ đề của trang web

Gạch dưới HTML bằng cách sử dụng phần tử nhân sự

Kể từ khi bắt đầu HTML, hoặc ít nhất là theo như tôi có thể nhớ, phần tử U là một cách nhanh chóng và bẩn thỉu để chèn một đường ngang hoặc thước kẻ ngang vào một trang web. Phần tử U rất tuyệt vì nó có thể được sử dụng cho các tình huống sau

• Nghỉ theo chủ đề
• ngữ nghĩa
• Nhận thức trực quan tốt hơn
• Không có thẻ đóng

Its simple to add a horizontal line in your markup, just add:

Ban đầu, phần tử nhân sự được tạo kiểu bằng các thuộc tính. Ngày nay, với HTML5, thẻ nhân sự đã trở thành ngữ nghĩa, có nghĩa là nó cho trình duyệt, công nghệ đọc hỗ trợ và hệ thống tự động khác biết rằng có một ngắt theo chủ đề ở cấp độ đoạn văn.

Đây là một sự gián đoạn trong luồng nội dung, nhưng không phải là một trang mới. Nó tốt hơn phục vụ như một hàng đợi trực quan của một sự thay đổi trong chủ đề. Ví dụ: bạn có thể đặt chúng ở cuối phần, trước tiêu đề phụ mới

Màu, kích thước và kiểu đường kẻ ngang HTML với CSS

Ngày nay, phần tử nhân sự HTML được tạo kiểu bằng CSS thay vì thuộc tính. Điều này không chỉ sử dụng đúng hệ thống (CSS) để xác định quy tắc hiển thị mà còn cho phép bạn sử dụng lại cùng một quy tắc nhiều lần. Điều này làm cho mã của bạn dễ bảo trì hơn và bố cục của bạn nhất quán hơn

Các trình duyệt hiển thị đường bằng cách áp dụng các kiểu cho sự kết hợp của kiểu nền và đường viền. Đường viền là kiểu chính cho dòng mặc định. Xóa đường viền cũng xóa dòng

style="border: none;">

Tại sao bạn muốn làm điều này?

Một dòng vô hình vẫn có thể hữu ích để cung cấp thông tin ngữ nghĩa cho tác nhân người dùng mà không có sự lộn xộn trực quan có thể ảnh hưởng đến trải nghiệm người dùng mong muốn

Các kiểu mặc định HR của trình duyệt phổ biến là

hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}

Bạn có thể kiểm soát độ rộng của dòng bằng cách đặt thuộc tính chiều rộng và sau đó căn giữa nó bằng quy tắc CSS sau

hr {width: 60%;margin-left: auto;margin-right: auto;}

Bạn cũng có thể điều chỉnh độ dày của đường bằng cách đặt giá trị chiều cao. Màu được đặt bằng thuộc tính màu nền. Như một phần thưởng, bạn cũng có thể sử dụng thuộc tính độ mờ để làm cho đường bán trong suốt

hr {width: 300px;margin-left: auto;margin-right: auto;height: 100px;background-color:#666;opcaity: 0.5;}

Trình duyệt thông thường đặt lề thành khoảng một nửa chiều rộng của ký tự. Nhưng bạn có thể thay đổi giá trị này thành bất kỳ giá trị nào bạn muốn. Điều này có thể thêm khoảng trắng chất lượng vào bố cục của bạn và nhấn mạnh sự ngắt quãng nội dung

hr {width: 80%;height: 8px;margin-left: auto;margin-right: auto;background-color:#666;border: 0 none;margin-top: 100px;margin-bottom:100px;}

Bạn có thể áp dụng nhiều biến thể phong cách khác nhau cho các đường kẻ ngang của mình. Bạn không bị giới hạn chỉ về màu sắc và chiều rộng. Ở đây tôi đặt kiểu nền của đường kẻ ngang thành hình 5 ngôi sao màu vàng. Sau đó, tôi làm cho chúng lặp lại trên trục x trong khi căn giữa đường

tiền boa. đặt màu nền thành trong suốt để bạn không vô tình hiển thị màu phía sau hình ảnh

 .five-star-line { height: 20px; background-image: url(img/5-star-rating.png); background-repeat: repeat-x; background-position: center; background-color: transparent; border: none; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; }

Điều chỉnh kích thước, màu sắc và kiểu đường viền sẽ làm cho đường trông khác đi và có tác dụng giống nhau trong tất cả các trình duyệt hiện đại. Ví dụ: trong phần minh họa này, đường viền có màu đỏ, nét đứt và rộng 1px

Vui vẻ khi áp dụng các kiểu cho các đường ngang

Một vài tuần trước, tôi đã xuất bản một bài báo về cách tạo sọc nền bằng CSS. Bởi vì bạn có thể áp dụng các quy tắc nền tương tự cho một đường nằm ngang, bạn có thể thực hiện một số điều khá thú vị với phần tử nhân sự

Nhưng trước tiên, hãy xem một vài thủ thuật CSS đơn giản. Ví dụ đầu tiên này thay đổi kiểu của đường thành đường đứt nét

 .striped-border { border: 1px dashed #000; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; }

Bây giờ, áp dụng một trong các kỹ thuật kẻ sọc cho đường ngang. Ở đây tôi sử dụng linear-gradients để tạo hiệu ứng. Đường viền của đường ngang bị xóa và kích thước được đặt thành 40px. 40px là tùy ý, điều quan trọng là tạo hai gradient tuyến tính đầu tiên bằng một nửa chiều cao của HR. Bạn cũng sẽ cần đặt kích thước nền phù hợp với chiều cao

.zig-zag { border: none; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; height: 40px; background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background-size: 40px 40px; background-color: #EC173A;}

Chuyển đổi các yếu tố nhân sự

Với CSS3, bạn cũng có thể làm cho các dòng của mình thú vị hơn. Phần tử nhân sự theo truyền thống là một đường nằm ngang, nhưng với thuộc tính biến đổi CSS, bạn có thể thay đổi giao diện của chúng. Một phép biến đổi yêu thích trên phần tử nhân sự là thay đổi vòng quay

Bạn có thể xoay phần tử nhân sự của mình để nó hơi chéo

Hoặc bạn có thể xoay nó để nó hoàn toàn thẳng đứng

 .vertical-line{ width: 50%; margin: auto; margin-top: 50%; margin-bottom: 50%; transform: rotate(90deg); border-color: purple; }

Bạn nên áp dụng điều này một cách thận trọng vì điều này có thể gây ra sự gián đoạn không mong muốn cho bố cục của bạn. Nhưng thật tốt khi biết rằng bạn có thể áp dụng các phép biến đổi cho phần tử nhân sự

Tóm lược

Các đường ngang là một cách tuyệt vời để thêm giá trị trực quan vào bố cục của bạn. Phần tử nhân sự HTML cung cấp ý nghĩa ngữ nghĩa cho bố cục của trang. Nó chỉ có thể được tùy chỉnh bằng CSS. Nhưng bạn có thể áp dụng tất cả các loại phong cách điên rồ cho một đường ngang để tạo ảnh hưởng bố cục rất thú vị

Chia sẻ bài viết này với bạn bè của bạn

Cách sử dụng phần tử Datalist cho mục nhập có hướng dẫn

Cách đăng ký bản quyền hợp lệ⚖ một trang web - Yêu cầu về pháp lý & HTML👨🏼‍💻

Không gian HTML và CSS 🌌 Tạo bố cục để tăng người dùng 🙌 Tương tác bằng cách sử dụng chiều cao dòng, khoảng trắng và lề 📦

Quy tắc ngang có nghĩa là gì trong HTML?

Quy tắc ngang trên trang web là gì?

Chèn thước kẻ ngang nghĩa là gì?

Các thuộc tính của quy tắc ngang là gì?