Với các bạn đã thuần thục về lập trình website và đã có nhiều kinh nghiệm về làm web từ mã nguồn mở WordPress thì các code cơ bản cho bài viết thì không còn xa lạ gì nữa.
Nhưng vẫn còn nhiều bạn vẫn chưa biết về các đoạn Code cơ bản mà dưới đây Điền Nobi sắp chia sẽ với các bạn cùng tìm hiểu.
Nội dung chính
1. Code tạo khung viền
<div style="border: 3px solid mã màu; margin: 10px; padding: 15px; word-wrap: break-word;">NỘI DUNG</div>
Đây là đoạn code để các bạn tạo cho bài viết của mình một khung cho nội dung cần khoanh vùng, chú thích,… Nếu muốn hiển thị khung thì các bạn cần biết rõ các thuộc tính của đoạn code này.
2. Giải thích thuộc tính nên biết
Các bạn xem thuộc tính và thay vào code theo ý mình nha.
- border : 3px → Kích thước khung viền
- solid → Kiểu khung viền (Xem phần 2)
- Mã màu → Màu khung viền (Xem mã màu Tại đây)
- word-wrap: break-word → những từ quá dài sẽ tự động xuống hàng
- margin → Khoảng cách từ khung viền tới lề hoặc phần tử tiếp theo
- padding → Khoảng cách từ phần nội dung tới khung viền
- Khi viết padding: 10px 7px 3px 15px: → thì có nghĩa là khoảng cách từ đường viền phía trên, đường viền bên phải, đường viền phía dưới, đường viền bên trái đến nội dung bài viết lần lượt là 10px. 7px, 3px, 15px.
- height: … px; overflow: auto → Có thanh cuộn
- border-radius: ….px →Bo công
- background-color: mã màu hex→ nền màu
- background-image:url(‘LINK ẢNH’) → nền hình ảnh
- “><div style=”background-color: rgba(255,255,255,0.5) ; margin: 10px; padding: 15px; </div> → mã màu nền đục
- white-space: nowrap → Văn bản sẽ hiển thị trên cùng một hàng, chỉ xuống hàng khi gặp thẻ <br />
- height: … px → chiều cao của đoạn văn bản.
- width: … px → chiều rộng của đoạn văn bản.
3. Quy định về đường viền
| Mô tả | Tên code khung viền |
| Đường thẳng | Solid |
| Dấu chấm | Dotted |
| Nét gạch | Dashed |
| Nét đôi | Double |
| Đường rãnh | Droove |
| Đường chóp | Ridge |
| Bóng bên trong | Inset |
| Bóng bên ngoài | Outset |
4. Kết quả sau khi thêm mã màu và nội dung vào đoạn code
<div style="border: 3px solid #FF0000; margin: 10px; padding: 15px; word-wrap: break-word;">Code thông dụng cơ bản</div>
- Thêm mã màu vào viền Solid: #FF0000
- Thêm nội dung: Code thông dụng cơ bản
- Các bạn có thể tự chỉnh size …px tùy ý thích.
Được kết quả:
Như vậy, Điền vừa chia sẽ với các bạn cách tạo khung viền cơ bản. Bài viết tiếp theo tôi sẽ chia sẽ thêm cách tạo khung viền được kết hợp hình nền, chia dòng nội dung trong khung,…
Có thắc mắc gì thì các bạn hãy để lại bình luận bên dưới nhé. Điền sẽ cố gắng hỗ trợ các bạn thêm.
