Tạo viền cho chữ trong HTML
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àmHTML
CSS
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 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ềnNgoà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ềnCá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 |