| Code dùng trong các bài viết Tạo hình nền và chia cột cho bài viết | Chèn liên kết và hình ảnh vào trang web Code tạo chữ chạy |
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:
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.
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;
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>
Tùy biến code
<div style="border:#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;">NỘI_DUNG</div>
Code đóng 2 khung
<div style="border: 2px solid blue; padding: 4px;"><div style="border: 5px solid yellow; padding: 10px;">
Bài viết
</div>
Bài viết
</div>
Tùy biến code
<div style="border: 14px double yellow; padding: 4px;"><div style="border: 5px solid orange; padding: 10px;">
Bài viết
</div>
Bài viết
</div>
Đóng khung và chia cột
Code
Không có nhận xét nào :
Đăng nhận xét