Chủ đề tiếp theo đây CNET muốn chia sẻ với các bạn đọc về sử dụng thuộc tính danh sách trong thế giới của CSS. Việc sử dụng thuộc tính danh sách là một phần quan trọng của việc tạo ra giao diện web linh hoạt và thú vị. Từ việc định dạng danh sách đơn giản đến việc tạo ra các biểu tượng hoặc chú thích đặc biệt, CSS cung cấp các công cụ mạnh mẽ cho việc tùy chỉnh danh sách theo ý muốn. Sự sáng tạo và linh hoạt của các thuộc tính như list-style-type, list-style-image, và list-style-position giúp tạo ra danh sách đa dạng và phong phú, giúp nâng cao trải nghiệm người dùng trên trang web. Hãy cùng CNET đi sâu vào tìm hiểu các thuộc tính danh sách trong CSS ngay sau đây.
- List trong HTML và thuộc tính danh sách CSS
- Thuộc tính list-style-type
- Thuộc tính list-style-image
- Thuộc tính list-style-position
- Xóa cài đặt mặc định
- Thuộc tính list-style - Thuộc tính viết tắt
- Kiểu dáng và màu sắc của danh sách
1.List trong HTML và thuộc tính danh sách CSS
Trong HTML, có hai loại danh sách chính:
Danh sách không có thứ tự (<ul>) - các mục trong danh sách được đánh dấu bằng dấu đầu dòng
Danh sách có thứ tự (<ol>) - các mục trong danh sách được đánh dấu bằng số hoặc chữ cái
Thuộc tính danh sách CSS cho phép bạn:
Đặt các điểm đánh dấu mục danh sách khác nhau cho danh sách được sắp xếp
Đặt các điểm đánh dấu mục danh sách khác nhau cho danh sách không có thứ tự
Đặt hình ảnh làm điểm đánh dấu mục danh sách
Thêm màu nền vào danh sách và mục danh sách
2.Thuộc tính list-style-type
Thuộc tính list-style-type là một thuộc tính được sử dụng để định dạng kiểu của các dấu đầu dòng trong danh sách HTML. Bằng cách sử dụng list-style-type, bạn có thể chọn loại dấu đầu dòng như dấu chấm, số, chữ cái, hoặc không có dấu đầu dòng.
- list-style-type: Xác định kiểu hiển thị của các dấu chấm hoặc ký tự trong danh sách. Các giá trị thường gặp bao gồm:
- disc: Dấu chấm tròn mặc định cho danh sách không có sắp xếp.
- circle: Vòng tròn trống.
- square: Hình vuông.
- decimal: Số thập phân.
- lower-alpha: Chữ cái thường (a, b, c, ...).
- upper-alpha: Chữ cái hoa (A, B, C, ...).
Và nhiều giá trị khác nữa.
Ví dụ trên biểu hiện các giá trị của thuộc tính list-style-type, ngoài ra bạn có thể tùy chỉnh kiểu của dấu đầu dòng để phù hợp với thiết kế của bạn.
3.Thuộc tính list-style-image
Thuộc tính list-style-image cho phép bạn sử dụng một hình ảnh làm dấu chấm hoặc ký tự thay vì sử dụng các giá trị mặc định, chỉ định một hình ảnh làm điểm đánh dấu mục danh sách:
Lưu ý:
- Hình ảnh được chỉ định bởi list-style-image sẽ thay thế cho dấu đầu dòng mặc định (như dấu chấm cho danh sách không có số).
- Hình ảnh sẽ được hiển thị bên trái của mỗi mục trong danh sách.
- Đường dẫn tới hình ảnh có thể là đường dẫn tuyệt đối hoặc tương đối tới tệp hình ảnh.
- Bạn cũng có thể sử dụng dữ liệu ảnh (data URIs) hoặc các giá trị khác như linear gradients.
- Nếu không thể tải hình ảnh, các ký hiệu mặc định (như dấu chấm) sẽ được sử dụng thay thế.
Khi sử dụng list-style-image, bạn có thể tạo ra các danh sách độc đáo và phong phú hơn bằng cách sử dụng hình ảnh tùy chỉnh thay vì các ký hiệu mặc định.
4.Thuộc tính list-style-position
Thuộc tính list-style-position chỉ định vị trí của các điểm đánh dấu mục danh sách (dấu đầu dòng) so với vị trí của nội dung của mục trong danh sách.
- list-style-position thường được dùng với một số giá trị như:
- Inside: Dấu đầu dòng nằm bên trong khối nội dung của mỗi mục trong danh sách.
- Outside: Dấu đầu dòng nằm bên ngoài khối nội dung của mỗi mục trong danh sách. Đây là giá trị mặc định.
- Khi sử dụng giá trị inside, dấu đầu dòng sẽ được hiển thị trong phần nội dung của mỗi mục trong danh sách và không gian đầu dòng sẽ được giữ nguyên.
- Khi sử dụng giá trị outside, dấu đầu dòng sẽ được hiển thị bên ngoài khối nội dung của mỗi mục trong danh sách và không gian đầu dòng sẽ bị giảm đi để làm cho không gian cho dấu đầu dòng.
5.Xóa cài đặt mặc định
Để xóa cài đặt mặc định cho thuộc tính danh sách CSS, bạn có thể đặt giá trị của thuộc tính đó thành none, nó cũng có thể được sử dụng để xóa điểm đánh dấu/dấu đầu dòng. Tuy nhiên ở danh sách cũng có lề và phần đệm mặc định. Để loại bỏ phần này, hãy thêm margin:0 và padding:0 vào <ul> hoặc <ol>:
Trong ví dụ trên, list-style-type được đặt thành none và margin, padding đều được đặt thành 0, điều này sẽ loại bỏ dấu đầu dòng mặc định (thường là dấu chấm) cho tất cả các mục trong danh sách <ul>. Điều này giúp bạn tạo ra một danh sách không có dấu đầu dòng, theo ý bạn muốn.
Lưu ý: Việc xóa cài đặt mặc định có thể ảnh hưởng đến trải nghiệm người dùng nếu họ dựa vào các dấu đầu dòng để định hình cấu trúc của danh sách. Hãy sử dụng cẩn thận và đảm bảo rằng sự thay đổi này phản ánh đúng yêu cầu thiết kế.
6.Thuộc tính list-style - Thuộc tính viết tắt
Thuộc tính viết tắt list-style được sử dụng để thiết lập cùng một lúc ba thuộc tính danh sách chính: list-style-type, list-style-image, và list-style-position. Bằng cách này, bạn có thể xác định kiểu dấu đầu dòng, hình ảnh dấu đầu dòng, và vị trí của dấu đầu dòng một cách đồng thời.
Khi sử dụng thuộc tính, thứ tự của các giá trị thuộc tính là:
- list-style-type (nếu chỉ định list-style-image, giá trị của thuộc tính này sẽ được hiển thị nếu hình ảnh vì lý do nào đó không thể hiển thị)
- list-style-position (chỉ định xem các điểm đánh dấu mục danh sách sẽ xuất hiện bên trong hay bên ngoài luồng nội dung)
- list-style-image (chỉ định một hình ảnh làm điểm đánh dấu mục danh sách)
Nếu thiếu một trong các giá trị thuộc tính ở trên thì giá trị mặc định cho thuộc tính bị thiếu sẽ được chèn vào. Việc sử dụng list-style giúp viết ngắn gọn và tiết kiệm không gian trong mã CSS.
Trong ví dụ trên:
- list-style-type được đặt thành square.
- list-style-position được đặt thành inside.
- list-style-image được đặt thành url("sqpurple.gif").
7. Kiểu dáng và màu sắc của danh sách
Bất cứ điều gì được thêm vào thẻ <ol> hoặc <ul> sẽ ảnh hưởng đến toàn bộ danh sách, trong khi các thuộc tính được thêm vào thẻ <li> sẽ ảnh hưởng đến từng mục trong danh sách. Để tạo kiểu dáng và màu sắc cho danh sách trong CSS, có thể sử dụng các thuộc tính như list-style-type, color, font-family, font-size, và background-color,...
Có thể linh hoạt điều chỉnh các giá trị này theo ý muốn để tạo ra giao diện danh sách phù hợp với thiết kế mong muốn của mình.
Như vậy, bằng cách sử dụng các thuộc tính danh sách trong CSS, có thể tạo ra các danh sách đa dạng và phong phú mà không chỉ đơn giản là các dấu chấm hoặc số, Những tính năng này giúp tăng tính linh hoạt và sáng tạo trong thiết kế web, tạo ra trải nghiệm người dùng tốt hơn và nâng cao giá trị thẩm mỹ của trang web. Tiếp tục cùng CNET thực học - thực hành trên chặng đường tìm hiểu và đi sâu về lập trình Web ở các chủ đề tiếp theo nhé.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
