<div style="border: #ccc 1px solid ; margin: 10px; padding: 5px; background: #CFE6F9; width: 150px; float: right; text-align: justify;">
Bài viết này mình sẽ tiếp tục hướng dẫn cho các bạn làm đẹp bài viết của mình với CSS. Bài viết này sẽ hướng dẫn các bạn tạo một vùng nổi bật trong bài viết, nó có thể là 1 đoạn chú thích, hoặc 1 đoạn văn bản chủ đạo của bài viết... Nó sẽ trông giống như các bài viết trên báo Tuổi Trẻ. Mình cũng đang sử dụng tip này!
</div>
Hình ảnh minh hoạ:
Thủ thuật cho bài viết : Tạo phong cách bài viết giống như báo Tuổi Trẻ. Minh_b10

☼ Và đây là cách thực hiện:
- Mình sẽ hướng dẫn 2 cách:

+ Cách 1: áp dụng code trược tiếp trên bài viết, với cách này bạn có thể cơ động trong việc chỉnh sửa code.
+ Cách 2 : tạo thêm một class trong code CSS của template. với cách này sẽ không thuận tiện cho việc chỉnh sửa code (khi ta muốn tùy chỉnh màu, vị trí...), nhưng với cách này sẽ gọn gàng hơn, và có thể dùng nhiều lần mà không cần soạn lại code.


A. Cách 1: chèn code trực tiếp vào bài viết
- với cách này ta chỉ việc tạo 1 thẻ <div> rồi cho đoạn văn bản cần làm nổi bật vào nó là xong.
- Nó sẽ trông giống như bên dưới:

Code:

<div style="border: #ccc 1px solid ; margin: 10px; padding: 5px; background: #CFE6F9; width: 150px; float: right; text-align: justify;">
{ĐOẠN VĂN BẢN CỦA BẠN}
</div>

- Giải thích code :

+ border: #ccc 1px solid ; : đường viền
+ background: #CFE6F9; : màu nền
+ width: 150px; : độ rộng (chiều cao thì sẽ tự thay đổi tùy theo độ dài của đoạn văn bản của bạn)
+ float: right; : vị trí trong bài viết, có thể thay đổi trái(left) hoặc phải(right) tùy bạn.
+ text-align: justify; : căn giữa cho văn bản.
+ margin: 10px; , padding: 5px; : 2 đoạn code này để căn lề.


B. Cách 2: tạo thêm một class trong code CSS của template.
- Vào bố cục
- vào chỉnh sửa code HTML
- Chèn thêm đoạn code CSS:

Code:

.s-content {
border: #ccc 1px solid ;
margin: 10px;
padding: 5px;
background: #CFE6F9;
width: 150px;
float: right;
text-align: justify;
}

- Như vậy mỗi lần muốn làm nổi bật 1 đoạn văn bản nào đó, bạn chỉ việc thêm thẻ <div> như bên dưới:

Code:

<div class="s-content">
{ĐOẠN VĂN BẢN CỦA BẠN}
</div>


Tóm lại: Như đã nói ở trên, đối với cách 1 ta có thể tùy chỉnh code ngay trên bài viết, còn cách 2 muốn tùy chỉnh thì ban phải vào trong code template. Ngoài ra ở cách 2, nếu bạn thay đổi các class đó sẽ làm ảnh hưởng đến tất cả các văn bản có sử dụng chung class đó. Vì thể nên tạo cố định các class này, ví dụ ta nên tạo 2 class bên trái và bên phải là đủ, và độ rộng nên lấy chuẩn luôn, không nên thay đổi lung tung. Tùy theo yêu cầu của mình mà hãy lựa chọn cho mình các cách thích hợp.


Chúc các bạn thành công.