Chào mọi người ! Hôm nay mình sẽ biết tut nho nhỏ về thêm 1 cách nữa giúp chúng ta căn Text chữ vào vị trí trung tâm của 1 line hay border nằm ngang đơn giản bằng CSS Flexbox nhé. Cái này hay dùng ở chỗ làm Header của 1 block hay tiêu đề của nội dung khi biết cách làm dễ như thế này chúng ta có thể viết và tùy biến nó dễ dàng theo mong muốn.
Cách làm
HTML
HTML chỉ cần đơn giản thế này
Make Awesome Things That Matter
CSS
CSS chúng ta sẽ làm như sau
.text-divider {
display: flex;
align-items: center;
--text-divider-gap: 1rem;
}
.text-divider::before,
.text-divider::after {
content: '';
height: 1px;
background-color: #333;
flex-grow: 1;
}
.text-divider::before {
margin-right: var[--text-divider-gap];
}
.text-divider::after {
margin-left: var[--text-divider-gap];
}
Cái var[--text-divider-gap] là cái biến chúng ta define trước để căng margin giữa text bên trái vs bên phải so với border nhé. Để margin 1rem thì sẽ được như Demo bên dưới nhé.
Sử dụng các thuộc tính đường viền như kiểu đường viền, màu đường viền và chiều rộng đường viền, trình tạo CSS đường viền
⇢Không có đường chấm ẩn nào có rãnh gấp đôi bên trong có chấm
⇢Chọn cạnh tất cả các cạnh cạnh trái, cạnh phải, cạnh trên, cạnh dưới
Phần sau là kiến thức lý thuyết về CSS border [đường viền]
Tóm Ý hide
1 Đường viền đường viền CSS
2 chiều rộng đường viền, màu đường viền, kiểu đường viền
3 Cạnh viền
Đường viền đường viền CSS
Để thêm đường viền vào một phần tử HTML, bạn sử dụng thuộc tính CSS có tên là đường viền, giá trị của thuộc tính này bạn viết trên một dòng đại diện cho thuộc tính đường viền mong muốn, ba giá trị trong số đó là màu kiểu kích thước, trong đó:
kích thước độ dày đường viền [như 1px, 2em …] kiểu đường viền kiểu, nó nhận các giá trị như không có, ẩn, chấm, đứt nét, đặc, kép, rãnh, rãnh, in chìm, đầu tiên hoặc sử dụng kiểu chấm – đường chấm, đường ngưỡng đứt nét, mã màu đường viền liền nét liền mảnh [xem mã màu trong HTML, CSS] hoặc các tên màu như đỏ, xanh lam, xanh lục, đen, trắng, xanh nước biển, nâu, vàng …
Khi mã CSS tạo đường dày 2 pixel, kiểu đường liền nét liền mạch, màu đường đỏ, thì bạn viết:
viền: 2 điểm ảnh đặc màu đỏ;
Ví dụ: tạo một lớp CSS có tên là boderexam1 mô tả từ, độ dày của dòng là 5 pixel, dòng có kiểu chấm chấm và màu là xanh lục.
ví dụ biên giới
Các kết quả:
ví dụ biên giới
Trong cú pháp phác thảo
viền: kích thước kiểu màu;
Bạn có thể khai báo các phần tử còn thiếu, lần này nó sẽ sử dụng giá trị mặc định, ví dụ trong các trường hợp sau:
Border CSS Code Đường viền kết quả: nút; Không đặt đường viền: dấu gạch ngang # b1154a;
Kích thước bị thiếu, vì vậy kích thước được mặc định
đường viền: 1px gạch ngang;
Thiếu màu, vì vậy hãy lấy màu mặc định
chiều rộng đường viền, màu đường viền, kiểu đường viền
Ngoài cách viết đường viền dựa trên thuộc tính border như trên, bạn cũng có thể sử dụng ba thuộc tính border-width, border-style, border-color để chỉ định chiều rộng, kiểu đường và màu sắc.
Chiều rộng dòng là giá trị tính bằng px, em …
Bạn đang xem: Tạo đường viền cho văn bản html
Màu sắc là màu theo quy tắc CSS như màu theo tên, màu băm, màu RGB, rgba
Kiểu dòng nhận các giá trị: không có, chấm, chấm, kép, rãnh, rãnh, chèn, bắt đầu, ẩn
Ví dụ:
Không có giám sát.
Phong cách chấm bi.
Phong cách chấm bi.
Nhấn đúp.
Loại rãnh.
loại sọc.
Loại chèn.
Phong cách bắt đầu.
Ẩn dòng khung [khung không được vẽ nhưng chiều rộng phần tử vẫn có khung].
Không có giám sát.
Phong cách chấm bi.
Phong cách chấm bi.
Nhấn đúp.
Loại rãnh.
Xem Thêm: Bí Quyết Kinh Doanh Tốt – 6 Điều Khó Làm Nếu Muốn Giàu Có
loại sọc.
Loại chèn.
Phong cách bắt đầu.
Ẩn dòng khung [khung không được vẽ nhưng chiều rộng phần tử vẫn có khung].
Cạnh viền
Cách viết trên ảnh hưởng đến tất cả bốn cảnh của hộp, nếu bạn muốn xác định từng cạnh của hộp, bạn có thể sử dụng các thuộc tính bổ sung.
Đặt chiều rộng, kiểu đường kẻ, thuộc tính màu: đường viền trên cùng, đường viền bên phải, đường viền dưới cùng, đường viền bên trái
Ví dụ bao gồm đường viền trên và dưới
Ví dụ bao gồm đường viền trên và dưới
Tương tự như màu đường viền, chiều rộng đường viền, kiểu thân, bạn cũng đặt từng màu, chiều rộng và kiểu đường riêng biệt cho từng cạnh, với các thuộc tính
left-border-width-left-border-style-left-border-style-top-border-width-top-border-style-top-border-color-viền-rộng-viền-phải-phong cách-viền-phải-màu sắc dưới cùng-đường viền đường viền-dưới cùng-kiểu đường viền-dưới cùng-màu