Danh sách được sử dụng mọi lúc trên web. Các bài viết, menu điều hướng trang web và các tính năng sản phẩm trên trang web thương mại điện tử đều sử dụng danh sách thường xuyên – ngay cả khi bạn không thể biết danh sách đang được sử dụng chỉ bằng cách xem trang web. Vietsang.club sẽ hướng dẫn chi tiết về ba loại danh sách bạn có thể sử dụng và bài viết này sẽ chỉ cho bạn cách sử dụng từng danh sách.

Danh sách không theo thứ tự

Một danh sách không có thứ tự là một danh sách trong đó thứ tự của các mục danh sách không quan trọng. Các danh sách không theo thứ tự nên được sử dụng khi sắp xếp thứ tự các mục trong danh sách sẽ không gây nhầm lẫn hoặc thay đổi ý nghĩa của thông tin trong danh sách.

Phần tử ulmở và đóng một danh sách không có thứ tự. Các mục trong danh sách được chứa giữa danh sách item, li,, tag (thẻ). Một danh sách đơn giản không có thứ tự chứa ba mục có thể được tạo bằng HTML sau đây.

<ul> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ul>

Trừ khi các quy tắc CSS được tạo ra để thay đổi diện mạo của danh sách, bản trình bày mặc định của một danh sách không theo thứ tự là thêm dấu đầu dòng kiểu đĩa ở phía bên trái của từng mục danh sách và thụt lề toàn bộ danh sách.

Dưới đây là cách danh sách không theo thứ tự ngắn của chúng ta hiển thị trong trình duyệt:

.ul_ex {
list-style-type: disc;
padding-left: 32px;
}
  • Item A
  • Item B
  • Item C
 

Danh sách có thứ tự

Danh sách có thứ tự được sử dụng cho danh sách các mục mà thứ tự của các mục không quan trọng. Cú pháp cho danh sách có thứ tự giống hệt với danh sách không có thứ tự. Tuy nhiên, để tạo danh sách có thứ tự, thẻ olđược sử dụng thay vì thẻ ul. Bằng cách thực hiện thay đổi này, chúng ta có thể chuyển đổi danh sách không có thứ tự trong ví dụ trước thành một danh sách có thứ tự.

Chúng ta cũng sẽ thay đổi văn bản của các mục danh sách để làm rõ rằng đây là những mục cần xuất hiện theo thứ tự tuần tự cụ thể.

<ol> <li>Step 1</li> <li>Step 2</li> <li>Step 3</li> </ol>

Như bạn có thể thấy bên dưới, thay vì danh sách có dấu đầu dòng, chúng ta hiện có danh sách được đánh số.

.ol_ex {
list-style-type: decimal;
padding-left: 32px;
margin-bottom: 0px;
}
  1. Step 1
  2. Step 2
  3. Step 3
 

Tạo danh sách đếm ngược

Có những lúc bạn muốn kiểm soát việc đánh số các danh sách có thứ tự. Ví dụ: danh sách của bạn có thể bị chia nhỏ bởi một đoạn xuất hiện giữa danh sách để mở rộng theo một khái niệm nhất định hoặc bạn có thể tạo danh sách đếm ngược bắt đầu ở số cao và đếm ngược. Cuối cùng, có thể bạn muốn sử dụng chữ số La Mã. HTML và CSS giúp dễ dàng kiểm soát việc đánh số các danh sách có thứ tự.

Để đảo ngược số lượng danh sách, chỉ cần thêm thuộc tính reversed vào thẻ ol mở

<ol reversed> <li>Item 3</li> <li>Item 2</li> <li>Item 1</li> </ol>

Khi được hiển thị trong hầu hết các trình duyệt, việc đánh số danh sách này sẽ xuất hiện ngược lại.

  1. Item 3
  2. Item 2
  3. Item 1

Cần lưu ý rằng các trình duyệt của Microsoft không hỗ trợ thuộc tính reversed. Nếu bạn sử dụng thuộc tính này, hãy nhớ rằng khách hàng truy cập sử dụng Internet Explorer hoặc Edge sẽ thấy đánh số tiêu chuẩn.

Bắt đầu một danh sách trên một số cụ thể

Thuộc tính startđược sử dụng để xác định số lượng mà trên đó một danh sách có thứ bắt đầu. Ví dụ, hãy tưởng tượng bạn có danh sách 5 mục và sau các mục thứ hai và thứ tư bạn muốn thêm một hoặc hai câu có chi tiết bổ sung. Bạn có thể sử dụng HTML sau để làm điều này mà không cần khởi động lại đánh số danh sách sau mỗi đoạn văn.

<ol> <li>Step 1</li> <li>Step 2</li> </ol> <p>A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of additional details</p> <ol start="3"> <li>Step 3</li> <li>Step 4</li> </ol> <p>Notice that we used the <code>start</code> attribute on the <code>ol</code> tag to restart the numbering at "3" following the break in the list above. We'll use the same technique to properly number Step 5 below.</p> <ol start="5"> <li>Step 5</li> </ol>

Dưới đây là cách danh sách đó hiển thị trong trình duyệt:

  1. Step 1
  2. Step 2
A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of additional details
  1. Step 3
  2. Step 4
Notice that we used the start attribute on the ol tag to restart the numbering at “3” following the break in the list above. We'll use the same technique to properly number Step 5 below.
  1. Step 5

Thay đổi kiểu đánh số

Bạn có thể sử dụng CSS để thay đổi kiểu đánh dấu của một danh sách có thứ tự. Ngoài việc đánh số tiêu chuẩn (được gọi là decimaltrong CSS), bạn cũng có thể sử dụng:

  • upper-roman cho các số La Mã hoa
  • lower-roman cho chữ số La Mã thường
  • decimal-leading-zero để thêm trình giữ chỗ “0” trước các mục danh sách một chữ số

Chúng ta bao gồm thuộc tính list-style-typeCSS được sử dụng để triển khai các kiểu đánh số dưới đây .

Danh sách mô tả

Danh sách mô tả được tạo bằng thẻ dl. Được sử dụng ít thường xuyên hơn so với các đồng nghiệp có thứ tự và không có thứ tự của chúng, danh sách mô tả được sử dụng để chứa các nhóm giá trị tên. Mỗi nhóm tên-giá trị bao gồm một tên hoặc thuật ngữ, được đặt giữa các thẻ dt, theo sau là một hoặc nhiều giá trị với mỗi giá trị hoặc mô tả, được đặt giữa các thẻ dd.

Ví dụ: nếu chúng ta muốn sử dụng danh sách mô tả để giải thích mối quan hệ giữa các thành viên của gia đình, chúng ta có thể sử dụng code sau:

<dl> <dt>Parents</dt> <dd>Jamie</dd> <dd>Charlie</dd> <dt>Children</dt> <dd>Landry</dd> <dd>Oakley</dd> <dd>Skyler</dd> <dt>Pets</dt> <dd>Cat</dd> <dd>Dog</dd> <dd>Gerbil</dd> </dl>

Khi danh sách đó được hiển thị, nó sẽ được hiển thị theo cách mà các mối quan hệ giữa các mục ( dt) và các giá trị ( dd) là rõ ràng.

ParentsJamieCharlieChildrenLandryOakleySkylerPetsCatDogGerbil

Danh sách lồng nhau

Danh sách lồng nhau là danh sách trong danh sách. Nếu bạn đã từng tạo một đường viền có dấu đầu dòng trong tài liệu xử lý văn bản, bạn có thể đã sử dụng nhiều loại thụt đầu dòng và kiểu dấu đầu dòng để biểu thị các mục là các điểm phụ của một mục khác trong đường viền. Đây là hiệu ứng mà chúng ta sẽ thực hiện khi tạo danh sách lồng nhau.

Để tạo danh sách lồng nhau, chỉ cần thêm danh sách mới trong danh sách cha như sau:

<ul> <li>Item A</li> <li>Item B</li> <ul> <li>Subtem B.1</li> <li>Subitem B.2</li> </ul> <li>Item C</li> </ul>

Khi danh sách đó được tải trong trình duyệt, danh sách lồng nhau sẽ được thụt lề xa hơn danh sách cha và một loại điểm đánh dấu mục khác sẽ được hiển thị.

.ul_ex_2 {
list-style-type: disc;
padding-left: 32px;
}
.ul_ex_3 {
list-style-type: circle;
padding-left: 32px;
}
  • Item A
  • Item B
    • Sub Item B.1
    • Sub Item B.2
  • Item C

Danh sách lồng nhau không chỉ được sử dụng để tổ chức hiển thị thông tin trực quan. Trình đọc màn hình và các công nghệ trợ giúp khác dựa trên cấu trúc lồng nhau của các danh sách phức tạp để hiểu về cấu trúc phân cấp và logic của dữ liệu trong danh sách.

Bạn có thể sử dụng các lớp gán để liệt kê các mục và sử dụng CSS để tạo hiệu ứng hình ảnh giống như một danh sách lồng nhau. Tuy nhiên, nếu bạn đã làm điều đó, cấu trúc phân cấp và logic của danh sách sẽ bị mất cho khách truy cập trang web bằng cách sử dụng công nghệ hỗ trợ. Nói cách khác, không sử dụng CSS để tạo danh sách lồng nhau một cách trực quan, sử dụng HTML để tạo chúng.

Xem thêm>>>Tìm hiểu về anchor và liên kết trong HTML

Sử dụng danh sách cho menu

Một trong những cách sử dụng phổ biến nhất của danh sách là tạo các menu điều hướng trang web. Danh sách không có thứ tự thường là danh sách lựa chọn cho mục đích này. Chỉ với một vài dòng CSS, chúng ta có thể chuyển đổi một danh sách không có thứ tự thành một menu điều hướng ngang hấp dẫn.

<style> #nav { background: lightgray; overflow: auto; } #nav li { float: left; list-style-type: none; padding: 10px; } #nav li:hover { background: gray; } </style> <ul id="nav"> <li><a href="#Using_Lists_for_Menus">Home</a></li> <li><a href="#Using_Lists_for_Menus">About Us</a></li> <li><a href="#Using_Lists_for_Menus">Contact Us</a></li> </ul>

Nếu chúng ta tải code đó trong trình duyệt, bạn sẽ nhận thấy rằng mỗi mục menu sẽ thay đổi khi bạn di chuột qua nó.

#nav {
background: lightgray;
tràn: tự động;
}
#nav li {
float: left;
list-style-type: none;
đệm: 10px;
}
#nav li: hover {
background: gray;
}

Có thể thực hiện nhiều hơn nữa với danh sách, CSS và JavaScript để tạo các menu thả xuống tương tác.

Danh sách tạo kiểu

Danh sách kiểu chữ thường được tạo kiểu tốt nhất để khớp với kiểu chữ của văn bản đoạn của trang web. Danh sách tạo kiểu cụ thể có thể được thực hiện bằng CSS.

Có ba thuộc tính danh sách có thể được tạo kiểu với CSS:

  • list-style-type: Xác định loại điểm đánh dấu trước mỗi mục danh sách. Các giá trị chung bao gồm disc(kiểu kiểu danh sách không theo thứ tự mặc định), decimal( kiểu kiểu danh sách theo thứ tự mặc định , hình tròn, hình vuông, chữ viết thường hoặc chữ hoa, chữ thường – latin, mặc dù một số kiểu bổ sung cũng có thể được sử dụng.
  • list-style-position: Xác định liệu điểm đánh dấu mục danh sách có nên đặt hộp nội dung insidehay hộp nội dung outside trong vùng đệm bên trái của mục hay không.
  • list-style-image: Một hình ảnh cũng có thể được sử dụng làm điểm đánh dấu mục. Thuộc tính này được sử dụng để chỉ định tệp hình ảnh sẽ được sử dụng.

Mỗi thuộc tính này có thể được áp dụng riêng biệt bằng cách sử dụng tên thuộc tính riêng lẻ hoặc đồng thời với thuộc tính list-styleviết tắt. Cú pháp thuộc tính list-style chứa các loại danh sách phong cách, vị trí và giá trị hình ảnh theo thứ tự đó. Ví dụ: nếu chúng ta muốn chọn điểm đánh dấu hình vuông, hãy đặt nó vào bên trong hộp nội dung và cũng chỉ định tệp hình ảnh, CSS của chúng ta sẽ trông giống như sau:

selector_for_the_target_list {
    list-style: square inside url("box_image.png");
}

Vì chúng ta đã chỉ định cả điểm đánh dấu danh sách và hình ảnh, hình ảnh sẽ được sử dụng trừ khi nó không khả dụng, trong trường hợp đó điểm đánh dấu hình vuông sẽ được hiển thị.

Kết luận

Danh sách là một trong những công cụ đa dạng và hiệu quả nhất trong hộp công cụ thiết kế web. Chúng cung cấp cấu trúc hợp lý, phân cấp cho dữ liệu và có thể được sử dụng theo nhiều cách khác nhau. Hiểu được chiều rộng đầy đủ của những gì có thể với các danh sách trong HTML làm cho phần tử HTML mạnh mẽ này thậm chí còn hữu ích hơn.