Nếu chúng tôi muốn thêm Đường ngang trong tài liệu Html bằng thẻ Html, thì chúng tôi phải làm theo các bước được đưa ra bên dưới. Sử dụng các bước này, chúng ta có thể dễ dàng thêm dòng
Bước 1. Đầu tiên, chúng ta phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng ta muốn thêm đường ngang
Bước 2. Bây giờ, đặt con trỏ tại điểm mà chúng tôi muốn thêm dòng trong tài liệu Html. Và, sau đó chúng ta phải sử dụng
thẻ của Html tại thời điểm đóBước 3. Bây giờ, chúng ta phải thêm các thuộc tính của
thẻ, xác định kích thước, màu sắc và chiều rộng của một dòng. Vì vậy, chúng ta phải nhập thuộc tính kích thước, chiều rộng và màu sắc trongnhãnBước 4. Và, sau đó chúng ta phải chỉ định giá trị của các thuộc tính này
Bước 5. Và cuối cùng, chúng ta phải lưu mã Html và sau đó chạy tệp trong trình duyệt
Kiểm tra nó ngay bây giờĐầu ra của mã Html ở trên được hiển thị trong ảnh chụp màn hình sau
Sử dụng CSS nội bộ
Nếu chúng tôi muốn thêm Đường ngang trong tài liệu Html bằng Biểu định kiểu bên trong thì chúng tôi phải làm theo các bước được đưa ra bên dưới. Sử dụng các bước này, chúng ta có thể dễ dàng thêm dòng
Bước 1. Đầu tiên, chúng ta phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng ta muốn thêm đường ngang
Bước 2. Bây giờ, chúng ta phải đặt con trỏ ngay sau khi đóng thẻ tiêu đề trong thẻ đầu của tài liệu Html và sau đó xác định kiểu bên trong
Nếu bạn muốn thay đổi độ dày hoặc chiều cao của đường ngang, hãy thêm thuộc tính chiều cao vào
Phong cách. Trong trường hợp này, bạn cũng có thể đặt thuộc tính màu nền cho đường kẻ ngang dày
Title of the document
Horizontal Line with Height and Background Color
Đặt thuộc tính đường viền thành "không" để xóa đường viền của đường ngang dày của bạn
Title of the document
Horizontal Line with Height and Background Color
Bạn có thể thay đổi màu của đường ngang bằng cách đặt thuộc tính border-top và xác định màu. Làm theo ví dụ để xem minh họa về nó
Title of the document
Horizontal Line with Height and Background Color
Đi xa hơn với các đường ngang bằng cách tạo các kiểu khác nhau cho
đường viền của phần tử. Kiểm tra mã ví dụ để xem những đường ngang tuyệt đẹp nào được trình bày
Title of the document
Gradient Horizontal Line
Gradient Transparent
Single-direction Drop Shadow
Double
Dashed
Dotted
Rounded Corners
Nếu bạn muốn đặt hình trang trí hoặc hình ảnh làm quy tắc ngang cho trang web của mình, bạn có thể thêm hình nền vào quy tắc ngang của mình với sự trợ giúp của thuộc tính nền CSS. Ngoài ra, hãy đặt chiều cao bằng với chiều cao của hình ảnh của bạn [hoặc phần bạn muốn từ hình ảnh] và đường viền. không, vì vậy hình ảnh của bạn sẽ giống như một đường kẻ ngang
Bài viết này sẽ hướng dẫn các bạn cách thêm đường kẻ ngang vào bên phải và bên trái văn bản như hình bên dưới
nếu bận]{
} khác {
1. Tạo thẻ văn bản HTML
Trong tệp HTML của bạn, hãy tạo một thẻ
Title of the document
Horizontal Line with Height and Background Color
3 và đặt cho nó một tên lớp là
Title of the document
Horizontal Line with Height and Background Color
4PEACE
2. Thêm dòng bên trái
Chúng ta sẽ sử dụng phần tử giả CSS
Title of the document
Horizontal Line with Height and Background Color
5 để thêm một dòng vào bên trái của văn bản. Áp dụng mã bên dưới vào tệp CSS của bạn.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
Từ đoạn mã trên, chúng tôi đang tạo một phần tử mới có chiều cao là
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
0 và chiều rộng là .hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
1 trước phần tử
Title of the document
Horizontal Line with Height and Background Color
4 bằng cách sử dụng thuộc tính nội dung, sau đó đặt cho nó một vị trí tuyệt đối để di chuyển nó xung quanh, chúng tôi đặt phần trên cùng là .hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
3 thành 3. Đặt
Title of the document
Horizontal Line with Height and Background Color
4 thành tương đối
Title of the document
Horizontal Line with Height and Background Color
Để các phần tử giả được áp dụng cho phần tử đích, chúng ta phải đặt vị trí của phần tử thành tương đối, điều này sẽ làm cho tất cả chuyển động của
Title of the document
Horizontal Line with Height and Background Color
5 và .hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
6 có liên quan đến phần tử gốc [văn bản]Thêm các dòng sau vào tệp CSS của bạn
Title of the document
Horizontal Line with Height and Background Color
0kết quả đầu ra
Chúng tôi có thể khắc phục điều này bằng cách đặt
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
7 và thêm .hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
8 vào phần tử
Title of the document
Horizontal Line with Height and Background Color
3Chúng tôi đang đặt
Title of the document
Horizontal Line with Height and Background Color
5 ở bên trái của văn bản bằng cách đặt
Title of the document
Horizontal Line with Height and Background Color
004. Thêm dòng bên phải
Chúng tôi sẽ sử dụng phần tử giả
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
6 để thêm dòng bên phảiThêm các dòng mã sau vào tệp CSS của bạn để thêm đúng dòng vào văn bản
Title of the document
Horizontal Line with Height and Background Color
6Chúng tôi đang đặt
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
6 ở bên phải của văn bản bằng cách đặt
Title of the document
Horizontal Line with Height and Background Color
03Kết quả cuối cùng
}
Mã hoàn chỉnh
Title of the document
Horizontal Line with Height and Background Color
04
Title of the document
Horizontal Line with Height and Background Color
0
Title of the document
Horizontal Line with Height and Background Color
05
Title of the document
Horizontal Line with Height and Background Color
2kết thúc
Tôi hy vọng rằng bài viết này sẽ hỗ trợ bạn trong việc tạo văn bản có các dòng ngang phải và trái vào một thời điểm nào đó trong tương lai
Chà, thật là một hành trình, tôi rất vui vì bạn đã đi đến cuối bài viết này, nếu bạn thích và học được điều gì đó mới từ bài viết này, tôi sẽ muốn kết nối với bạn
Hãy kết nối trên
- Twitter @chúbigbay143
- LinkedIn @unclebigbay
Hẹn gặp lại các bạn trong bài viết tiếp theo. Tạm biệt 🙋♂️
Nếu bạn thấy nội dung của tôi hữu ích và muốn ủng hộ blog của tôi, bạn cũng có thể mua cho tôi một ly cà phê bên dưới, blog của tôi sống nhờ cà phê 🙏