Làm cách nào để chèn dòng trong CSS?

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 trong

---

nhãn

Bướ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
    

  

4

<h2 class="hr-lines">PEACE</h2>

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

Để 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
    

  

0

kế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
    

  

3

Chú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
    

  

00

4. 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ải

Thê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
    

  

6

Chú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
    

  

03

Kế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
    

  

2

kế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ê 🙏