Tạo chữ to đầu dòng cho bài viết giống tạp chí

Có nhiều cách để làm cho bài viết của bạn trông đẹp mắt hơn, ví dụ như tạo bố cục rõ ràng, phối màu trong bài viết, chèn 1 hiệu ứng nào đó vào bài viết... Hôm nay mình sẽ hướng dẫn cho các bạn cách tạo chữ to đầu dòng bài viết. (giống như các bài báo hay tạp chí).

C

ó nhiều cách để làm cho bài viết của bạn trông đẹp mắt hơn, ví dụ như tạo bố cục rõ ràng, phối màu trong bài viết, chèn 1 hiệu hứng nào đó vào bài viết... Hôm nay mình sẽ hướng dẫn cho các bạn cách tạo chữ to đầu dòng bài viết.

Cách 1: Phương pháp thủ công

- Với cách này mỗi khi bạn tạo hiệu ứng trên thì phải gõ cả đọan code vào.
- Và dưới đây là đọan code:

<span style="float:left;color: #0C3259;background:#BCBBBB;line-height:80px; padding:1px 5px 0 0; font-family:times; margin: 0px 5px 5px 0px; font-size:100px;"">{Kí tự đầu tiên}</span>

Trong đó:

- background:#fff -> màu nền của ô chữ (ở đây là màu trắng)

- line-height:80px -> độ cao của ô chữ

- font-size:100px -> độ cao của chữ


Ưu điểm của bước 1 là bạn có thể thay đổi style tùy thích bằng cách thêm hay bớt các thuộc tính của thẻ <span>

Cách 2: Tạo 1 class trong CCS

Khi đã làm ở cách 1 nhiều lần, và bạn thấy thích nhất 1 kiểu nào đó (tạo 1 style chung cho các bài viết) khi đó hãy tạo 1 class trong CCS, và mỗi khi sử dụng thì ta chỉ cần gọi class đó ra thôi, không cần phải đánh cả đọan code vào.

2.1. Viết 1 code CSS cho riêng mình:

Copy đọan CCS bên dưới đặt ngay trên dòng : ]]></b:skin>.

/* magazine drop caps by Chinhtrucblog */
.magazine {
float:left;color:#000;background:#fff;line-height:80px;padding-:1px 5px 0 0;font-family:times;
font-size:100px;}

2.2. Cách đăng bài

Như vậy mỗi lần muốn tạo kiểu chữ như vậy, bạn chỉ cần làm như sau<span class="magazine">{Kí tự đầu tiên} </span>