Tạo chữ Drop Cap đầu dòng đoạn văn cho website/blog

Drop Cap là hiệu ứng phóng to chữ cái đầu tiên của mỗi đoạn văn để làm nổi bật cho nó, thu hút sự chú ý của độc giả. Ta thường thấy nó xuất hiện trên các trang báo, tạp chí và thường áp dụng với đoạn văn đầu tiên của bài báo. Bài viết này mình sẽ chia sẻ với các bạn một cách đơn giản để tạo Drop Cap cho website/blog.

Bước 1 - Cấu hình HTML - CSS:

Chèn đoạn code dưới đây vào sau thẻ đóng </head> trong trình template editor của website/blog: 

1<style type='text/css'>
large{float:left;font-size:50px;line-height:40px;padding-top:1px;padding-right:5px}
</style>

Bước 2 - Sử dụng:

- Để phóng to chữ cái đầu dòng mỗi đoạn văn, các bạn sử dụng cặp thẻ <large>Chữ cái đầu dòng</large>. Mình lấy ví dụ đoạn văn đầu tiên của bài viết này, mình sẽ có đoạn code như sau:

1<large>D</large>rop Cap là hiệu ứng phóng to chữ cái đầu tiên...

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