Làm thế nào để đặt các mục danh sách theo chiều ngang? Ví dụ về thiết kế đầy phong cách của danh sách CSS ul li

danh sách HTML dùng để nhóm các thông tin có liên quan. Có ba loại danh sách:

danh sách có dấu đầu dòng —

- mỗi phần tử của danh sách
• được đánh dấu bằng bút đánh dấu,
  danh sách đánh số —
  - mỗi phần tử của danh sách
  1. được đánh dấu bằng một số
     danh sách các định nghĩa- - bao gồm các cặp thuật ngữ
     —
     sự định nghĩa.

     Mỗi danh sách là một vùng chứa chứa các phần tử danh sách hoặc các cặp định nghĩa thuật ngữ. Các phần tử danh sách hoạt động giống như các phần tử khối, xếp chồng lên nhau và chiếm toàn bộ chiều rộng của khối vùng chứa. Mỗi mục danh sách có một khối bổ sung nằm ở bên cạnh, khối này không tham gia vào bố cục.

     Tạo danh sách HTML

     1. Danh sách có dấu đầu dòng

     Danh sách có dấu đầu dòng là một danh sách không có thứ tự (từ Danh sách không có thứ tự tiếng Anh). Được tạo bằng thẻ ghép nối

     . Điểm đánh dấu của một thành phần trong danh sách là một nhãn, chẳng hạn như một vòng tròn được tô đầy.

     Theo mặc định, các trình duyệt sẽ thêm định dạng sau vào khối danh sách:

     Mỗi thành phần danh sách được tạo bằng thẻ ghép nối

  2. (từ Mục danh sách tiếng Anh).
  có sẵn .
  • Microsoft
  • Google
  • Quả táo
  Cơm. 1. Danh sách có dấu đầu dòng

  2. Danh sách đánh số

  Danh sách đánh sốđược tạo bằng thẻ ghép nối. Mỗi mục danh sách cũng được tạo bằng phần tử

• . Trình duyệt tự động đánh số các phần tử theo thứ tự và nếu bạn xóa một hoặc nhiều phần tử trong danh sách đó, các số còn lại sẽ tự động được tính toán lại.

  Khối danh sách cũng có kiểu trình duyệt mặc định:

• Thuộc tính value có sẵn, cho phép bạn thay đổi số mặc định cho mục danh sách đã chọn. Ví dụ: nếu đối với mục đầu tiên trong danh sách bạn đặt
• , thì việc đánh số còn lại sẽ được tính lại tương ứng với giá trị mới.

  Đối với thẻ

  Các thuộc tính sau đây có sẵn:
  Bảng 1. Thuộc tính thẻ

  Thuộc tính	Mô tả, giá trị được chấp nhận
  đảo ngược	Thuộc tính đảo ngược làm cho danh sách được hiển thị theo thứ tự ngược lại (ví dụ: 9, 8, 7...).
  bắt đầu	Thuộc tính bắt đầu chỉ định giá trị ban đầu mà từ đó việc đánh số sẽ bắt đầu, ví dụ: một cấu trúc mục đầu tiên sẽ được gán số sê-ri “10”. Bạn cũng có thể chỉ định kiểu đánh số cùng một lúc, ví dụ: .
  kiểu	Thuộc tính type chỉ định loại điểm đánh dấu sẽ sử dụng trong danh sách (chữ cái hoặc số). Giá trị được chấp nhận: 1 — giá trị mặc định, đánh số thập phân. A — đánh số danh sách theo thứ tự bảng chữ cái, chữ in hoa (A, B, C, D). a — đánh số danh sách theo thứ tự bảng chữ cái, chữ thường (a, b, c, d). I - đánh số bằng chữ số viết hoa La Mã (I, II, III, IV). i — đánh số bằng chữ số La Mã viết thường (i, ii, iii, iv).

  1. Microsoft
  2. Google
  3. Quả táo
  Cơm. 2. Danh sách đánh số

  3. Danh sách các định nghĩa

  Danh sách các định nghĩađược tạo bằng cách sử dụng thẻ

  . Để thêm một thuật ngữ, hãy sử dụng thẻ
  và để chèn định nghĩa - thẻ
  .

  Khối danh sách định nghĩa có các kiểu trình duyệt mặc định sau:

  Đối với thẻ

  ,

  Và

  có sẵn .

  Giám đốc:

  Peter Tochilin

  Dàn diễn viên:

  Andrey Gaidulyan

  Alexey Gavrilov

  Vitaly Gogunsky

  Mariya Kozhevnikova

  Cơm. 3. Danh sách các định nghĩa

  4. Danh sách lồng nhau

  Thông thường, khả năng của các danh sách đơn giản là không đủ; ví dụ, khi tạo mục lục, không có cách nào thực hiện được nếu không có các mục lồng nhau. Đánh dấu cho danh sách lồng nhau sẽ như sau:

  • Đoạn 1.
  • Điểm 2.
    • Khoản 2.1.
    • Khoản 2.2.
      • Mục 2.2.1.
      • Mục 2.2.2.
    • Khoản 2.3.
  • Điểm 3.

  
  Cơm. 4. Danh sách lồng nhau

  5. Danh sách đánh số đa cấp

  Danh sách đa cấp được sử dụng để hiển thị các mục danh sách ở các cấp độ khác nhau với các mức thụt lề khác nhau. Đánh dấu cho danh sách được đánh số nhiều cấp sẽ như sau:

  1. đoạn văn
  2. đoạn văn
     1. đoạn văn
     2. đoạn văn
     3. đoạn văn
        1. đoạn văn
        2. đoạn văn
        3. đoạn văn
     4. đoạn văn
  3. đoạn văn
  4. đoạn văn

  Đánh dấu mặc định này sẽ tạo cách đánh số mới cho mỗi danh sách lồng nhau, bắt đầu bằng một danh sách. Để tạo đánh số lồng nhau, bạn cần sử dụng các thuộc tính sau:
  thiết lập lại bộ đếm đặt lại một hoặc nhiều bộ đếm, chỉ định giá trị cần đặt lại;
  bộ đếm tăng chỉ định giá trị tăng của bộ đếm, tức là mỗi mục tiếp theo sẽ được đánh số theo mức tăng nào;
  nội dung - nội dung được tạo ra, trong trường hợp này nó có nhiệm vụ hiển thị số trước mỗi mục danh sách.

  Ol ( /* loại bỏ cách đánh số tiêu chuẩn */ list-style: none; /* Xác định bộ đếm và đặt tên cho nó li. Giá trị bộ đếm không được chỉ định - theo mặc định là 0 */ counter-reset: li; ) li :trước ( /* Chúng ta xác định phần tử sẽ được đánh số - li. Phần tử giả before chỉ ra rằng nội dung được chèn bằng thuộc tính content sẽ được đặt trước các mục danh sách. Ở đây chúng ta cũng đặt giá trị của gia số bộ đếm (mặc định là 1). */ counter-increment: li; / * Thuộc tính nội dung hiển thị số của mục danh sách. counters() có nghĩa là văn bản được tạo đại diện cho giá trị của tất cả các bộ đếm có tên đó. Dấu chấm trong dấu ngoặc kép thêm dấu chấm ngăn cách giữa các số và dấu chấm có dấu cách được thêm vào trước nội dung của từng mục danh sách */ content: counters(li,".") "."; )
  Cơm. 5. Danh sách đánh số đa cấp

Nhiệm vụ

Hiển thị danh sách có dấu đầu dòng theo chiều ngang không có dấu đầu dòng.

Giải pháp

Thẻ dấu đầu dòng

hiển thị các phần tử theo mặc định
• chồng lên nhau theo chiều dọc. Để tạo các phần tử điều hướng, trong một số trường hợp, việc hiển thị danh sách theo chiều ngang sẽ rất thuận tiện. Có một số cách để đạt được hiển thị danh sách này.

  Bạn hẳn đã biết rằng HTML có các phần tử khối và nội tuyến. Các phần tử nội tuyến không tạo các khối riêng; một ví dụ về các phần tử như vậy là thẻ hoặc . Các phần tử khối được hiển thị trên một dòng mới và tạo thành một khối hình chữ nhật, một ví dụ về các thẻ như vậy

  hoặc

  Vì vậy đây là thẻ

• cũng là phần tử khối.

  Gắn thẻ

• không hoạt động giống như một phần tử khối, bạn có thể sử dụng CSS để đặt nó thành dòng.

  Thuộc tính CSS display xác định cách phần tử sẽ được hiển thị trong tài liệu. Hãy xem xét ba ý nghĩa của nó (mặc dù có nhiều ý nghĩa hơn):

  • khối - phần tử được hiển thị dưới dạng phần tử khối.
  • nội tuyến - phần tử được hiển thị dưới dạng nội tuyến.
  • inline-block - phần tử block-line, đọc thêm về loại phần tử này bên dưới, chúng ta sẽ sử dụng nó.

  Trước tiên, hãy tạo một danh sách theo chiều ngang bằng cách chuyển các dấu đầu dòng của nó thành các phần tử nội tuyến. Theo kiểu CSS, hãy viết một quy tắc trong đó bộ chọn li được đặt thành thuộc tính display có giá trị inline .

  • Đoạn 1
  • điểm 2
  • Điểm 3

  Vì vậy, phong cách này đã hoạt động và chúng tôi đã sắp xếp các mục trong danh sách theo chiều ngang:

  Hình 1. Ví dụ số 1 tại nơi làm việc.

  Phương pháp này có nhược điểm. Thực tế là các phần tử nội tuyến có một số hạn chế so với các phần tử khối. Ví dụ: chúng không thể được cung cấp chiều rộng và chiều cao, nhưng khối thì có thể.

  Ví dụ: chúng ta cần thành phần menu mà chúng ta tạo có chiều rộng 150px và chiều cao 40px. Hãy thử thay đổi kiểu như sau, nghĩa là thêm hai quy tắc đặt kích thước của mục menu:

  Những chỉnh sửa này sẽ không dẫn đến bất kỳ thay đổi nào. Để các mục menu được định vị theo chiều ngang và có thể đặt chiều rộng và chiều cao của chúng, chúng cần đặt loại thành inline-block . Hãy thay đổi mã ví dụ của chúng tôi:

  • Đoạn 1
  • điểm 2
  • Điểm 3

  Mã này hoạt động và những thay đổi có thể nhìn thấy:

  
  Hình 2. Ví dụ số 2 đang hoạt động.

  Nhưng có thể có nhiều lựa chọn khác nhau, ví dụ chúng ta cần hiển thị danh sách lồng nhau trong menu:

  • Biên tập
    • Hủy bỏ
    • Cắt
    • Sao chép
    • Chèn
  • Kiểu chữ
    • In đậm
    • Nghiêng
    • Gạch chân
  • Kích cỡ
    • Bé nhỏ
    • Bình thường
    • Trung bình
    • To lớn

  Đây là kết quả của mã này:

  
  Hình 3. Ví dụ số 3 tại nơi làm việc.

  Chúng tôi thấy rằng các khối không được căn chỉnh theo chiều cao như chúng tôi mong muốn. Tất nhiên, bạn có thể chỉ định cùng một chiều cao cho tất cả các khối, nhưng chúng tôi không phải lúc nào cũng biết trước giá trị chính xác của nó và nó có thể thay đổi.

  Nhưng thực ra, tại sao điều này lại xảy ra?

  Các khối của chúng tôi có thuộc tính display được đặt thành inline-block . Điều này có nghĩa là chúng có chất lượng của cả phần tử khối (khả năng chỉ định chiều rộng và chiều cao) và phần tử nội tuyến. Những gì chúng ta đang thấy là chất lượng của các phần tử nội tuyến.

  Hãy xem một chuỗi có các ký tự "A" có kích thước khác nhau:

  A A A A A A A

  Chúng ta thấy tất cả các chữ cái đều được căn chỉnh theo chiều dọc dọc theo dòng dưới cùng. Chính xác hơn là dọc theo đường cơ sở, nhưng bây giờ chúng ta đừng đi sâu vào vấn đề cỏ dại. Vì vậy, điều tương tự cũng xảy ra với các khối của chúng tôi.

  Để căn chỉnh văn bản theo chiều dọc, hãy sử dụng thuộc tính căn chỉnh dọc. Trong ví dụ số 3, chúng ta cần sử dụng giá trị top , giá trị này sẽ căn chỉnh đường viền trên cùng của phần tử với phần trên cùng của phần tử cao nhất trên dòng.

  Bây giờ, hãy áp dụng nó cho một chuỗi có ký tự "A" có kích thước khác nhau:

  A A A A A A A

  Các chữ cái dường như "nhảy" một chút. Tôi đặt đường viền CSS thành chữ cái cao nhất để cho thấy rằng thực tế không có bước nhảy nào, chỉ có khoảng trống giữa đường viền trên cùng (nơi xảy ra căn chỉnh) và điểm trên cùng của chữ "A".

  Thuộc tính căn chỉnh dọc phải được áp dụng cho từng phần tử nội tuyến, nó không được kế thừa. Bạn có thể đọc thêm về thuộc tính này: Vertical-align .

  Sau lần lạc đề này, chúng ta sẽ tiếp tục đặt các thành phần danh sách theo chiều ngang.

  Cách thứ hai

  Bạn có thể đặt các mục danh sách theo chiều ngang bằng cách sử dụng thuộc tính float. Thuộc tính này chỉ định phần tử được căn chỉnh ở phía nào và có hai vị trí: left và right .

  Đây là một ví dụ sử dụng mã này:

  • Đoạn 1
  • điểm 2
  • Điểm 3

  Đây là kết quả của mã:

  Hình 4. Ví dụ làm việc.

  Ví dụ này có vẻ hiệu quả. Nhưng có một lưu ý khi sử dụng thuộc tính này. Bây giờ chúng ta sẽ xem xét nó. Ví dụ: hãy lấy một mã trong đó có hai danh sách ngang với các cách sắp xếp các phần tử theo chiều ngang khác nhau: display và float :

  • Đoạn 1
  • điểm 2
  • Điểm 3
  • Đoạn 1
  • điểm 2
  • Điểm 3

  Đây là kết quả của mã:

  Hình 5. Ví dụ làm việc.

  Trong những ví dụ này, vùng chứa danh sách

  có đường viền màu đỏ dày 1 pixel. Nhưng danh sách trên cùng, sử dụng thuộc tính display, bao gồm các mục danh sách. Nhưng các phần tử của danh sách được tạo bằng thuộc tính float sẽ rơi ra khỏi vùng chứa của chúng.

  Thoạt nhìn, mọi thứ đều hoạt động. Nhưng hãy trao đổi danh sách của chúng tôi. Hãy đặt danh sách có menu lớp-1 trong mã trước danh sách có menu lớp-2 (bây giờ nó thấp hơn).

  Đây là kết quả chúng tôi nhận được:

  Hình 6. Ví dụ đang chạy.

  Các mục ở menu dưới cùng cũng bao quanh menu trên cùng, vì hiệu ứng của thuộc tính float chưa bị hủy và nó áp dụng cho tất cả các phần tử tiếp theo.

  Làm thế nào để giải quyết vấn đề này?

  Để làm điều này, bạn cần sử dụng thuộc tính clear, nó hủy bỏ việc bao bọc phần tử xung quanh phần tử khác nếu nó có thuộc tính float được đặt.

  Đây là một ví dụ được sửa đổi bằng cách sử dụng thuộc tính clear:

  • Đoạn 1
  • điểm 2
  • Điểm 3
  • Đoạn 1
  • điểm 2
  • Điểm 3

  Có thể thấy danh sách dưới không còn quấn quanh danh sách trên, các phần tử không xung đột với nhau. Nhưng trong danh sách đầu tiên có thẻ

  • vẫn còn nằm bên ngoài container
    .
    Hình 7. Ví dụ làm việc.

    Ngoài ra, trong công việc không phải lúc nào chúng ta cũng biết được phần tử nào sẽ theo sau phần tử sử dụng float. Tùy chọn lý tưởng là đóng hoạt động của thuộc tính float trong cùng khối mà nó được mở.

    Điều này được thực hiện bằng cách sử dụng phần tử giả. Đây là mã:

    • Đoạn 1
    • điểm 2
    • Điểm 3
    • Đoạn 1
    • điểm 2
    • Điểm 3

    Bây giờ chúng tôi có mã hoạt động 100%.

    Hình 8. Ví dụ làm việc.

    Kỹ thuật này với thuộc tính float thường được sử dụng khi thiết kế trang web để căn chỉnh các cột được tạo bởi thẻ

    . Bằng cách này, chúng ta có được cấu trúc cột bình thường với độ cao được căn chỉnh theo yêu cầu. Khi chúng ta tạo một menu, trong hầu hết các trường hợp, chiều cao của các khối không quan trọng đối với chúng ta; nó hầu như luôn giống nhau. Vì vậy, việc sử dụng quy tắc (display: inline-block) trong những trường hợp này là khá hợp lý.

    Nhưng để hoàn thiện chủ đề, chúng tôi đã làm quen với tất cả các lựa chọn có thể. Mặc dù có thể có những cách khác, chẳng hạn như sử dụng bảng CSS, nhưng các công cụ tìm kiếm thực sự khuyên bạn chỉ nên sử dụng bảng cho mục đích đã định của chúng chứ không phải để tổ chức các thành phần điều hướng hoặc bất kỳ thứ gì khác.

    HTML cung cấp một bộ thẻ đặc biệt để trình bày thông tin dưới dạng danh sách. Danh sách là một trong những hình thức trình bày dữ liệu được sử dụng phổ biến nhất, cả trong tài liệu điện tử và in. Hầu như ngày nào chúng ta cũng xem qua các danh sách - đó có thể là danh sách những thứ cần mua trong cửa hàng, học sinh trong lớp hoặc đơn giản là những việc cần phải làm. Khả năng sắp xếp cấu trúc danh sách có sẵn trong nhiều trình soạn thảo văn bản, đặc biệt, trình xử lý văn bản mạnh mẽ Microsoft Word có các công cụ thuận tiện để định dạng danh sách các loại khác nhau (khả năng tạo danh sách HTML bằng Microsoft Word sẽ được thảo luận trong Chương 8). Dưới đây là một số trường hợp việc sử dụng danh sách khá thuận tiện:

    • Kết hợp các phần thông tin thành một cấu trúc duy nhất để tạo ra giao diện dễ đọc.
    • Mô tả các quy trình từng bước phức tạp.
    • Sự sắp xếp thông tin theo kiểu mục lục, với các đoạn văn trỏ đến các phần có liên quan của tài liệu.

    Lưu ý rằng các điểm trên được tổ chức chính xác dưới dạng cấu trúc danh sách.

    HTML cung cấp các loại danh sách chính sau: danh sách có dấu đầu dòng, được đánh số và danh sách định nghĩa. Các thẻ sau được sử dụng để triển khai danh sách các loại khác nhau:

    ,
    ,

    , , . Bằng cách sử dụng nhiều loại danh sách khác nhau được xây dựng trong tài liệu, có thể nhận ra nhiều khả năng khác nhau, mô tả về chúng là chủ đề của chương này. Các tính năng của việc xây dựng các loại danh sách khác nhau cũng như việc sử dụng các danh sách lồng nhau đã được xem xét.

    Danh sách có dấu đầu dòng

    Một trong những loại danh sách được triển khai trong HTML là danh sách có dấu đầu dòng. Ngược lại, danh sách loại này được gọi là không đánh số hoặc

    rối loạn. Họ thường được sử dụng như một bản dịch chính thức của tên của thẻ tương ứng

    , với sự trợ giúp của các danh sách loại này được sắp xếp trong tài liệu HTML (UL - Danh sách không có thứ tự, danh sách không có thứ tự).

    Trong danh sách có dấu đầu dòng, các ký tự đặc biệt được gọi là dấu danh sách được sử dụng để làm nổi bật các phần tử của nó (chúng thường được gọi là dấu đầu dòng, là cách phát âm chính thức của thuật ngữ dấu đầu dòng trong tiếng Anh). Sự xuất hiện của các điểm đánh dấu danh sách được xác định bởi trình duyệt và khi tạo danh sách lồng nhau, trình duyệt sẽ tự động đa dạng hóa hình thức của các điểm đánh dấu ở các cấp độ lồng nhau khác nhau.

    Thẻ

    Và<LI >

    Để tạo danh sách có dấu đầu dòng, bạn phải sử dụng thẻ vùng chứa, bên trong chứa tất cả các thành phần của danh sách. Các thẻ danh sách mở và đóng cung cấp ngắt dòng trước và sau danh sách, do đó tách danh sách khỏi nội dung chính của tài liệu, do đó không cần sử dụng thẻ đoạn văn ở đây

    
    .

    Mỗi thành phần danh sách phải bắt đầu bằng một thẻ

    • (LI - Mục danh sách, phần tử danh sách). Nhãn
    • không yêu cầu thẻ đóng tương ứng, mặc dù về nguyên tắc sự hiện diện của nó không bị cấm. Các trình duyệt thường bắt đầu mỗi mục danh sách mới trên một dòng mới khi hiển thị tài liệu.

      Thông tin được cung cấp đủ để xây dựng một danh sách có dấu đầu dòng cơ bản. Hãy đưa ra một ví dụ về tài liệu HTML sử dụng danh sách có dấu đầu dòng, việc hiển thị danh sách này bằng trình duyệt được hiển thị trong Hình. 2.1.

      Biểu tượng cung hoàng đạo:

      • Bạch Dương

      • chòm sao Kim Ngưu

      • Sinh đôi

      • Bệnh ung thư

      • một con sư tử

      • Xử Nữ

      • Quy mô

      • bọ cạp

      • chòm sao Nhân Mã

      • Ma Kết

      • Bảo Bình

      • Cá

      Cơm. 2.1. Trình duyệt hiển thị danh sách dấu đầu dòng

      Lưu ý rằng ngoài các thành phần danh sách được đánh dấu bằng thẻ

    • , các phần tử HTML khác có thể có mặt. Trong ví dụ trên, một trong những phần tử này là văn bản thuần túy, không phải là một mục danh sách mà đóng vai trò là tiêu đề của nó.

      Ghi chú

      Một số sách giáo khoa về ngôn ngữ HTML chỉ ra rằng nên sử dụng thẻ vùng chứa để đặt tiêu đề cho danh sách. (LH - Tiêu đề danh sách, tiêu đề danh sách). Thẻ này hiện không được bất kỳ trình duyệt phổ biến nào nhận dạng và không phải là một phần của đặc tả HTML. Vì vậy, việc sử dụng nó trở nên vô nghĩa, mặc dù nó sẽ không dẫn đến bất kỳ sai sót nào.

      Trong thẻ

      hai tham số có thể được chỉ định: COMPACT và TYPE.

      Tham số COMPACT được viết không có giá trị và được sử dụng để cho trình duyệt biết rằng danh sách đã cho sẽ được hiển thị ở dạng thu gọn. Ví dụ: phông chữ hoặc khoảng cách giữa các dòng danh sách, v.v. có thể bị giảm.

      Ghi chú

      Hiện tại, sự hiện diện của tham số COMPACT trong thẻ

      không ảnh hưởng đến việc hiển thị danh sách trong các trình duyệt hàng đầu. Do đó, việc sử dụng tham số này là vô nghĩa, đặc biệt vì việc sử dụng nó không được đặc tả HTML 4.0 khuyến nghị.

      Tham số TYPE có thể nhận các giá trị sau: đĩa, hình tròn và hình vuông. Tham số này được sử dụng để buộc xuất hiện các dấu đầu dòng trong danh sách. Loại điểm đánh dấu chính xác sẽ phụ thuộc vào trình duyệt bạn đang sử dụng. Các tùy chọn hiển thị điển hình như sau:

      TYPE = đĩa - điểm đánh dấu được hiển thị dưới dạng vòng tròn đầy; TYPE = vòng tròn - điểm đánh dấu được hiển thị dưới dạng vòng tròn mở; TYPE = hình vuông - điểm đánh dấu được hiển thị dưới dạng hình vuông đầy. Mục nhập ví dụ:

      .

      Giá trị mặc định là TYPE = đĩa. Đối với các danh sách có dấu đầu dòng lồng nhau, giá trị mặc định là đĩa ở cấp độ đầu tiên, hình tròn ở cấp độ thứ hai, hình vuông ở cấp độ thứ ba trở lên. Đây chính xác là những gì được thực hiện trong các phiên bản mới nhất của trình duyệt Netscape và Internet Explorer. Xin lưu ý rằng các trình duyệt khác có thể hiển thị điểm đánh dấu khác nhau. Ví dụ: trong đặc tả HTML 4.0, loại điểm đánh dấu được hiển thị khi TYPE = hình vuông được chỉ định làm đường viền hình vuông.

      Tham số TYPE có cùng giá trị có thể được sử dụng để chỉ định loại điểm đánh dấu cho các thành phần danh sách riêng lẻ. Để thực hiện việc này, tham số TYPE có giá trị tương ứng được phép chỉ định trong thẻ thành phần danh sách

      • .

        Mục nhập ví dụ:

      • .

        Ghi chú

        Các trình duyệt diễn giải đặc tả loại dấu đầu dòng cho một mục danh sách riêng lẻ theo cách khác nhau. Trình duyệt Netscape thay đổi giao diện của điểm đánh dấu cho điểm đánh dấu này và tất cả các điểm đánh dấu tiếp theo cho đến khi gặp phải lần xác định lại tiếp theo về diện mạo của điểm đánh dấu. Internet Explorer chỉ thay đổi giao diện của điểm đánh dấu cho phần tử này.

        Đánh dấu danh sách đồ họa

        Bạn có thể sử dụng hình ảnh đồ họa làm dấu đầu dòng danh sách, được sử dụng rộng rãi để tạo các tài liệu HTML được thiết kế đẹp mắt, hấp dẫn. Trên thực tế, khả năng này không được cung cấp trực tiếp bởi ngôn ngữ HTML mà được triển khai một cách giả tạo. Điều này không có nghĩa là làm như vậy không được khuyến khích hoặc đáng chê trách, mà chỉ là không có cấu trúc ngôn ngữ HTML đặc biệt nào được sử dụng ở đây.

        Để hiểu ý tưởng, bạn cần hiểu cơ chế triển khai danh sách trên các trang HTML. Hóa ra thẻ danh sách

        (thực tế là, các thẻ danh sách thuộc các loại khác, được thảo luận bên dưới) thực hiện một tác vụ duy nhất - nó cho trình duyệt biết rằng tất cả thông tin nằm sau thẻ này sẽ được hiển thị dịch sang bên phải (thụt lề) một lượng nhất định. Thẻ
        • , trỏ đến các mục danh sách riêng lẻ, cung cấp các điểm đánh dấu mục danh sách tiêu chuẩn.

          Nếu chúng ta cần xây dựng một danh sách bằng các điểm đánh dấu đồ họa thì chúng ta có thể thực hiện hoàn toàn mà không cần thẻ

        • . Chỉ cần chèn hình ảnh đồ họa mong muốn trước mỗi thành phần của danh sách là đủ. Vấn đề duy nhất cần giải quyết là tách các thành phần trong danh sách ra khỏi nhau. Bạn có thể sử dụng thẻ đoạn văn cho việc này

          Hoặc buộc phải cấp dòng
          . Một ví dụ về việc triển khai danh sách với các điểm đánh dấu đồ họa, cách hiển thị danh sách này được hiển thị trong Hình. 2.2 được thể hiện dưới đây:

          Biểu tượng cung hoàng đạo:
          

          Bạch Dương
          

          chòm sao Kim Ngưu
          

          Song Tử
          

          Bệnh ung thư
          

          Sư Tử
          

          Xử Nữ
          

          Quy mô
          

          bọ cạp
          

          chòm sao Nhân Mã
          

          Ma Kết
          

          Bảo Bình
          

          Cá

          

          Cơm. 2.2. Danh sách có dấu đầu dòng với các dấu đầu dòng đồ họa

          Trong ví dụ đã cho, tệp đồ họa Green_ball.gif được sử dụng làm điểm đánh dấu mục danh sách. Lưu ý rằng việc sử dụng đồ họa trên các trang HTML có thể làm tăng đáng kể lượng thông tin được truyền đi. Tuy nhiên, trong trường hợp này mức tăng này là cực kỳ không đáng kể. Ở đây, cùng một tệp được sử dụng cho tất cả các điểm đánh dấu,

          sẽ chỉ được truyền đi một lần. Kích thước file của một hình ảnh nhỏ cũng cực kỳ nhỏ.

          Ghi chú

          Các kỹ thuật tạo danh sách bằng dấu đầu dòng đồ họa sẽ được thảo luận lần lượt trong Chương 8.

          Danh sách đánh số

          Một loại danh sách khác được triển khai trong HTML là danh sách được đánh số. Ngược lại, danh sách loại này được gọi là có thứ tự. Họ thường được sử dụng như một bản dịch chính thức của tên của thẻ tương ứng

          , với sự trợ giúp của danh sách loại này được sắp xếp trong tài liệu HTML (OL - Danh sách có thứ tự, danh sách có thứ tự).

          Danh sách loại này thường là một chuỗi các phần tử riêng lẻ được sắp xếp theo thứ tự. Sự khác biệt so với danh sách có dấu đầu dòng là trong danh sách đánh số, mỗi phần tử tự động được đặt trước một số sê-ri. Kiểu đánh số phụ thuộc vào trình duyệt và có thể được đặt theo tham số của thẻ danh sách. Mặt khác, việc triển khai danh sách đánh số rất giống với việc triển khai danh sách dấu đầu dòng.

          Thẻ

          Và

          1. Để tạo danh sách được đánh số, bạn nên sử dụng thẻ vùng chứa, bên trong chứa tất cả các thành phần của danh sách. Các thẻ danh sách mở và đóng cung cấp ngắt dòng trước và sau danh sách, từ đó tách danh sách khỏi nội dung chính của tài liệu.

             Giống như danh sách có dấu đầu dòng, mỗi mục trong danh sách đánh số phải bắt đầu bằng thẻ

          2. .

             Dưới đây là ví dụ về tài liệu HTML sử dụng danh sách được đánh số: hiển thị trong đó trình duyệt được hiển thị trong hình. 2.3.

             Những ngôi sao sáng nhất có thể nhìn thấy từ Trái đất:

             • Sirius

             • K anopus

             • Arcturus

             • Alpha Nhân Mã

             • Sao Chức Nữ

             • K tên gọi

             • Rigel

             • Procyon

             • Achernar

             • Beta Nhân Mã

             • Wetelgeuse

             • Aldebaran

               
               . . .

             • Mizar

               
               . . .

             • Cực

             

             Cơm. 2.Z. Danh sách đánh số

             Trong thẻ

             Các tham số sau có thể được chỉ định: COMPACT, TYPE và START.

             Tham số COMPACT có cùng ý nghĩa với danh sách có dấu đầu dòng. Tham số TYPE được sử dụng để chỉ định kiểu đánh số danh sách. Có thể nhận các giá trị sau:

             TYPE = A - đặt điểm đánh dấu ở dạng chữ Latinh in hoa;

             TYPE = a - đặt các điểm đánh dấu ở dạng chữ Latinh viết thường;

             TYPE = I - đặt điểm đánh dấu ở dạng chữ số La Mã lớn;

             TYPE = i - đặt điểm đánh dấu ở dạng chữ số La Mã nhỏ;

             TYPE = 1 - đặt điểm đánh dấu ở dạng chữ số Ả Rập.

             Giá trị mặc định luôn là TYPE = 1, tức là đánh số bằng chữ số Ả Rập. Điều này cũng áp dụng cho các danh sách được đánh số lồng nhau. Ở đây, không giống như danh sách có dấu đầu dòng, theo mặc định, trình duyệt không đánh số khác nhau ở các cấp độ lồng danh sách khác nhau. Lưu ý rằng sau số phần tử danh sách luôn có thêm dấu “dấu chấm”.

             Tham số TYPE có cùng giá trị có thể được sử dụng để chỉ định kiểu đánh số cho các thành phần danh sách riêng lẻ. Để thực hiện việc này, tham số TYPE có giá trị tương ứng được phép chỉ định trong thẻ thành phần danh sách

             1. .

                Mục nhập ví dụ:

             2. .

                tham số thẻ BẮT ĐẦU

                cho phép bạn bắt đầu đánh số danh sách từ một thứ khác ngoài một. Giá trị của tham số START phải luôn là số tự nhiên, bất kể kiểu đánh số danh sách. Đây là một ví dụ:
                .

                Mục này xác định việc đánh số danh sách bắt đầu bằng chữ cái Latinh viết hoa "E". Đối với các kiểu đánh số khác, mục nhập START=5 sẽ đặt cách đánh số tương ứng từ số "5", chữ số La Mã "V", v.v.

                Việc thay đổi kiểu đánh số danh sách và giá trị số có thể được thực hiện cho bất kỳ phần tử nào của danh sách. Nhãn

                5. đối với danh sách được đánh số, cho phép sử dụng tham số TYPE và VALUE. Tham số TYPE có thể nhận các giá trị giống như đối với thẻ
                   .

                   P mục ví dụ:

                   1. .

                      Ghi chú

                      Các trình duyệt diễn giải kiểu đánh số cho một mục danh sách riêng lẻ một cách khác nhau. Trình duyệt Netscape thay đổi kiểu đánh số cho phần tử này và tất cả các phần tử tiếp theo cho đến khi gặp lần ghi đè tiếp theo. Internet Explorer chỉ thay đổi hình thức của số cho phần tử này.

                      Zgiá trị của thông số thẻ VALUE

                   2. - cho phép bạn thay đổi số lượng của một thành phần danh sách nhất định. Điều này thay đổi cách đánh số của tất cả các phần tử tiếp theo. Một ứng dụng điển hình là danh sách bị thiếu một số thành phần. Một ví dụ về danh sách như vậy đã được đưa ra ở trên (Hình 2.3). Nó cung cấp một danh sách theo thứ tự các ngôi sao sáng nhất, trong đó vị trí thứ 58 và 75 chứa các ngôi sao có thể nhìn thấy rõ ở vĩ độ của chúng ta (Mizar là ngôi sao sáng nhất trong chòm sao Ursa Major và Polaris là ngôi sao sáng nhất trong chòm sao Ursa Minor) .

                      Hãy đưa ra một ví dụ ban đầu khác về việc sử dụng các kiểu đánh số khác nhau. Mã HTML bên dưới chứa ba danh sách có cách đánh số khác nhau. Để dễ xem, mỗi danh sách được đặt trong một ô bảng riêng biệt. Cả ba danh sách đều giống hệt nhau và chỉ khác nhau về kiểu đánh số: ở cột đầu tiên của bảng có các chữ số Ả Rập, ở cột thứ hai - chữ số La Mã và ở cột thứ ba, đánh số bằng chữ cái Latinh. Xin lưu ý rằng các thành phần trong danh sách trống, tức là sau bất kỳ thẻ nào

                   3. không có dữ liệu. Một ví dụ về loại này có thể được sử dụng làm bảng tương ứng giữa cách viết số bằng chữ số Ả Rập và chữ số La Mã. Hóa ra bất kỳ trình duyệt nào hỗ trợ danh sách đều có thể được sử dụng làm trình tạo bảng như vậy (Hình 2.4), bạn chỉ cần nhập mã HTML đã cho. Đánh số bằng chữ số La Mã hoạt động chính xác đến giá trị 3999. Bằng cách nghiên cứu cột bên phải, bạn có thể hiểu cách đánh số bằng chữ cái La Mã được thực hiện. Khi đã hết việc đánh số một chữ cái (từ A đến Z), số có hai chữ cái đầu tiên sẽ được lấy làm số tiếp theo - AA, v.v.

                      . . .

                      . . .

                      . . .

                      

                      Cơm. 2.4. Các kiểu đánh số danh sách HTML khác nhau

                      Danh sách các định nghĩa

                      Danh sách định nghĩa, còn được gọi là từ điển định nghĩa, là một loại danh sách đặc biệt. Không giống như các loại danh sách khác, mỗi phần tử của danh sách định nghĩa luôn bao gồm hai phần. Phần đầu tiên của thành phần danh sách chứa thuật ngữ đang được xác định và phần thứ hai chứa văn bản dưới dạng mục từ điển tiết lộ ý nghĩa của thuật ngữ.

                      Danh sách định nghĩa được chỉ định bằng thẻ vùng chứa

                      (Danh sách định nghĩa). Bên trong thùng chứa có thẻ

                      (Thuật ngữ định nghĩa) thuật ngữ đang được định nghĩa được đánh dấu và thẻ

                      (Mô tả định nghĩa) - một đoạn văn có định nghĩa của nó. Đối với thẻ

                      Và

                      Bạn có thể bỏ qua các thẻ đóng tương ứng.

                      Nói chung, danh sách các định nghĩa được viết như sau:

                      Thuật ngữ

                      Định nghĩa của thuật ngữ

                      Trong văn bản sau thẻ

                      không thể sử dụng các phần tử cấp khối như thẻ đoạn văn

                      Hoặc tiêu đề

                      -

                      . Theo quy định, văn bản của thuật ngữ được xác định phải nằm trên một dòng. Văn bản chứa định nghĩa của thuật ngữ được hiển thị bắt đầu ở dòng tiếp theo (hoặc mỗi dòng đối với một số trình duyệt) sau định nghĩa của thuật ngữ, được thụt vào bên phải. Trong thông tin đặt sau thẻ

                      , các phần tử cấp khối có thể được định vị. Đặc biệt, danh sách các định nghĩa có thể được lồng vào nhau.

                      Trong thẻ

                      tham số COMPACT có thể được chỉ định, mục đích của tham số này tương tự như các danh sách khác được mô tả ở trên.

                      Dưới đây là ví dụ về tài liệu HTML sử dụng danh sách các định nghĩa:

                      Phân loại tính khí điển hình của con người,
                      dựa trên

                      theo quan điểm của Hippocrates

                      Người đờm

                      Thụ động, rất chăm chỉ, chậm thích nghi;
                      tâm trạng ổn định, ít chịu ảnh hưởng từ bên ngoài;
                      phản ứng cảm xúc thờ ơ và chậm chạp trong hoạt động có ý chí
                      
                      

                      lạc quan

                      Năng động, năng động, dễ thích nghi -
                      sự sống động và linh hoạt của các phản ứng cảm xúc, tốc độ và sức mạnh của các biểu hiện ý chí
                      
                      

                      bệnh nóng giận

                      Năng động, rất năng động, kiên trì;
                      sự nóng nảy và sức mạnh của các phản ứng cảm xúc, những biểu hiện bạo lực của ý chí
                      
                      

                      u sầu

                      Thụ động, dễ mệt mỏi, khó thích nghi, -
                      sự yếu kém của các biểu hiện ý chí và tâm trạng chán nản chiếm ưu thế, thiếu tự tin

                      Việc hiển thị tài liệu HTML đã cho trong trình duyệt được hiển thị trong Hình. 2.5.

                      

                      Cơm. 2.5. Danh sách các định nghĩa (tương tự như một nhóm mục trong từ điển)

                      Loại danh sách

                      Và

                      Loại danh sách

                      Và hiện nay thực tế không được sử dụng, mặc dù chúng vẫn được hỗ trợ bởi các trình duyệt hàng đầu. Trong đặc tả HTML 4.0, cả hai loại danh sách này đều được đánh dấu là không dùng nữa. Thay vào đó, đề xuất sử dụng danh sách có dấu đầu dòng được chỉ định bởi thẻ

                      .

                      Những loại danh sách này ban đầu được thiết kế nhỏ gọn hơn danh sách có dấu đầu dòng thông thường. Theo quy tắc viết các phần tử của các danh sách này, không được phép sử dụng các phần tử khối trong đó, điều đó có nghĩa là không thể thực hiện việc lồng các danh sách kiểu này. Mỗi phần tử danh sách là một dòng văn bản.

                      Đối với các danh sách như

                      người ta đã lên kế hoạch đưa ra giới hạn về “độ dài văn bản của một thành phần danh sách (24 ký tự). Sự hạn chế như vậy sẽ cho phép chúng ta rút ra

                      danh sách như

                      ở dạng tương tự như đầu ra của danh sách các thư mục trong hệ điều hành UNIX và MS-DOS khi sử dụng khóa chuyển /W (trong một số cột). Ngoài ra, điểm đánh dấu không được hiển thị cho các mục danh sách thuộc loại này.

                      Hiện tại, tất cả các kế hoạch này vẫn chưa được thực hiện, vì không nên sử dụng thêm danh sách các loại này. Các phiên bản hiện đại của trình duyệt hiển thị danh sách các loại này theo cách giống hệt như các danh sách như

                      .

                      Danh sách lồng nhau

                      Đôi khi bạn cần đưa toàn bộ danh sách cùng loại hoặc loại khác vào thành phần danh sách thuộc một loại. Điều này sẽ tạo ra các danh sách đa cấp hoặc lồng nhau. HTML cho phép lồng tùy ý nhiều loại danh sách khác nhau, nhưng phải cẩn thận khi sắp xếp chúng.

                      Dưới đây là mã HTML cho một tài liệu có các danh sách lồng nhau, hiển thị trong Hình 2. 2.6. Trong ví dụ này, mỗi mục trong danh sách có dấu đầu dòng chứa danh sách được đánh số riêng.

                      Vệ tinh của một số hành tinh

                      • Zempya

                        1. Mặt trăng

                      • Mapc

                        1. phobos

                        2. Deimos

                      • Sao Thiên Vương

                        1. Ariel

                        2. Ô dù

                        3. Titania

                        4. Oberon

                        5. Miranda

                      • sao Hải vương

                        1. Triton

                        2. Nereid

                        Nếu bạn quyết định thay đổi danh sách ul và li tiêu chuẩn, thì chủ đề này sẽ rất thú vị với bạn. Bởi vì ở đây bạn sẽ học được một số giải pháp ban đầu. Điều này chắc chắn sẽ giúp bạn thay đổi giao diện tiêu chuẩn thành giao diện độc đáo, trong đó kiểu CSS được sử dụng để thiết kế danh sách. Ưu điểm là chúng ta sẽ chỉ sử dụng một lớp xuyên suốt, điều này sẽ thay đổi hoàn toàn giao diện. Ngoài các tham số này, bạn có thể chỉ định số nào danh sách sẽ bắt đầu, tại đây bạn có thể tự mình làm mọi thứ. Giá trị bắt đầu mặc định cho danh sách đánh số là ở chữ cái đầu tiên hoặc chữ A.

                        Với những điều cơ bản đã sẵn sàng, giờ đây chúng ta sẽ xem xét kỹ hơn các yếu tố được sử dụng để cung cấp cấu trúc và ý nghĩa cho các phần khác nhau của thiết kế. Đối với những người chưa biết, ul và li là một lựa chọn tốt hơn nhiều so với văn bản thuần túy vì khi ngắt dòng văn bản, đặc biệt là trên thiết bị di động, nó thụt vào hoàn hảo và không quấn quanh điểm đánh dấu.

                        Danh sách được coi là một cách tuyệt vời để trình bày thông tin trên các trang vì chúng dễ đọc và trông đẹp mắt. Nhiều người tưởng rằng dấu đầu dòng là những hình ảnh nhỏ nhưng thực tế chúng đều được tạo ra thông qua mã HTML khá đơn giản. Bạn có thể lồng các loại danh sách khác nhau vào nhau nếu muốn, chỉ cần đảm bảo đóng chúng đúng cách. Bạn có thể chơi với văn bản bạn muốn trong tất cả các lệnh danh sách này.

                        Bạn cũng cần biết rằng danh sách ban đầu chứa một số phần tử:

                        1 . Thông tin vô tổ chức.
                        2 . Thông tin có tổ chức.
                        3 . Các định nghĩa.

                        Hãy bắt đầu cài đặt:

                        1. Tùy chọn:

                        
                        
                        • Mục danh sách
                        
                        
                        • Danh sách duy nhất
                        
                        
                        • Danh sách gốc
                        
                        
                        • ZORNET.RU - Quản trị trang web
                        
                        
                        • Một danh sách khác
                        
                        
                        
                        CSS

                        Ksangelopan (
                        lề: 19px 0 0;
                        phần đệm: 0;
                        kiểu danh sách: không có;
                        thiết lập lại bộ đếm: li;
                        }
                        .ksangelopan li (
                        đường viền: 2px liền khối #3575ad;
                        nền: #d7dee4;
                        vị trí: tương đối;
                        lề dưới: 17px;
                        phần đệm: 15px 9px;
                        }
                        .ksangelopan li:hover (
                        chỉ số z: 1;
                        }
                        .ksangelopan li:trước (
                        đường viền: 2px liền khối #2270b3;
                        vị trí: tuyệt đối;
                        trên cùng: -14px;
                        phần đệm: 3px 9px;
                        cỡ chữ: 11px;
                        độ dày phông chữ: đậm;
                        màu sắc: #246eaf;
                        nền: #f2f4f7;
                        tăng ngược: li;
                        nội dung: bộ đếm(li);
                        -webkit-chuyển tiếp-thời lượng: 0,4 giây;
                        thời gian chuyển tiếp: 0,4 giây;
                        }
                        .ksangelopan li:hover:trước (
                        nền: #2672b3;
                        màu: #f7f9fb;
                        -webkit-transform: dịch(-11px, 0);
                        -ms-transform: dịch(-11px, 0);
                        -o-transform: dịch(-11px, 0);
                        biến đổi: dịch(-11px, 0);
                        }
                        .ksangelopan li:sau (
                        nội dung: "";
                        vị trí: tuyệt đối;
                        thời gian chuyển tiếp: 0,3 giây;
                        -webkit-transition-property: chiều rộng;
                        thuộc tính chuyển tiếp: chiều rộng;
                        chỉ số z: -1;
                        nền: #FFF;
                        chiều cao: 100%;
                        trái: 0;
                        trên cùng: 0;
                        chiều rộng: 0;
                        }
                        .ksangelopan li:hover:after (
                        chiều rộng: 100%;
                        }

                        
                        Đó là tất cả cho việc cài đặt.

                        2 Tùy chọn thứ hai:

                        

                        
                        
                        • Mục danh sách
                        
                        
                        • Danh sách duy nhất
                        
                        
                        • Danh sách gốc
                        
                        
                        • ZORNET.RU - Quản trị trang web
                        
                        
                        • Một danh sách khác
                        
                        
                        
                        CSS

                        Beleduzlopamges (
                        lề dưới: 8px;
                        phần đệm: 0;
                        kiểu danh sách: không có;
                        thiết lập lại bộ đếm: li;
                        }
                        .beleduzlopamges li (
                        vị trí: tương đối;
                        đường viền: 2px liền khối #195588;
                        nền: #eff3f7;
                        phần đệm: 15px 19px 15px 27px;
                        lề: 12px 0 12px 40px;
                        -webkit-chuyển tiếp-thời lượng: 0,3 giây;
                        thời gian chuyển tiếp: 0,3 giây;
                        }
                        .beleduzlopamges li:hover (
                        nền: #FFF;
                        }
                        .beleduzlopamges li:trước (
                        chiều cao dòng: 32px;
                        vị trí: tuyệt đối;
                        trên cùng: 4px;
                        trái: -39px;
                        chiều rộng: 39px;
                        căn chỉnh văn bản: giữa;
                        cỡ chữ: 16px;
                        độ dày phông chữ: đậm;
                        màu: #f9f5f5;
                        nền: #275b88;
                        tăng ngược: li;
                        nội dung: bộ đếm(li);
                        thời gian chuyển tiếp: 0,2 giây;
                        }
                        .beleduzlopamges li:hover:trước (
                        chiều rộng:46px;
                        }
                        .beleduzlopamges li:after (
                        vị trí: tuyệt đối;
                        trái: 0;
                        trên cùng: 4px;
                        nội dung: "";
                        chiều cao: 0;
                        chiều rộng: 0;
                        đường viền: 16px trong suốt;
                        viền-trái-màu: #275b88;
                        -webkit-transition-duration: 0,2 giây;
                        thời gian chuyển tiếp: 0,2 giây;
                        }
                        .beleduzlopamges li:hover:after (
                        lề trái: 6px;
                        }

                        
                        Bạn có thể đặt gamma trung tâm một cách độc lập để phù hợp với phong cách chính của trang web.

                        3 Tùy chọn thứ ba:

                        

                        
                        
                        • Tập lệnh cho uCoz
                        
                        
                        • Mẫu cho uCoz
                        
                        
                        • Thiết kế website
                        
                        
                        • Phong cách trang web
                        
                        
                        • Tạo kiểu bằng CSS
                        
                        
                        
                        CSS

                        Nizualisanelag (
                        phần đệm: 0;
                        kiểu danh sách: không có;
                        thiết lập lại bộ đếm: li;
                        }
                        .nizualisanelag li (
                        vị trí: tương đối;
                        phần đệm: 9px 17px 17px 25px;
                        lề trái: 39px;
                        thời gian chuyển tiếp: 0,2 giây;
                        con trỏ: con trỏ;
                        độ dày phông chữ: đậm;
                        màu sắc: #343638;
                        }
                        .nizualisanelag li:trước (
                        đường viền: 3px trong suốt;
                        chiều cao dòng: 35px;
                        vị trí: tuyệt đối;
                        trên cùng: 0;
                        trái:-29px;
                        chiều rộng:41px;
                        căn chỉnh văn bản:giữa;
                        cỡ chữ: 14px;
                        độ dày phông chữ: đậm;
                        màu: #619dce;
                        tăng ngược: li;
                        nội dung: bộ đếm(li);
                        thời gian chuyển tiếp: 0,3 giây;
                        
                        kích thước hộp: hộp viền;
                        }
                        .nizualisanelag li:hover:trước (
                        màu sắc: #337AB7;
                        }
                        .nizualisanelag li:sau (
                        vị trí: tuyệt đối;
                        trên cùng: 0;
                        trái: -29px;
                        chiều rộng: 41px;
                        chiều cao: 41px;
                        đường viền: 5px liền khối #468bd0;
                        bán kính đường viền: 50%;
                        nội dung: "";
                        độ mờ: 0,5;
                        -webkit-box-sizing: hộp viền;
                        -moz-box-sizing: hộp viền;
                        kích thước hộp: hộp viền;
                        }
                        .nizualisanelag li:hover:after (
                        hoạt ảnh: 500ms dễ dàng ra vào 0 giây thoát ra;
                        độ mờ: 1;
                        }

                        @keyframes thoátTrong (
                        0% {
                        độ mờ: 0;
                        biến đổi:scale3d(.3, .3, .3);
                        }
                        20% {
                        biến đổi:scale3d(1.3, 1.3, 1.3);
                        }
                        40% {
                        biến đổi:scale3d(.9, .9, .9);
                        }
                        60% {
                        độ mờ: 1;
                        biến đổi:scale3d(1.03, 1.03, 1.03);
                        }
                        80% {
                        biến đổi:scale3d(.97, .97, .97);
                        }
                        ĐẾN(
                        độ mờ: 1;
                        biến đổi:scale3d(1, 1, 1);
                        }
                        }

                        
                        Đi kèm với hình ảnh động đẹp mắt.

                        4 Lựa chọn thứ tư:

                        

                        
                        
                        • Yếu tố đầu tiên cho trang web
                        
                        
                        • Yếu tố thứ hai cho trang web
                        
                        
                        • Yếu tố thứ ba cho trang web
                        
                        
                        • Yếu tố thứ tư cho trang web
                        
                        
                        • Yếu tố thứ năm cho trang web
                        
                        
                        
                        CSS

                        Đệm: 0;
                        kiểu danh sách: không có;
                        }
                        .kudezamuden li(
                        phần đệm: 6px;
                        }
                        .kudezamuden li:trước (
                        phần đệm bên phải: 11px;
                        độ dày phông chữ: đậm;
                        màu sắc: #4979a0;
                        nội dung: "\2606";
                        thời gian chuyển tiếp: 0,4 giây;
                        }
                        .kudezamuden li:hover:trước (
                        màu: #235e90;
                        nội dung: "\2605";
                        }

                        
                        Tương tự như các phiên bản trước, chỉ có biểu tượng được thay đổi.

                        Nói chung, đây là một lựa chọn nhỏ các danh sách sẽ cho phép quản trị viên web tạo một danh sách đẹp mắt trên cổng thông tin, nơi anh ta có thể thiết kế nó nhiều hơn theo ý muốn của bản thân.

                        Nếu bạn cần đặt các mục vào danh sách được đánh số thay vì danh sách có dấu đầu dòng thì HTML theo thứ tự sẽ được sử dụng. Danh sách này được tạo bằng thẻ ol. Việc đánh số bắt đầu từ một và tăng dần lên một cho mỗi thành phần danh sách được sắp xếp tiếp theo bằng thẻ li.

                        Ngày tốt!

                        Trong bài viết này, bạn sẽ tìm hiểu về tất cả các khả năng của danh sách, hiểu cách tạo danh sách đánh số và các thẻ chính sẽ giúp bạn biến danh sách có dấu đầu dòng đơn giản thành một danh sách thú vị và đáng chú ý hơn bằng các dấu đầu dòng tùy ý. Sau khi hoàn thành bài học, bạn sẽ hiểu được danh sách được sử dụng ở đâu và chúng có thể được sử dụng trong những trường hợp nào.

                        Bài viết này là bài thứ ba trong khóa học ngắn hạn về kiến ​​thức cơ bản về HTML. Trước khi đọc bài học này, tôi khuyên bạn nên xem qua hai phần trước:

                        Bài viết vừa mới bắt đầu và bạn đã có thể nhận thấy việc sử dụng danh sách có dấu đầu dòng tiêu chuẩn. Trên trang web của tôi, nó trông khá đơn giản: ở bên trái có một vết lõm nhỏ với một đường kẻ và một điểm đánh dấu hình vuông. Ở phần sau của bài viết, chúng ta sẽ xem xét chi tiết có những loại bút đánh dấu nào, cách tạo số và cách tạo bút đánh dấu của riêng bạn.

                        Trong mỗi phần của bài viết, việc tạo danh sách nhất định sẽ kèm theo phần giải thích chi tiết cách chèn danh sách cụ thể.

                        1. Danh sách có dấu đầu dòng trong HTML

                        Kiểu danh sách này dùng để liệt kê trong văn bản một tập hợp các phần tử có ý nghĩa tương tự nhau. Đây có thể là danh sách các liên kết có liên quan đến cùng một chủ đề, một lời giải thích chi tiết cho từng phần riêng lẻ của văn bản. Nhưng hãy xem danh sách có dấu đầu dòng trông như thế nào trong mã:

                        Và đây là giao diện của nó trong trình duyệt:

                        Cơm. 1.1. Chế độ xem chuẩn của danh sách không có thứ tự có dấu đầu dòng HTML trong trình duyệt

                        1.1 Dấu đầu dòng tiêu chuẩn cho danh sách có dấu đầu dòng

                        Trong hình trên (Hình 1.1.), bạn có thể thấy các vòng tròn ở đầu mỗi mục menu. Đây là điểm đánh dấu. Theo mặc định, nó xuất hiện dưới dạng một vòng tròn đầy trong trình duyệt. Có một số loại điểm đánh dấu trong HTML: hình tròn đầy, hình tròn trống và hình vuông. Họ không yêu cầu bất kỳ CSS hoặc hình ảnh của bên thứ ba nào:

                        1.2 Điểm đánh dấu danh sách dạng hình tròn trống

                        Bạn đã biết các giá trị thuộc tính, nhưng bây giờ hãy xem cách tạo danh sách dấu đầu dòng HTML trong mã. Từ bảng trên, chúng tôi đã chọn giá trị thứ hai là "vòng tròn" cho thuộc tính loại và đặt nó vào danh sách có dấu đầu dòng:

                        <html > <đầu > <tiêu đề > Ví dụ về danh sách có dấu đầu dòng có điểm đánh dấu vòng tròn trống</tiêu đề> </đầu> <cơ thể > <p> Ngôi sao:</p> <loại ul = "vòng tròn" > <lý > Sirius</li> <lý > Arcturus</li> <lý > Pollux</li> <lý > Betelgeuse</li> <lý > Mặt trời</li> </ul> </cơ thể> </html>

                        Hãy xem ngay mã này sẽ trông như thế nào trong trình duyệt:

                        Cơm. 1.2. Xem điểm đánh dấu danh sách dưới dạng vòng tròn trong trình duyệt

                        1.3 Điểm đánh dấu danh sách có dạng hình vuông

                        Chúng ta cũng hãy xem ví dụ cuối cùng với điểm đánh dấu hình vuông cho danh sách HTML:

                        Hãy chú ý đến điểm đánh dấu, nó đã trở thành hình vuông:

                        Cơm. 1.3. Xem điểm đánh dấu danh sách dưới dạng hình vuông trong trình duyệt

                        Lưu ý quan trọng: Phương pháp này không còn được sử dụng để tạo kiểu cho danh sách dấu đầu dòng. Có sự phân biệt rõ ràng giữa CSS (đọc CSS là gì) và HTML. HTML là để đánh dấu và CSS là để tạo ra một diện mạo hấp dẫn.

                        Mã chứa thuộc tính này khi chỉ định loại tài liệu hiện tại là HTML5 (""), sẽ báo lỗi trong quá trình xác thực. Nếu bạn chưa nghe xác thực là gì thì đây là nơi dành cho bạn.

                        Lỗi sẽ như sau:

                        Cơm. 1.4. Lỗi trên trình xác thực khi sử dụng thuộc tính "loại" của danh sách

                        Chúng tôi đã sắp xếp các danh sách có dấu đầu dòng. Bây giờ chúng ta hãy chuyển sang các danh sách được đánh số, sau đó xem xét các danh sách lồng nhau và một số ví dụ tạo sẵn thường được sử dụng nhất trên các trang web thực.

                        2. Danh sách đánh số trong HTML

                        Không giống như loại danh sách trước, danh sách đánh số có một tính năng quan trọng: chúng được đánh số tự động. Điều này rất hữu ích khi bạn cần đánh số một danh sách lớn. Làm thủ công sẽ mất rất nhiều thời gian và bạn vẫn có thể bị nhầm lẫn. Một danh sách đánh số được chỉ định bằng thẻ. Nó trông như thế nào trong thực tế:

                        Ví dụ về danh sách được đánh số:

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

                        <html > <đầu > <tiêu đề > Ví dụ về danh sách đánh số tiêu chuẩn</tiêu đề> </đầu> <cơ thể > <p> Từ một đến năm:</p> <ồ > <lý >Đầu tiên</li> <lý > Thứ hai</li> <lý > Ngày thứ ba</li> <lý > thứ tư</li> <lý > Thứ năm</li> </ol> </cơ thể> </html>

                        Danh sách được đánh số trông như thế này với cài đặt trình duyệt tiêu chuẩn:

                        Cơm. 2.1. Danh sách được đánh số trong trình duyệt với cài đặt tiêu chuẩn

                        Giống như người tiền nhiệm của nó (danh sách dấu đầu dòng), nó có kiểu hiển thị số riêng. Đánh số thông thường không phải là loại dấu đầu dòng duy nhất cho danh sách được đánh số trong HTML.

                        2.1 Dấu đầu dòng tiêu chuẩn cho danh sách đánh số

                        Ở đây chúng ta có thể lựa chọn không phải ba loại điểm đánh dấu mà là năm loại:

                        Tên điểm đánh dấu	giá trị thuộc tính "loại"	Danh sách Ví dụ
                        Điểm đánh dấu ở dạng số Ả Rập	1	Cầu lông Bóng chày
                        Dấu hiệu ở dạng chữ Latinh viết thường	Một	Chomolungma Chogori Kanchenjunga
                        Dấu hiệu ở dạng chữ Latinh viết hoa	MỘT	Hội nghị thượng đỉnh giảm mạnh Con hẻm giận dữ điên rồ
                        Chữ số La Mã viết thường	Tôi	biển Philippine biển Ả Rập San hô biển
                        Ký hiệu chữ số La Mã viết hoa	TÔI	Màu đỏ Màu xanh lá Màu xanh da trời

                        2.2 Đánh số riêng trong danh sách HTML

                        Ngoài đầu ra thông thường của một danh sách được đánh số, chúng ta cũng có thể bắt đầu đánh số từ bất kỳ số nào. Để làm điều này, bạn cần đặt thuộc tính bổ sung "bắt đầu". Việc đánh số này hoạt động trên tất cả các loại điểm đánh dấu cho danh sách được đánh số. Nó trông như thế nào trong thực tế:

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

                        <html > <đầu > <tiêu đề >Đánh số tùy chỉnh cho danh sách được đánh số</tiêu đề> </đầu> <cơ thể > <p> Chúng tôi bắt đầu đánh số từ mười hai:</p> <ol type = "a" bắt đầu = "12" > <lý > Mười hai</li> <lý > Mười ba</li> <lý > Mười bốn</li> <lý > Mười lăm</li> <lý > mười sáu</li> </ol> </cơ thể> </html>

                        Đây là cách nó sẽ xuất hiện trên trang web thực:

                        Cơm. 2.2. Đánh số từ một số tùy ý trong danh sách được đánh số

                        Trong hình ảnh trên, chúng tôi đánh số danh sách bắt đầu từ số 12, đồng thời tạo các điểm đánh dấu ở dạng chữ Latinh viết thường. Bây giờ, tôi nghĩ rằng cách sử dụng các thuộc tính này trong dự án của bạn đã trở nên rõ ràng.

                        Chà, bây giờ hãy chuyển sang danh sách HTML lồng nhau.

                        3. Cách tạo danh sách đa cấp (lồng nhau) trong HTML

                        Danh sách đa cấp được sử dụng trên trang web để xây dựng menu. Menu này thường xuất hiện dưới dạng menu thả xuống đi xuống (bài học ở trên) hoặc menu thả xuống bên trái hoặc bên phải. Các menu như vậy cho phép bạn lưu trữ các thành phần menu khác ở dạng nhỏ gọn.

                        Lấy các mẫu ô tô làm ví dụ, chúng tôi sẽ xây dựng danh sách nhiều cấp độ trong HTML:

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

                        <html > <đầu > <tiêu đề > Danh sách dấu đầu dòng lồng nhau trong HTML</tiêu đề> </đầu> <cơ thể > <ul > <lý > Citroen<ul > <lý > Berlingo</li> <lý > C1</li> <lý > C2</li> <lý > C3 Picasso</li> <lý > C4 Đại Picasso</li> </ul> </li> <lý > KIA</li> <lý > Toyota</li> <lý > Audi</li> <lý > Lexus</li> </ul> </cơ thể> </html>

                        Lưu ý danh sách đa cấp trông như thế nào trong trình duyệt:

                        Cơm. 3.1. Ví dụ về danh sách đa cấp trong HTML

                        Chúng tôi đã tạo một danh sách đa cấp bằng cách sử dụng dấu đầu dòng (thẻ

                        ). Một danh sách đa cấp với các mẫu xe Citroen xuất hiện cùng với các điểm đánh dấu khác. Danh sách chính có đầy dấu đầu dòng và danh sách cấp 2 có các vòng tròn trống. Tuy nhiên, như bạn nhớ, bằng cách sử dụng thuộc tính “type”, chúng ta có thể xác định lại các điểm đánh dấu (tốt hơn nên đặt ).

                        Nhưng chúng ta có thể kết hợp danh sách nhiều cấp với danh sách được đánh số và đánh dấu đầu dòng như thế này:

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

                        <html > <đầu > <tiêu đề > Danh sách được đánh số, có dấu đầu dòng và đa cấp trong HTML</tiêu đề> </đầu> <cơ thể > <ul > <lý > Nhóm hoa tulip đầu tiên<ồ > <lý > Lớp một<ul > <lý > Hoa tulip sớm đơn giản</li> </ul> </li> <lý > Lớp thứ hai<ul > <lý > hoa tulip bông</li> </ul> </li> </ol> </li> </ul> </cơ thể> </html>

                        Trong ví dụ trên chúng ta có lồng đôi (2 cấp độ). Đầu tiên, chúng tôi đưa ra danh sách hai loại hoa tulip; chúng tôi đã đánh số nó. Sau đó, một danh sách có dấu đầu dòng được lồng vào mỗi mục trong danh sách được đánh số.

                        Hãy xem nó trông như thế nào trong trình duyệt:

                        Cơm. 3.2. Ví dụ về danh sách được đánh số nhiều cấp thành danh sách có dấu đầu dòng trong trình duyệt

                        4. Tài liệu hữu ích về danh sách HTML

                        Đây là thông tin đòi hỏi sự hiểu biết về các thuộc tính CSS. Để làm được điều này, tôi khuyên bạn nên học những bài học sau: . Tất cả các ví dụ sẽ có ngay mã nguồn và được chia thành các tab HTML (cấu trúc), CSS (kiểu) và Kết quả (kết quả).

                        4.1 Cách tạo danh sách HTML thành chuỗi

                        Việc chuyển đổi danh sách HTML thành chuỗi có thể cần thiết khi tạo menu ngang. Nó rất dễ dàng để làm:

                        4.2 Cách tạo danh sách HTML không có biểu tượng

                        Thuộc tính list-style-type trong CSS chịu trách nhiệm cho việc này (chi tiết hơn):

                        4.3 Cách căn giữa danh sách trong HTML

                        Mục danh sách là một phần tử khối nên nó cần được căn giữa bằng cách sử dụng phần đệm. Nhưng có một điểm quan trọng - chúng ta phải xác định rõ ràng độ rộng để căn chỉnh hoạt động:

                        4.4 Cách tạo danh sách bằng hình ảnh trong HTML

                        Chỉ cần một thuộc tính CSS list-style-image là đủ. Bên trong url, chỉ định địa chỉ trước biểu tượng. Tôi chỉ muốn lưu ý rằng tốt hơn hết bạn nên chọn ngay một hình ảnh nhỏ, vì chiều cao của dòng danh sách phụ thuộc vào nó:

                        4.5 Danh sách có dấu đầu dòng HTML dấu đầu dòng của bạn

                        Trong trường hợp này, bạn cần kết nối trước các biểu tượng phông chữ (ví dụ FontAwesome ). Sau đó, bạn có thể tạo bất kỳ biểu tượng nào thay vì điểm đánh dấu tiêu chuẩn:

                        4.6 Cách tạo danh sách trong HTML theo nhiều cột

                        Để tạo danh sách theo nhiều cột, chúng tôi sẽ sử dụng thuộc tính đếm cột CSS (thuộc tính này chỉ được hỗ trợ trong các trình duyệt sau: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Bạn cũng cần đặt chiều cao của danh sách để xem sự phân chia thành nhiều cột:

                        5. Thực hành làm việc với danh sách

                        Trong video bên dưới, bạn có thể thấy tất cả công việc với danh sách HTML trong thực tế: