Đóng khung cho bài viết

Đối với template của blog mình thì việc đóng khung cho bài viết cũng như các đối tượng khác là cần thiết. Sau 1 thời gian làm theo chỉ dẫn của tác giả YoboY trên blog southernspeakers.net (thanks YoboY, các thủ thuật của anh rất hay và cần thiết cho mình) cùng với làm quen với một số code css cơ bản, mình dịch và tổng hợp lại để tiện bề sử dụng.

Bước 1:
Tạo bài viết mới bằng cách vào Dashboard - Posting - New Post, chọn thẻ Edit HTMLvà dán code sau vào:
<div style="border: 1px solid red; padding: 10px;">
Bài viết
</div>

Bước 2:
Chuyển sang thẻ Compose: sẽ thấy có 1 khung bao quanh "Bài viết", lúc này đơn giản chỉ cần đưa nội dung cần thiết vào.
Ngược lại, ta cũng có thể soạn thảo bên thẻ Compose trước sau đó chuyển qua Edit HTML: thêm thẻ mở <div> ở trên và thẻ đóng </div> ở dưới bài viết là được.

Tùy biến:
Chúng ta có thể tùy biến các thuộc tính của dòng code này:
<div style="border: 1px solid red; padding: 10px;">chẳng hạn như sau:

Color: có thể sử dụng các màu chuẩn như: white, red, black, lime, yellow, orange, aqua (như bài viết này)... hoặc sử dụng mã màu hex code (lựa màu tùy thích ở đây)

Width: độ dày đường khung, thường 1px là vừa.

Style: thường dùng là 'Solid', ta có thể thay đổi bằng các thược tính sau: dotted, dashed, double, groove, ridge, inset và outset

Padding: cần thiết để nội dung khỏi tràn đụng vào khung, có thể thay đổi các giá trị từ 0 đến 10px

Ngoài ra, ta có thể tùy biến thêm bằng cách đưa vào một số thuộc tính định dạng văn bản trong khung như:

Background-color: màu nền
Color: màu chữ, VD: color: orange; hoặc color: #6acfff;
Text-align: canh lề bài viết, có thể: left, center hay right.
Margin: tùy ý
Ví dụ:
<div style="border: 1px solid orange; color: aqua; margin: 10px 0; padding: 10px; text-align: center;">
Bài viết
</div>