Kiểu danh sách CSS

Danh sách là một cách quan trọng để hiển thị dữ liệu trong HTML. Khi bạn có một số mục có chủ đề chung, chẳng hạn như cỡ giày hoặc công cụ điều hướng, cách hiệu quả nhất để trình bày dữ liệu có thể là sử dụng danh sách.

Theo mặc định, danh sách trong HTML khá đơn giản. Đó là nơi xuất hiện thuộc tính kiểu danh sách CSS. Thuộc tính kiểu danh sách và các thuộc tính phụ của nó được sử dụng để tùy chỉnh danh sách nhằm bổ sung cho thiết kế trang web độc đáo của bạn.

Hướng dẫn này sẽ bao gồm các ví dụ về cách tạo kiểu danh sách trong CSS bằng cách sử dụng thuộc tính kiểu danh sách và các thuộc tính phụ của nó. Nó cũng sẽ trình bày cách đặt màu nền của danh sách và các mục của nó. Sau khi đọc hướng dẫn này, bạn sẽ trở thành chuyên gia tạo kiểu danh sách bằng CSS.

Danh sách HTML và CSS

Danh sách được sử dụng để hiển thị một số mục được kết nối. Trong HTML, có ba loại danh sách bạn có thể sử dụng để trình bày dữ liệu. Đó là:

• Danh sách không có thứ tự (
  ) - Danh sách các mục có giá trị được đánh dấu bằng dấu đầu dòng.
  • Danh sách có thứ tự (
    ) - Danh sách các mục có giá trị được đánh dấu bằng hệ thống đặt hàng (ví dụ:số hoặc chữ cái liên tiếp).
    1. Danh sách định nghĩa (

       ) - Danh sách các mục có mô tả kèm theo.

  Nếu bạn muốn tìm hiểu thêm về danh sách HTML, hãy đọc bài viết của chúng tôi về danh sách trong HTML.
  

  Mỗi loại danh sách trên đều có kiểu HTML mặc định riêng. Ngoài ra, CSS cung cấp một số thuộc tính mà bạn có thể sử dụng để làm cho danh sách của mình đẹp hơn về mặt thẩm mỹ và phù hợp hơn với hướng dẫn kiểu của bạn.
  

  Thuộc tính danh sách CSS cho phép bạn:
  

  • Thay đổi các điểm đánh dấu mục cho các danh sách đã sắp xếp.
  • Thay đổi các điểm đánh dấu mục cho các 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à các mục của chúng.

  Trong hướng dẫn này, chúng ta sẽ thảo luận về hai cách tổng quát để định kiểu danh sách trong CSS:thuộc tính kiểu danh sách thông qua các thuộc tính con riêng lẻ của nó và thuộc tính viết tắt kiểu danh sách. Các thuộc tính phụ của thuộc tính kiểu danh sách là:
  

  81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

  Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

  • list-style-type
  • list-style-position
  • list-style-image

  Thuộc tính viết tắt kiểu danh sách được viết là:
  

   list-style:[list-style-type] [list-style-position] [list-style-image]; 

  Chúng ta cũng sẽ thảo luận về cách thêm màu nền vào danh sách và các mục trong danh sách.

  Ví dụ về danh sách HTML cơ bản

  Đầu tiên, hãy xem một ví dụ về danh sách trong HTML. Giả sử một tiệm bánh mì địa phương yêu cầu chúng tôi tạo một trang web bao gồm danh sách các công thức nấu ăn để khách hàng sử dụng tại nhà.
  

  Đây là mã HTML cơ bản mà chúng tôi sẽ sử dụng để xác định danh sách của mình:

   
   
   Bánh bướm 
   
   Khay sô-cô-la 
   
   Bánh trái chanh 
   
   Bánh quy bơ đậu phộng 
   
   Bánh nướng xốp sô-cô-la 
   
   

  Danh sách của chúng tôi xuất hiện như sau:
  

  

  Danh sách của chúng tôi có năm mục. Chúng tôi đính kèm từng mục danh sách trong <li> các thẻ. (“Li” là viết tắt của “mục danh sách.”) Chúng tôi gửi kèm theo những <li> này các thẻ trong <ul> nhãn. <ul> thẻ xác định một danh sách không có thứ tự.
  

  Vì đây là danh sách không có thứ tự, trình duyệt web của chúng tôi đặt dấu đầu dòng trước mỗi mục trong danh sách. (Nếu đó là một danh sách có thứ tự, trình duyệt web của chúng tôi sẽ đặt một giá trị có thể xác định được — thường là một số hoặc một chữ cái — trước mỗi mục trong danh sách.)
  

  Bây giờ, hãy khám phá cách chúng ta có thể tạo kiểu danh sách bằng cách sử dụng thuộc tính kiểu danh sách.

  Điểm đánh dấu mục trong danh sách

  Thuộc tính kiểu danh sách được sử dụng để chỉ định loại điểm đánh dấu được sử dụng cho các mục trong danh sách.

  Điểm đánh dấu mục trong danh sách không theo thứ tự

  Giả sử tiệm bánh yêu cầu chúng tôi hiển thị danh sách của họ trông như thế nào với dấu đầu dòng hình tròn so với dấu đầu dòng hình vuông đứng trước mỗi mục danh sách. Chúng tôi có thể sử dụng mã sau để tạo các thiết kế này cho tiệm bánh:

   styles.cssli.circlebulletPoint {list-style-type:circle;} li.squarebulletPoint {list-style-type:square;} index.html 
   
   Butterfly Cakes 
   
   Khay sô cô la 
   
   Bánh kem chanh 
   
   Bánh quy bơ đậu phộng 
   
   Bánh nướng xốp sô cô la 
   
   

Mã của chúng tôi trả về:

Như bạn có thể thấy, mục danh sách đầu tiên của chúng tôi sử dụng kiểu đánh dấu dấu đầu dòng hình tròn. Chúng tôi đã hoàn thành điều này bằng cách gán giá trị lớp “circlebulletPoint” —và do đó, kiểu tương ứng của giá trị đó — cho mục danh sách đầu tiên của chúng tôi. Chúng tôi đã gán giá trị lớp “squarebulletPoint” cho mục danh sách thứ hai của chúng tôi, vì vậy trình duyệt web hiển thị một dấu đầu dòng hình vuông trước mục đó.

Có những kiểu kiểu danh sách khác có thể được áp dụng cho danh sách, đó là:

• đĩa
• vòng kết nối
• thập phân
• số thập phân-đứng đầu-số 0
• chữ La Mã thường
• chữ viết hoa
• tiếng Hy Lạp thấp hơn
• chữ latin thấp hơn
• chữ latin viết hoa
• armenia
• georgian
• alpha thấp hơn
• không

Chúng tôi thảo luận một số trong số này áp dụng cho các danh sách có thứ tự trong phần tiếp theo.

Điểm đánh dấu mục trong danh sách có thứ tự

Danh sách có thứ tự có kiểu đánh dấu mục riêng.

Giả sử chúng ta muốn các công thức của tiệm bánh được hiển thị trong danh sách có thứ tự. Chúng tôi muốn xem danh sách của mình trông như thế nào với thứ tự của nó được đánh dấu bằng chữ cái viết thường đứng trước mỗi mục trong danh sách và nó trông như thế nào với một chữ số La Mã viết hoa đứng trước mỗi mục trong danh sách. Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:

 styles.cssli.alpha {list-style-type:Lower-alpha;} li.roman {list-style-type:upper-roman;} index.html 
 
 Con bướm Cakes 
 
 Chocolate Traybake 
 
 Lemon Pound Cake 
 
 Bánh bích quy bơ đậu phộng 
 
 Bánh nướng xốp sô cô la 
 
 

Mã của chúng tôi trả về:

Trong ví dụ này, chúng tôi đã sử dụng danh sách có thứ tự (

) thay vì danh sách không có thứ tự. Điều này cho phép chúng tôi sắp xếp danh sách của mình bằng số (hoặc chữ cái, v.v.). Sau đó, chúng tôi đánh dấu mục đầu tiên trong danh sách của mình bằng chữ cái viết thường và mục thứ hai trong danh sách của chúng tôi bằng chữ số La Mã viết hoa.

Xóa kiểu đánh dấu mục trong danh sách mặc định

Có ba thuộc tính CSS mà chúng tôi có thể sử dụng trong mã của mình để xóa các khía cạnh của kiểu mặc định khỏi danh sách:kiểu danh sách, lề và phần đệm.

Đặt list-style-type thành Không có

Nếu chúng tôi không muốn bất kỳ loại dấu đầu dòng hoặc chỉ báo thứ tự nào (như số hoặc chữ cái) trước các mục danh sách, chúng tôi có thể đặt thuộc tính list-style-type thành không. Dưới đây là một ví dụ về việc sử dụng thuộc tính này để xóa bất kỳ dấu đầu dòng hoặc chỉ báo thứ tự nào trong danh sách:

 styles.cssul {list-style-type:none;} index.html 
 
 Bánh hình bướm 
 
 Khay sô cô la 
 
 Bánh kem chanh 
 
 Bánh quy bơ đậu phộng 
 
 Bánh nướng xốp sô cô la 
 
 

Mã của chúng tôi trả về:




Danh sách của chúng tôi vẫn được cấu trúc dưới dạng danh sách, nhưng khi hiển thị trên trang web, các mục của danh sách thiếu điểm đánh dấu.

Vị trí điểm đánh dấu

Thuộc tính list-style-position được sử dụng để chỉ định vị trí của các điểm đánh dấu mục danh sách trong danh sách.


Có hai vị trí mà các điểm đánh dấu mục cho danh sách có thể xuất hiện:bên trong và bên ngoài. Nếu các điểm đánh dấu danh sách xuất hiện bên trong danh sách, văn bản sẽ xuất hiện ngay bên cạnh các điểm đánh dấu mục; nếu các điểm đánh dấu danh sách xuất hiện bên ngoài danh sách, sẽ có một khoảng cách giữa các điểm đánh dấu danh sách và các mục văn bản trong danh sách.


Dưới đây là hai quy tắc CSS ví dụ minh họa cách có thể áp dụng vị trí kiểu danh sách ở cả hai trạng thái sau:

 ul.a {list-style-position:external;} ul.b {list-style-position:inside;} 

Trong danh sách đầu tiên của chúng tôi, chúng tôi đã sử dụng list-style-position:external style. Đây là kiểu mặc định được áp dụng cho danh sách. Do đó, nếu chúng tôi không chỉ định vị trí này hoặc bất kỳ vị trí kiểu danh sách nào khác trong khối mã của chúng tôi, trình duyệt sẽ đặt mặc định vị trí này cho các điểm đánh dấu mục danh sách. Sau đây là mã cho danh sách tiệm bánh của chúng tôi sử dụng kiểu này:

 
 
 Bánh bướm 
 
 Khay sô cô la 
 
 Bánh kem chanh 
 
 Bánh quy bơ đậu phộng 
 
 Bánh nướng xốp sô cô la 
 
 

Mã trả về:




Trong kiểu này, các điểm đánh dấu mục danh sách (trong trường hợp này là dấu đầu dòng) xuất hiện bên ngoài các mục danh sách của chúng tôi.


Trong danh sách thứ hai, chúng tôi đã chỉ định vị trí của các điểm đánh dấu mục danh sách là “bên trong”. Sau đây là mã cho danh sách tiệm bánh của chúng tôi sử dụng kiểu này:

 
 
 Bánh bướm 
 
 Khay sô cô la 
 
 Bánh kem chanh 
 
 Bánh quy bơ đậu phộng 
 
 Bánh nướng xốp sô cô la 
 
 

Mã trả về:




Thật khó để nói nhưng vị trí của các điểm đánh dấu mục danh sách của chúng tôi hiện nằm ngoài mục danh sách.

Công cụ đánh dấu hình ảnh

Danh sách thường sử dụng các điểm đánh dấu tùy chỉnh với hình ảnh. Nếu bạn muốn đặt điểm đánh dấu cho một mục danh sách thành một hình ảnh, bạn có thể sử dụng thuộc tính CSS list-style-image.


Giả sử tiệm bánh yêu cầu chúng tôi thay đổi các điểm đánh dấu mục danh sách trong danh sách của họ thành hình ảnh của một chiếc bánh (thay vì dấu đầu dòng, số, v.v.). Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:

 styles.cssul {list-style-image:url ("https://img.icons8.com/small/16/000000/cake.png");} index.html 
 
 Bánh bướm 
 
 Khay sô cô la 
 
 Bánh kem chanh 
 
 Bánh quy bơ đậu phộng 
 
 Bánh nướng xốp sô cô la 
 
 

Mã của chúng tôi trả về:




Như bạn có thể thấy, thay vì sử dụng điểm đánh dấu mục danh sách mặc định, chúng tôi đã sử dụng điểm đánh dấu của riêng mình. Trong trường hợp này, điểm đánh dấu mục danh sách của chúng tôi là hình ảnh của một chiếc bánh.

Thuộc tính viết tắt kiểu danh sách

Chúng ta đã thảo luận về các thuộc tính phụ của thuộc tính kiểu danh sách. Những điều này đã cho phép chúng tôi áp dụng các phong cách riêng lẻ vào danh sách của chúng tôi.


Tuy nhiên, có một cách hiệu quả hơn để tạo kiểu danh sách. Thay vì sử dụng từng thuộc tính con riêng lẻ để tạo kiểu danh sách, chúng ta có thể sử dụng thuộc tính viết tắt kiểu danh sách. Đây là cú pháp cho thuộc tính viết tắt kiểu danh sách:

 ul {list-style:[list-style-type] [list-style-position] [list-style-image]; 

Thứ tự của các giá trị được chỉ định ở trên là thứ tự bạn cần sử dụng với thuộc tính viết tắt kiểu danh sách. Nếu bạn không chỉ định giá trị cho một trong ba thuộc tính con tạo nên cú pháp viết tắt, thì trình duyệt web sẽ sử dụng giá trị mặc định của thuộc tính con đó.


Giả sử chúng ta muốn tạo kiểu danh sách các công thức làm bánh nướng bằng hình ảnh chiếc bánh và cũng di chuyển từng điểm đánh dấu mục trong danh sách ra bên ngoài danh sách của chúng ta. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

 styles.cssul {list-style:external url ('https://img.icons8.com/small/16/000000/cake.png');} index.html 
 
 Bánh bướm 
 
 Khay sô cô la 
 
 Bánh kem chanh 
 
 Bánh quy bơ đậu phộng 
 
 Bánh nướng xốp sô cô la 
 
 

Mã của chúng tôi trả về:




Danh sách của chúng tôi hiện sử dụng hình ảnh chiếc bánh cho từng điểm đánh dấu mục danh sách. Ngoài ra, mỗi điểm đánh dấu mục danh sách được tạo kiểu bên ngoài danh sách của chúng tôi.

Màu danh sách CSS

Khi thiết kế danh sách, bạn có thể quyết định rằng bạn muốn danh sách hiển thị màu nền.


Giả sử tiệm bánh yêu cầu chúng ta đặt màu nền của toàn bộ danh sách thành màu xanh lam nhạt và sử dụng màu nền hồng cho từng món trong danh sách. Chúng ta có thể sử dụng thuộc tính nền CSS để thực hiện tác vụ này, như sau:

 ul {background:lightblue; padding:10px;} ul li {background:pink; margin:10px;} 

Mã của chúng tôi trả về:

 
 
 Bánh bướm 
 
 Khay sô-cô-la 
 
 Bánh trái chanh 
 
 Bánh quy bơ đậu phộng 
 
 Bánh nướng xốp sô-cô-la 
 
 

Trong mã của chúng tôi, chúng tôi đã áp dụng màu nền xanh lam nhạt bằng cách sử dụng thuộc tính nền cho <ul> phần tử này tạo ra một danh sách không có thứ tự. Chúng tôi cũng đã đưa ra <ul> thành phần đệm 10px bằng cách sử dụng thuộc tính padding.




Chúng tôi cũng áp dụng nền màu hồng và tạo lề 10px xung quanh mỗi mục danh sách.


Chúng tôi đã hoàn thành điều này bằng cách đưa các kiểu của mình vào bộ chọn “ul li”, như bạn có thể thấy ở trên. Bộ chọn này nói rằng nền màu hồng và lề 10px nên được áp dụng cho tất cả <li> các thẻ nằm trong <ul> thẻ.

Kết luận

Khi làm việc với danh sách HTML, bạn có thể sử dụng CSS để áp dụng các kiểu tùy chỉnh cho các danh sách đó để làm cho chúng đẹp hơn về mặt thẩm mỹ. Thuộc tính kiểu danh sách được sử dụng để áp dụng kiểu cho (hoặc xóa kiểu khỏi) danh sách trong CSS.


Hướng dẫn này đã thảo luận, với các ví dụ, cách sử dụng thuộc tính kiểu danh sách CSS và ba thuộc tính con của nó. Chúng tôi cũng thảo luận về cách đặt màu nền cho danh sách và các mục bên trong danh sách.


Bây giờ bạn đã có kiến ​​thức cần thiết để bắt đầu tạo kiểu danh sách trong CSS như một người chuyên nghiệp!