programming css

CSS đường đứt nét dọc

Chào mừng bạn đến với hướng dẫn về cách tạo các đường thẳng đứng trong HTML và CSS. Bạn muốn thêm một đường thẳng đứng bên cạnh một đoạn hoặc một phần của trang?

Một trong những cách dễ nhất để tạo đường thẳng đứng trong HTML CSS là thêm đường viền CSS

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

Điều đó bao gồm những điều cơ bản nhanh chóng, nhưng hãy đọc tiếp để biết thêm ví dụ

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

TRANG TRÌNH BÀY NHANH

Tải xuống & Ghi chú

Đường thẳng đứng

Bit và liên kết hữu ích

Kết thúc

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

GHI CHÚ NHANH

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn

HTML CSS DÒNG DỌC

Được rồi, bây giờ chúng ta hãy đi vào các ví dụ về tạo các đường thẳng đứng trong HTML và CSS

1] TUYẾN ĐỨNG CÓ BIÊN GIỚI CSS

1A] KẾT QUẢ

viền trái

biên giới bên phải

1B] HTML & CSS

1 đường viền. html


Left border


Right border

1 đường viền. css

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

Như trong phần giới thiệu, cách dễ nhất để tạo một đường thẳng đứng là thêm

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

3 hoặc

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

4. Nhưng hãy lưu ý về cách chúng ta có thể kiểm soát các đường – đường viền. ĐỘ DÀY MÀU SẮC . Nếu bạn chưa quen với HTML/CSS, chỉ cần dành một chút thời gian để xem qua tất cả các đơn vị đo lường và hệ thống màu. Điều đó sẽ làm giảm bớt nỗi đau của bạn, các liên kết dưới đây.

2] ĐƯỜNG ĐỨNG Ở TRUNG TÂM

2A] KẾT QUẢ

Trái

Đúng

2B] HTML & CSS

2-giữa. html


  Left
  Right

2-giữa. css

/* [A] FLEX WRAPPER */
.wrapper {
  display: flex;
  background: #f2f2f2;
}
 
/* [B] LEFT-RIGHT DIMENSIONS */
.left-side { width: 50%; }
.right-side { flex-grow: 1; } /* auto use all remaining space */
.left-side, .right-side { padding: 10px; }
 
/* [C] VERTICAL LINE */
.left-side { border-right: 5px dotted red; }

Làm thế nào để chúng ta đặt một dòng ở giữa [hoặc một nơi nào đó ở giữa] sau đó?

Tạo một

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

5, sau đó kẹp

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

0 vào bên trong

Đặt

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

1 để “tách” nó thành bố cục trái-phải

Đặt kích thước của

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

2 và

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

Sử dụng cùng một

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

4 cũ để tạo đường thẳng đứng

3] QUY TẮC NGANG

3A] KẾT QUẢ

3B] HTML

3 giờ. html

Đây là một giải pháp thay thế phổ biến khác trôi nổi trên Internet – Sử dụng thước kẻ ngang

/* [A] LEFT BORDER */
.border-l {
  /* [A1] VERTICAL LINE ON LEFT */
  /* BORDER : THICKNESS STYLE COLOR */
  border-left: 5px solid red;
 
  /* [A2] COSMETICS */
  padding: 20px;
  background: #ffeded;
}
 
/* [B] RIGHT BORDER */
.border-r {
  /* [B1] VERTICAL LINE ON RIGHT */
  /* SOLID | DOTTED | INSET | DASHED | DOUBLE */
  border-right: 5px dashed blue;
 
  /* [B2] COSMETICS */
  padding: 20px;
  background: #f0edff;
}

5 để tạo một đường thẳng đứng… Funky. Mặc dù nó đơn giản nhưng tôi không thể đề xuất phương pháp này – Nó không tùy biến được nhiều

BIT & LIÊN KẾT HỮU ÍCH

Đó là tất cả những gì dành cho hướng dẫn và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

LIÊN KẾT và THAM KHẢO

Mã màu CSS – Rapidtables
Giá trị và đơn vị CSS – MDN
Đường viền CSS – MDN
Tạo đường thẳng đứng
Đường kẻ ngang HTML CSS – Code Boxx

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc

Đường chấm dọc được gọi là gì?

Những đường đặc biệt này được gọi là các đường tiệm cận đứng và chúng giúp chúng ta hiểu các giá trị đầu vào mà một hàm có thể không bao giờ giao nhau trên biểu đồ. Các tiệm cận đứng biểu thị các giá trị bị hạn chế trên một hàm nhất định,. Chúng thường được thể hiện bằng các đường thẳng đứng đứt nét.

Làm cách nào để vẽ đường thẳng trong CSS?

CSS [SCSS] .

dòng 1 {

Chiều cao. 1px;

lai lịch. đen;

dòng 2 {

đường viền trên cùng. 1px màu đen đặc;

Thẻ nào được sử dụng cho dòng dọc trong HTML?

Có thể tạo một đường thẳng đứng trong HTML bằng cách sử dụng thuộc tính biến đổi trong thẻ . Với sự trợ giúp của thuộc tính này, bạn có thể xoay một đường ngang thành một đường thẳng đứng.

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

Tất cả những gì bạn phải làm là thêm thẻ để tạo một đường ngang. Điều này sẽ vẽ một đường trên toàn bộ chiều rộng. Tuy nhiên, nó sẽ bị hạn chế đối với vùng chứa. Cũng dễ dàng loại bỏ CSS gạch dưới