List trong CSS || Danh sách trong CSS || ul và li trong CSS list 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ố, ...

Trang 1

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:

Trang 2

disc (default) Một dấu chấm tròn

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:

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 - style

-type : circle ; > <li> Java </li> <li> Android </li>

<li> Java </li> <li> Android </li> <li> C++ </li> </ul>

<li> Android </li> <li> C++ </li> </ol> <ol style = list - style - type : lower - alpha ; > <li> Java </li>

<li> Android </li> <li> C++ </li> </ol> <ol

Trang 3

style = list - style - type : lower - roman ; > <li> Java </li>

<li> Android </li> <li> C++ </li> </ol> </body> </html> Kết quả là: 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 - style -type : circle ; list - style - position : outside ; > <li> Java </li>

<li> Android </li> <li> C++ </li> </ul> <ul style = list - style - type : square ; list - style - position : inside ; >

<li> Java </li> <li> Android </li> <li> C++ </li> </ul>

<li> Java </li> <li> Android </li> <li> C++ </li> </ol>

<li> Java </li> <li> Android </li> <li> C++ </li> </ol>

</body> </html> Kết quả là: 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 = list -style - image : url ( / images / bullet gif ); " Java </li> <li> Android </li>

<li> C++ </li> </ul> <ol> <li style = list - style -image : url ( / images / bullet gif ); " Java </li> <li> Android </li>

Kết quả là:

Trang 4

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> Java </li> <li> Android </li>

<li> C++ </li> </ul> <ol style = list - style : outside upper

-alpha ; > <li> Java </li> <li> Android </li> <li> C++ </li>

</ol> </body> </html>

Kết quả là:

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> Java </li> <li> Android </li>

<li> C++ </li> </ul> <ol style = list - style : outside upper

-alpha ; marker - offset : 2cm ; > <li> Java </li> <li> Android </li>

Kết quả là:

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 :

Trang 5

5px ; margin - left : 35px ; } ul li { background : #cce5ff; margin : 5px ; }

Định dạng
Số trang	5
Dung lượng	210,33 KB