[FD's BlOg] - 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ẻ.Hình ảnh minh họa từ báo Tuổi Trẻ:
☼ Và đây là minh họa trược tiếp:
Tôi gặp em trong một buổi chiều tối và mưa (Thứ 2, ngày 23 tháng 7 năm 2007) trước bến xe buýt cổng trường tôi giờ đây (Hồi đó tôi đăng ký thi vào Trung tâm Đào tạo Lập trình viên Quốc tế Bách khoa Aptech, em là sinh viên năm thứ 2 trường Cao Đẳng Du Lịch Hà Nội).
Khi mưa một to dần trong mái che, mọi người đã đứng trật kín nên tôi đành đứng ngoài trời mưa. Tôi đang cố tìm chỗ trú mưa thì bỗng dưng em đã đến gần tôi, một giọng nói nhè nhẹ từ phía sau tôi "mưa to như thế này trong mái che không còn chỗ đứng thì anh cầm ô đi hai anh em mình cùng trú" (lời nói ấy với tôi đã hơn một năm rồi mà bây giờ vẫn còn hiện lên nguyên vẹn như là lời nói hôm qua vậy). Tôi đã cùng em trú dưới trời mưa to mà chỉ có một chiếc ô nhỏ, thật trùng hợp sao hôm đó tôi và em lại phải đợi xe lâu như vậy. Tôi và em đã nói chuyện rồi quen nhau từ đây, hai người hỏi tên nhau, quê quán rồi cho nhau số điện thoại. Khi trời tạnh mưa thì cũng đến lúc tôi và em phải ra về. Từ đó tôi và em chỉ nhắn tin cho nhau, không còn gặp nhau nữa vì khi không vượt qua kỳ thi nên tôi đã đăng ký vào học tại Trung tâm Đào tạo CNTT Hà Nội. Nhưng có điều làm tôi không biết mình vui hay buồn nữa vì giữa hôm tôi trú mưa cùng em lại chính là ngày sinh nhật em (23/7/1987), lúc đó tôi mới biết nhưng cũng không biết làm thế nào nữa chỉ biết nói lời xin lỗi tới em, chúc mừng em thôi, nhưng em đã nói chính vì em gặp tôi mà em cảm thấy đó là món quà em hạnh phúc nhất trong những món quà mà em nhận được từ người khác. Lúc đó tôi không biết là có thật không nữa nhưng trong lòng tôi lại thấy nóng bừng lên chỉ muốn gặp em thôi. Chính từ đây mà chúng tôi nhắn tin cho nhau nhiều hơn, cũng nhiều lần tôi muốn gặp em, muốn hai người có thời gian bên nhau nhiều hơn để có thể cùng nhau tâm sự nhưng không lần nào thành cả, lúc em rảnh thì tôi lại bận, lúc tôi rảnh thì em lại bận không thể đi được, chúng tôi vẫn như thế mãi.
☼ 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:
<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 bên dưới vào trước dòng ]]></b:skin>
.s-content {
border: #ccc 1px solid ;
margin: 10px;
padding: 5px;
background: #CFE6F9;
width: 150px;
float: right;
text-align: justify;
}
- Save template.
- 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:
<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.
0 nhận xét:
Đăng nhận xét