List trong CSS Trình bày hay liệt kê một danh sách có kèm theo các bullet hoặc dưới dạng đánh số giúp phần văn bản của bạn dễ đọc và tạo cảm giác thân thiện hơn. Để tạo style riêng cho phần list, bạn có thể sử dụng các thuộc tính trong CSS. Có 5 thuộc tính trong CSS Thuộc tính list-style-type cho phép bạn kiểm soát hình dạng hay bề ngoài của Marker (giống như Bullet) chẳng hạn ở dạng hình tròn, hình vuông, hay dạng số,... Thuộc tính list-style-position xác định rằng marker nên xuất hiện bên trong hay bên ngoài luồng hiển thị nội dung. Thuộc tính list-style-image: sử dụng một hình ảnh để làm marker thay cho các bullet hoặc số. Thuộc tính list-style: sử dụng thuộc tính này, bạn có thể khai báo một lần mà vẫn có thể xác định được tất cả các thuộc tính trên. Thuộc tính marker-offset xác định khoảng cách giữa một marker và phần text trong danh sách. Phần tiếp theo trình bày cách sử dụng các thuộc tính trên để tạo style cho danh sách trong CSS. Thuộc tính list-style-type trong CSS Để điều khiển hình dạng (hình tròn, hình vuông, ) của bullet trong trường hợp một danh sách chưa qua sắp xếp và style của các ký tự số (số La Mã, số tự nhiên, ) trong trường hợp danh sách đã được sắp xếp, bạn sử dụng thuộc tính list-style-type trong CSS. Dưới đây là các giá trị có thể được sử dụng cho dạng danh sách chưa qua sắp xếp: Giá trị Miêu tả none Không hiển thị
disc (default) Một dấu chấm tròn circle Một vòng tròn trống square Một hình vuông Dưới đây là các giá trị có thể được sử dụng cho dạng danh sách đã qua sắp xếp: Giá trị Miêu tả Ví dụ decimal Số tự nhiên 1,2,3,4,5 decimal-leading-zero Dạng số, bắt đầu từ 01 01, 02, 03, 04, 05 lower-alpha Dạng chữ cái thường a, b, c, d, e upper-alpha Dạng chữ cái hoa A, B, C, D, E lower-roman Dạng số La Mã thường i, ii, iii, iv, v upper-roman Dạng số La Mã hoa I, II, III, IV, V lower-greek Dạng chữ Hy Lạp thường alpha, beta, gamma Ví dụ sau minh họa cách sử dụng thuộc tính list-style-type và các giá trị của thuộc tính này trong CSS. <html> <head> </head> <body> <ul style="list-styletype:circle;"> <li>android</li> <li>c++</li> </ul> <ul style="list-style-type:square;"> <li>android</li> <li>c++</li> </ul> <ol style="list-style-type:decimal;"> <li>android</li> <li>c++</li> </ol> <ol style="list-style-type:lower-alpha;"> <li>android</li> <li>c++</li> </ol> <ol
style="list-style-type:lower-roman;"> <li>android</li> <li>c++</li> </ol> </body> </html> Thuộc tính list-style-position trong CSS Để xác định xem marker nên hiển thị ở bên trong hay bên ngoài luồng hiển thị nội dung, bạn sử dụng thuộc tính list-style-position trong CSS. Thuộc tính này có thể nhận giá trị: none, inside hoặc outside. Ví dụ sau minh họa cách sử dụng của thuộc tính list-style-position trong CSS: <html> <head> </head> <body> <ul style="list-styletype:circle; list-style-position:outside;"> <li>android</li> <li>c++</li> </ul> <ul style="list-style-type:square;list-style-position:inside;"> <li>android</li> <li>c++</li> </ul> <ol style="list-style-type:decimal;list-style-position:outside;"> <li>android</li> <li>c++</li> </ol> <ol style="list-style-type:lower-alpha;list-style-position:inside;"> <li>android</li> <li>c++</li> </ol> </body> </html> Thuộc tính list-style-image trong CSS Nếu bạn muốn tạo điểm nhấn cho phần danh sách bạn đang tạo, bạn có thể sử dụng một hình ảnh đẹp nào đó để sử dụng thay cho các marker đơn điệu có sẵn. Để thực hiện điều này, bạn sử dụng thuộc tính list-style-image trong CSS. Cú pháp của thuộc tính này tương tự như thuộc tính background-image, tại đây, bạn cần xác định URL tới nơi bạn lưu giữ hình ảnh. Lưu ý rằng, nếu không tìm thấy hình ảnh, thì các bullet mặc định sẽ được sử dụng. Ví dụ sau minh họa cách sử dụng của thuộc tính list-style-image trong CSS <html> <head> </head> <body> <ul> <li style="liststyle-image: url(../images/bullet.gif);">java</li> <li>android</li> <li>c++</li> </ul> <ol> <li style="list-styleimage: url(../images/bullet.gif);">java</li> <li>android</li> <li>c++</li> </ol> </body> </html>
Thuộc tính list-style trong CSS Sử dụng thuộc tính list-style, bạn có thể xác định tất cả style cho danh sách (toàn bộ các thuộc tính ở trên) chỉ trong một khái báo Style Rule. Thứ tự của giá trị các thuộc tính này có thể là tùy ý. Ví dụ sau minh họa cách sử dụng thuộc tính list-style trong CSS: <html> <head> </head> <body> <ul style="list-style: inside square;"> <li>android</li> <li>c++</li> </ul> <ol style="list-style: outside upperalpha;"> <li>android</li> <li>c++</li> </ol> </body> </html> Thuộc tính marker-offset trong CSS Nếu bạn cảm thấy khoảng cách mặc định giữa marker và phần nội dung hiển thị là dài hơn hoặc ngắn hơn bạn mong muốn, và bạn muốn thiết lập lại, bạn nên sử dụng thuộc tính marker-offset. Giá trị của thuộc tính này ở dưới dạng độ dài (đơn vị px, pt, cm, ). Ghi chú: IE 6 và Netscape 7 không hỗ trợ thuộc tính này. Ví dụ sau minh họa cách sử dụng thuộc tính marker-offset trong CSS: <html> <head> </head> <body> <ul style="list-style: inside square; marker-offset:2em;"> <li>android</li> <li>c++</li> </ul> <ol style="list-style: outside upperalpha; marker-offset:2cm;"> <li>android</li> <li>c++</li> </ol> </body> </html> Tạo màu cho List trong CSS Với các thuộc tính đã học từ các chương trước, bạn có thể sử dụng kết hợp chúng với nhau để tạo một danh sách đẹp và lộng lẫy hơn bằng cách thêm màu nền chẳng hạn. Ví dụ dưới đây minh họa cách sử dụng của thuộc tính background-color và thuộc tính padding trong CSS (bạn sẽ học thuộc tính padding trong chương tiếp theo). ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; padding:
5px; margin-left: 35px; } ul li { background: #cce5ff; margin: 5px; }