Tạo viền bao nội dung độc đáo nhờ thẻ fieldset

Cùng Chuyên Mục

Viền bao quanh 1 đoạn văn bản hay 1 danh sách liệt kê nào đó cũng đều sẽ tạo nên sự khoa học về cách trình bày nội dung cho mỗi bài viết. Thông thường, ta hay dùng thuộc tính border bình thường để tạo viền và nếu muốn tạo điểm nhấn ở tiêu đề thì phải chèn thêm ảnh để ẩn đi... Nhưng hôm nay mình sẽ hướng dẫn các bạn 1 cách mới vô cùng đơn giản và nhanh gọn mà vẫn đem lại hiệu quả đó là dùng thẻ <fieldset> có sẵn trong HTML.

How to use

tag?

Mục lục

• Fieldset là gì?
• Các bước thực hiện
• Cách dùng
• Lời kết

Fieldset là gì?

Bạn có thể hiểu nôm na như này cho dễ là <fieldset> là thẻ trong HTML dùng để nhóm một tổ hợp các phần tử trong nó, có thể là các <input> trong một <form>, <label>, <textarea> hay đơn giản chỉ là các thẻ <ul>, <ol>, <li>, <p>, <span>... Việc lựa chọn tổ hợp nào là tùy ở cách dùng của bạn, nó không ràng buộc gì cả đâu.

Đặc biệt, fieldset hỗ trợ hầu hết các trình duyệt. Tuy nhiên, có 1 số thuộc tính dành cho HTML5 thì chỉ tương thích với phiên bản nhất định trở lên của trình duyệt thôi (tham khảo thêm tại: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)

Các bước thực hiện

Bước 1: Truy cập trang quản trị tại blogger.com - Chủ đề - Chỉnh sửa HTML.

Bước 2: Chèn CSS của <fieldset> và <legend> dưới đây trước

</head>

(mặc định nó cũng có rồi nhưng để cho chắc chắn và dễ chỉnh sửa sau này thì chèn lại trực tiếp cũng không ảnh hưởng nhé, code mình đưa là cũng đã chỉnh sửa tí xíu rồi)

<b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Thẻ điều kiện cho phép css chỉ hoạt động trong trang bài viết --> 
<style>
fieldset {display: block;border: 1px solid rgba(68, 34, 68, 0.3);border-radius:5px;margin:0 2px;padding: 0.35em 0.75em 0.65em 0.75em;} 
legend {display: block; padding: 0 2px;}
</style>
</b:if>

Bước 3: Lưu template lại.

Cách dùng

Để sử dụng thẻ <fieldset> này bạn chỉ cần nhớ cho mình đoạn code đơn giản sau:

<fieldset>
<legend>Tiêu đề khung</legend>
<!-- Nội dung cần được bao -->
</fieldset>

Ví dụ: Bạn muốn tạo một danh sách các loại giao diện theo từng năm trong bài viết nào đó và muốn nó được bao bằng thẻ <fieldset>, khi đó bạn sẽ dùng code sau:

<fieldset>
<legend>Blogger Template</legend>
<ul>
<li>Template 2018</li>
<li>Template 2017</li>
<li>Template 2016</li>
</ul>
</fieldset>

Kết quả:

Blogger Template

• Template 2018
• Template 2017
• Template 2016

Lời kết

Để khai thác hết lợi ích mà <fieldset> đem lại, mình nghĩ không mất quá nhiều thời gian đâu. Đôi khi những thẻ có sẵn cũng giúp ích được cho ta rất nhiều đấy. Tùy vào sự sáng tạo của bạn thì hoàn toàn có thể dùng nó cho nhiều mục đích khác. Riêng đối với blog mình thì mình đang dùng cho cái mục lục phía trên đó. Chúc các bạn thành công nhé và đừng quên chia sẻ bài viết nếu thấy nó có ích nha.