Bạn đã được học HTML, bạn hiểu rất rõ về các thẻ tạo List (danh sách) trong HTML. List cũng cung cấp cho bạn nhiều công dụng trong thiết kế web, chẳng hạn bạn có thể biến chúng thành các “Trình đơn” (Menu – ngang, dọc), dùng chúng để liệt kê một sê-ri ảnh, mẩu tin, danh sách các hạng mục, v.v… Bạn có thể thay đổi danh sách với các kiểu khác nhau như bullet tròn, vuông, v.v.. tuy nhiên tất cả những kiểu định dạng sẵn có này đều không đáp ứng được nhu cầu về mỹ thuật. Với CSS bạn có thể tùy biến cho List của mình trở lên sinh động hơn. Bài viết này tôi sẽ giới thiệu 02 cách thức đơn giản để bạn có thể làm được điều này.
Trước hết bạn chuẩn bị một trang HTML chứa đoạn code sau:
[sourcecode language=”html”]
<h4>Tạp chí Lập trình</h4>
<ul>
<li>Tin mới</li>
<li>Array trong Javascript</li>
<li>Hiệu ứng Shakira</li>
<li>Tìm hiểu Cấu trúc dữ liệu #1: “Chết vì thiếu hiểu biết”</li>
</ul>
[/sourcecode]
Trang này của chúng ta sẽ có kết quả như thế nào chắc bạn đã tưởng tượng ra rồi nhỉ?
Giờ chúng ta sẽ bắt tay vào để làm cho danh sách này đẹp hơn.
Cách thứ nhất:
Sử dụng thuộc tính list-style-image của CSS để thay đổi bullet cho danh sách.
Để tiến hành cách này bạn tìm một icon mà mình thấy phù hợp nhất cho danh sách kể trên, còn đây là icon tôi chọn:
(bullet_green.png)
Icon này tôi đặt vào thư mục icons, là thư mục con của thư mục chứa trang HTML kể trên. Bây giờ ta sẽ định nghĩa một selector (bộ định kiểu) cho danh sách của mình, đơn giản như sau:
[sourcecode language=”css”]
ul{
list-style-image: url(‘icons/bullet_green.png’);
}
[/sourcecode]
Kết quả như ảnh minh họa dưới đây, chúng ta sẽ có một danh sách với bullet sinh động hơn so với ban đầu.
Vậy đấy, chỉ với một chút cải tiến ta đã có danh sách với các bullet khác nhau thay vì sử dụng những icon mặc định của nó.
Ưu điểm: Đơn giản, nhanh chóng đạt được kết quả
Nhược điểm: Một số trình duyệt không hỗ trợ thuộc tính list-style-image do đó có thể bạn sẽ không nhận được kết quả như mong muốn.
Cách thứ hai:
Sử dụng thuộc tính background-image của CSS để thiết lập bullet cho danh sách.
Chúng ta vẫn tiếp tục sử dụng icon ở trên cho trường hợp này. Tuy nhiên selector dành cho thẻ ul được định nghĩa lại như sau:
[sourcecode language=”css”]
ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}
[/sourcecode]
Selector ở trên sẽ tiến hành bỏ các bullet của danh sách (tròn đen, vuông, tròn trắng) và thiết lập các thông số canh lề, nội dung (margin, padding) về giá trị 0.
Lúc này danh sách của chúng ta sẽ có hình dáng như sau:
Bây giờ là công đoạn cuối trước khi xem xét kết quả, ta cần một selector nữa cho thẻ li, cụ thể như sau:
[sourcecode language=”css”]
li{
/* Thiết lập icon bullet_green.png làm ảnh nền cho li*/
background-image: url(‘icons/bullet_green.png’);
background-repeat: no-repeat;
/* Xác định vị trí của ảnh nền */
background-position: 0 5px;
padding-left: 15px;
}
[/sourcecode]
Nào chúng ta cũng xem xét thành quả của mình:
Để danh sách này thêm sinh động hơn, bạn tìm thêm một icon nữa dành cho trường hợp đưa con trỏ qua mỗi phần tử trong danh sách, chẳng hạn tôi dùng icon sau:
(bullet_yellow.png)
Chúng ta thêm một selector nữa cho thẻ li mỗi khi có hành động đưa con trỏ qua chúng:
[sourcecode language=”css”]
li:hover{
/* Ảnh nền được đổi sang bullet_yellow.png mỗi khi đưa con trỏ qua */
background-image: url(‘icons/bullet_yellow.png’);
/* Con trỏ được chuyển từ Mũi tên sang Bàn tay */
cursor: pointer;
}
[/sourcecode]
Và đây là kết quả mà bạn nhận được với danh sách của mình:
Ưu điểm: Hỗ trợ bởi tất cả các trình duyệt, nhiều tùy chỉnh hơn đối với bullet
Nhược điểm: Mất nhiều thời gian và dòng lệnh hơn so với cách thứ nhất
Kết luận:
Sau bài viết này bạn lại trang bị thêm cho mình một “vũ khí” mới để làm cho trang web của mình ngày càng sinh động hơn. Bạn cũng thấy được sự hiệu quả khi kết hợp HTML với CSS trong phát triển website. Chúc bạn thành công :o)
Nguồn tham khảo thêm: http://css.maxdesign.com.au/listutorial/index.htm
