Liệt kê tiêu đề css

Thông thường, một danh sách chứa các phần tử 'nội tuyến'. Mặc dù, điều này không phải lúc nào cũng đúng, bạn có thể sử dụng các yếu tố cấp độ 'khối'. Mặc dù vậy, tôi sẽ không quá bận rộn với việc làm tổ


  • Apples
  • Oranges
  • Blueberries
  • Grapes

Một loạt tên, từ hoặc các mục khác được viết, in hoặc tưởng tượng nối tiếp nhau. Danh sách mua sắm;

Trước đây, tôi luôn đặt tiêu đề phía trên danh sách và có vẻ như hầu hết mọi người đều làm theo cách đó

List

  • car
  • cat
  • dog

tôi nghĩ về nếu


    List

  • car
  • cat
  • dog

sẽ là cách đúng đắn

Và tình cờ thấy thẻ lh lần đầu tiên
Chưa bao giờ nhìn thấy nó trước đây trong một cuốn sách hoặc bài báo và tự hỏi
Nếu có thẻ này, tại sao nó không được sử dụng nhiều?


    List

  • car
  • cat
  • dog

Chắc chắn bạn có thể bọc một phần xung quanh danh sách trong html5, nhưng đó là phần đánh dấu bổ sung

Onsen UI CSS được sử dụng để tạo các thành phần HTML đẹp mắt. Đây là một trong những cách hiệu quả nhất để tạo các thành phần lai HTML5 tương thích với cả thiết bị di động và máy tính để bàn

Danh sách được sử dụng để lưu trữ dữ liệu hoặc thông tin trên các trang web ở dạng có thứ tự hoặc không có thứ tự. Onsen UI CSS Component Category List Header được sử dụng để tạo tiêu đề trong danh sách bằng cách sử dụng lớp tiêu đề danh sách

Tiêu đề danh sách là các phần tử khối được sử dụng để mô tả nội dung của danh sách. Không giống như bộ chia mục, tiêu đề danh sách chỉ nên được sử dụng một lần ở đầu danh sách mục

Sử dụng cơ bản

gócJavaScriptReactVue

iOSMD

Các nút trong tiêu đề danh sách

Một nút được đặt trong tiêu đề danh sách có thể hữu ích để hiển thị một phần của danh sách và chuyển hướng đến danh sách đầy đủ bằng nút

gócJavaScriptReactVue

iOSMD

Liệt kê các dòng tiêu đề

Theo mặc định, tiêu đề danh sách không hiển thị đường viền dưới cùng. Thuộc tính lines có thể được sửa đổi thành "full" hoặc "inset" sẽ hiển thị đường viền có chiều rộng đầy đủ hoặc đường viền bên trong với phần đệm bên trái, tương ứng

gócJavaScriptReactVue

iOSMD

theo chủ đề

Màu sắc

gócJavaScriptReactVue

iOSMD

Thuộc tính tùy chỉnh CSS

gócJavaScriptReactVue

iOSMD

Của cải

màu

Mô tả Màu để sử dụng từ bảng màu của ứng dụng của bạn. Tùy chọn mặc định là. "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "full"0 và "full"1. Để biết thêm thông tin về màu sắc, xem chủ đề. Attribute"full"2Type"full"3Default"full"4

dòng

Mô tảCách hiển thị đường viền dưới cùng trên tiêu đề danh sách. AttributelinesType"full"6Default"full"4

chế độ

Mô tảChế độ xác định kiểu nền tảng nào sẽ sử dụng. Attribute"full"8Type"full"9Default"full"4

Sự kiện

Không có sự kiện nào cho thành phần này

phương pháp

Không có phương thức công khai nào cho thành phần này

Phần bóng CSS

Không có phần đổ bóng CSS nào cho thành phần này

Thuộc tính tùy chỉnh CSS

TênMô tả"inset"1Nền của tiêu đề danh sách"inset"2Màu của đường viền tiêu đề danh sách"inset"3Kiểu của đường viền tiêu đề danh sách"inset"4Chiều rộng của đường viền tiêu đề danh sách"inset"5Màu của văn bản tiêu đề danh sách"inset"6Chiều rộng của đường viền tiêu đề danh sách bên trong

Gần đây tôi cần tạo một tiêu đề cố định, vì vậy tôi đã tìm kiếm cách tốt nhất để làm điều đó. Tôi đã đọc nhiều bài báo và bài viết, nhưng không dễ để tìm thấy thông tin cập nhật và rõ ràng về chủ đề này, chủ yếu là…

Hầu hết các phần hoạt động giống như bất kỳ văn bản nào khác, nhưng có một số thuộc tính CSS dành riêng cho danh sách mà bạn cần biết, cũng như một số phương pháp hay nhất cần xem xét. Bài viết này giải thích tất cả

điều kiện tiên quyết. Kiến thức cơ bản về máy tính, kiến ​​thức cơ bản về HTML (học Giới thiệu về HTML), kiến ​​thức cơ bản về CSS (học Giới thiệu về CSS), văn bản CSS và phông chữ cơ bản. Khách quan. Để làm quen với các phương pháp hay nhất và các thuộc tính liên quan đến danh sách kiểu dáng

Để bắt đầu, hãy xem một ví dụ về danh sách đơn giản. Trong suốt bài viết này, chúng ta sẽ xem xét các danh sách mô tả, có thứ tự và không có thứ tự — tất cả đều có các đặc điểm kiểu dáng giống nhau, cũng như một số đặc điểm riêng của chúng. Ví dụ chưa được chỉnh sửa có sẵn trên GitHub (hãy xem cả mã nguồn. )

HTML cho ví dụ danh sách của chúng tôi trông giống như vậy

<h2>Shopping (unordered) listh2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
p>

<ul>
  <li>Hummusli>
  <li>Pitali>
  <li>Green saladli>
  <li>Halloumili>
ul>

<h2>Recipe (ordered) listh2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
p>

<ol>
  <li>Toast pita, leave to cool, then slice down the edge.li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  li>
  <li>Wash and chop the salad.li>
  <li>Fill pita with salad, hummus, and fried halloumi.li>
ol>

<h2>Ingredient description listh2>

<p>
  Paragraph for reference, paragraph for reference, paragraph for reference,
  paragraph for reference, paragraph for reference, paragraph for reference.
p>

<dl>
  <dt>Hummusdt>
  <dd>
    A thick dip/sauce generally made from chick peas blended with tahini, lemon
    juice, salt, garlic, and other ingredients.
  dd>
  <dt>Pitadt>
  <dd>A soft, slightly leavened flatbread.dd>
  <dt>Halloumidt>
  <dd>
    A semi-hard, unripened, brined cheese with a higher-than-usual melting
    point, usually made from goat/sheep milk.
  dd>
  <dt>Green saladdt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.dd>
dl>

Nếu bạn xem ví dụ trực tiếp ngay bây giờ và điều tra các thành phần danh sách bằng các công cụ dành cho nhà phát triển trình duyệt, bạn sẽ nhận thấy một vài giá trị mặc định về kiểu dáng

  • Các phần tử
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    3 và
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    4 có đỉnh và đáy là
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    5 của
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    6 (
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    7) và một
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    8 của
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    9 (
    ol {
      list-style-type: upper-roman;
    }
    
    0)
  • Các mục danh sách (_______12_______1 phần tử) không có giá trị mặc định cho khoảng cách
  • Phần tử
    ol {
      list-style-type: upper-roman;
    }
    
    2 có
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    5 trên cùng và dưới cùng của
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    6 (
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    7), nhưng không có bộ đệm
  • Các phần tử
    ol {
      list-style-type: upper-roman;
    }
    
    6 có
    ol {
      list-style-type: upper-roman;
    }
    
    7 của
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    9 (
    ol {
      list-style-type: upper-roman;
    }
    
    0)
  • Các phần tử
    ol {
      list-style-type: upper-roman;
      list-style-position: inside;
    }
    
    0 mà chúng tôi đưa vào để tham khảo có phần trên cùng và dưới cùng của
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    5 của
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    6 (
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    7) — giống với các loại danh sách khác nhau

Khi tạo kiểu cho danh sách, bạn cần điều chỉnh kiểu của chúng để chúng giữ khoảng cách dọc giống như các phần tử xung quanh (chẳng hạn như đoạn văn và hình ảnh; đôi khi được gọi là nhịp dọc) và khoảng cách ngang giống nhau (bạn có thể xem ví dụ về kiểu đã hoàn thành

CSS được sử dụng cho kiểu dáng và khoảng cách văn bản như sau

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* Description list styles */

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

  • Quy tắc đầu tiên đặt phông chữ trên toàn trang web và kích thước phông chữ cơ sở là 10px. Chúng được kế thừa bởi mọi thứ trên trang
  • Quy tắc 2 và 3 đặt kích thước phông chữ tương đối cho các tiêu đề, các loại danh sách khác nhau (phần tử con của các phần tử danh sách kế thừa các phần tử này) và các đoạn văn. Điều này có nghĩa là mỗi đoạn văn và danh sách sẽ có cùng kích thước phông chữ và khoảng cách trên cùng và dưới cùng, giúp giữ nhịp dọc nhất quán
  • Quy tắc 4 đặt
    ol {
      list-style-type: upper-roman;
      list-style-position: inside;
    }
    
    4 giống nhau trên các đoạn văn và mục danh sách — vì vậy các đoạn văn và từng mục danh sách riêng lẻ sẽ có cùng khoảng cách giữa các dòng. Điều này cũng sẽ giúp giữ cho nhịp dọc nhất quán
  • Quy tắc 5 và 6 áp dụng cho danh sách mô tả. Chúng tôi đặt
    ol {
      list-style-type: upper-roman;
      list-style-position: inside;
    }
    
    4 trên các thuật ngữ và mô tả trong danh sách mô tả giống như chúng tôi đã làm với các đoạn văn và mục trong danh sách. Một lần nữa, tính nhất quán là tốt. Chúng tôi cũng làm cho các thuật ngữ mô tả có phông chữ đậm để chúng nổi bật hơn về mặt hình ảnh

Bây giờ chúng ta đã xem xét các kỹ thuật giãn cách chung cho danh sách, hãy khám phá một số thuộc tính dành riêng cho danh sách. Có ba thuộc tính mà bạn nên biết khi bắt đầu, có thể được đặt trên các phần tử

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* Description list styles */

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}
3 hoặc
/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* Description list styles */

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}
4

  • ol {
      list-style-type: upper-roman;
      list-style-position: inside;
    }
    
    8. Đặt loại dấu đầu dòng sẽ sử dụng cho danh sách, ví dụ: dấu đầu dòng hình vuông hoặc hình tròn cho danh sách không có thứ tự hoặc số, chữ cái hoặc chữ số La Mã cho danh sách có thứ tự
  • ol {
      list-style-type: upper-roman;
      list-style-position: inside;
    }
    
    9. Đặt xem các dấu đầu dòng, ở đầu mỗi mục, xuất hiện bên trong hay bên ngoài danh sách
  • ul {
      list-style-image: url(star.svg);
    }
    
    0. Cho phép bạn sử dụng hình ảnh tùy chỉnh cho dấu đầu dòng, thay vì hình vuông hoặc hình tròn đơn giản

Như đã đề cập ở trên, thuộc tính

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}
8 cho phép bạn đặt loại dấu đầu dòng sẽ sử dụng cho các dấu đầu dòng. Trong ví dụ của chúng tôi, chúng tôi đã đặt danh sách có thứ tự để sử dụng chữ số la mã viết hoa với

ol {
  list-style-type: upper-roman;
}

Điều này cho chúng ta cái nhìn sau đây

Liệt kê tiêu đề css

Bạn có thể tìm thấy nhiều tùy chọn hơn bằng cách xem trang tham khảo

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}
8

Thuộc tính

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}
9 đặt các dấu đầu dòng xuất hiện bên trong các mục danh sách hay bên ngoài chúng trước khi bắt đầu mỗi mục. Giá trị mặc định là
ul {
  list-style-image: url(star.svg);
}
4, làm cho các dấu đầu dòng nằm ngoài danh sách các mục, như đã thấy ở trên

Nếu bạn đặt giá trị thành

ul {
  list-style-image: url(star.svg);
}
5, các dấu đầu dòng sẽ nằm bên trong các dòng

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

Liệt kê tiêu đề css

Thuộc tính

ul {
  list-style-image: url(star.svg);
}
0 cho phép bạn sử dụng hình ảnh tùy chỉnh cho dấu đầu dòng của mình. Cú pháp khá đơn giản

ul {
  list-style-image: url(star.svg);
}

Tuy nhiên, thuộc tính này có một chút hạn chế trong việc kiểm soát vị trí, kích thước, v.v. của những viên đạn. Tốt hơn hết là bạn nên sử dụng họ thuộc tính

ul {
  list-style-image: url(star.svg);
}
7 mà bạn đã học được trong bài viết Nền và đường viền. Bây giờ, đây là một taster

Trong ví dụ đã hoàn thành của chúng tôi, chúng tôi đã tạo kiểu cho danh sách không có thứ tự như vậy (bên trên những gì bạn đã thấy ở trên)

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

Ở đây chúng tôi đã làm như sau

  • Đặt
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    8 của
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    3 từ giá trị mặc định là
    /* General styles */
    
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    ul,
    ol,
    dl,
    p {
      font-size: 1.5rem;
    }
    
    li,
    p {
      line-height: 1.5;
    }
    
    /* Description list styles */
    
    dd,
    dt {
      line-height: 1.5;
    }
    
    dt {
      font-weight: bold;
    }
    
    9 thành
    ul {
      padding-left: 2rem;
      list-style-type: none;
    }
    
    ul li {
      padding-left: 2rem;
      background-image: url(star.svg);
      background-position: 0 0;
      background-size: 1.6rem 1.6rem;
      background-repeat: no-repeat;
    }
    
    1, sau đó đặt số lượng tương tự trên các mục trong danh sách. Điều này sao cho, về tổng thể, các mục trong danh sách vẫn được xếp thẳng hàng với các mục trong danh sách được sắp xếp theo thứ tự và các mô tả trong danh sách mô tả, nhưng các mục trong danh sách có một số phần đệm để hình nền nằm bên trong. Nếu chúng tôi không làm điều này, hình nền sẽ chồng lên văn bản mục danh sách, trông sẽ lộn xộn
  • Đặt
    ol {
      list-style-type: upper-roman;
      list-style-position: inside;
    }
    
    8 thành
    ul {
      padding-left: 2rem;
      list-style-type: none;
    }
    
    ul li {
      padding-left: 2rem;
      background-image: url(star.svg);
      background-position: 0 0;
      background-size: 1.6rem 1.6rem;
      background-repeat: no-repeat;
    }
    
    3 để không có dấu đầu dòng nào xuất hiện theo mặc định. Thay vào đó, chúng tôi sẽ sử dụng các thuộc tính của
    ul {
      list-style-image: url(star.svg);
    }
    
    7 để xử lý các dấu đầu dòng
  • Đã chèn một dấu đầu dòng vào mỗi mục danh sách không có thứ tự. Các thuộc tính có liên quan như sau
    • ul {
        padding-left: 2rem;
        list-style-type: none;
      }
      
      ul li {
        padding-left: 2rem;
        background-image: url(star.svg);
        background-position: 0 0;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
      }
      
      5. Điều này tham chiếu đường dẫn đến tệp hình ảnh bạn muốn sử dụng làm dấu đầu dòng
    • ul {
        padding-left: 2rem;
        list-style-type: none;
      }
      
      ul li {
        padding-left: 2rem;
        background-image: url(star.svg);
        background-position: 0 0;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
      }
      
      6. Điều này xác định vị trí hình ảnh sẽ xuất hiện trong nền của phần tử được chọn — trong trường hợp này, chúng tôi đang nói
      ul {
        padding-left: 2rem;
        list-style-type: none;
      }
      
      ul li {
        padding-left: 2rem;
        background-image: url(star.svg);
        background-position: 0 0;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
      }
      
      7, có nghĩa là dấu đầu dòng sẽ xuất hiện ở phía trên cùng bên trái của mỗi mục danh sách
    • ul {
        padding-left: 2rem;
        list-style-type: none;
      }
      
      ul li {
        padding-left: 2rem;
        background-image: url(star.svg);
        background-position: 0 0;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
      }
      
      8. Điều này đặt kích thước của hình nền. Lý tưởng nhất là chúng tôi muốn các dấu đầu dòng có cùng kích thước với các mục trong danh sách (hoặc nhỏ hơn hoặc lớn hơn một chút). Chúng tôi đang sử dụng kích thước
      ul {
        padding-left: 2rem;
        list-style-type: none;
      }
      
      ul li {
        padding-left: 2rem;
        background-image: url(star.svg);
        background-position: 0 0;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
      }
      
      9 (_______5_______6), kích thước này rất vừa vặn với phần đệm
      ul {
        padding-left: 2rem;
        list-style-type: none;
      }
      
      ul li {
        padding-left: 2rem;
        background-image: url(star.svg);
        background-position: 0 0;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
      }
      
      1 mà chúng tôi đã cho phép dấu đầu dòng nằm bên trong — 16px cộng với 4px khoảng cách giữa dấu đầu dòng và văn bản mục danh sách hoạt động tốt
    • ul {
        list-style-type: square;
        list-style-image: url(example.png);
        list-style-position: inside;
      }
      
      2. Theo mặc định, hình nền lặp lại cho đến khi chúng lấp đầy không gian nền có sẵn. Chúng tôi chỉ muốn một bản sao của hình ảnh được chèn vào mỗi trường hợp, vì vậy chúng tôi đặt giá trị này thành
      ul {
        list-style-type: square;
        list-style-image: url(example.png);
        list-style-position: inside;
      }
      
      3

Điều này cho chúng ta kết quả sau

Liệt kê tiêu đề css

Tất cả ba thuộc tính được đề cập ở trên đều có thể được đặt bằng một thuộc tính tốc ký duy nhất,

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}
4. Ví dụ: CSS sau

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

Có thể được thay thế bằng cái này

ul {
  list-style: square url(example.png) inside;
}

Các giá trị có thể được liệt kê theo bất kỳ thứ tự nào và bạn có thể sử dụng một, hai hoặc cả ba (giá trị mặc định được sử dụng cho các thuộc tính không được bao gồm là

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}
5,
ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}
3 và
ul {
  list-style-image: url(star.svg);
}
4). Nếu cả
ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}
8 và
ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}
9 được chỉ định, thì loại này sẽ được sử dụng làm phương án dự phòng nếu không thể tải hình ảnh vì lý do nào đó

Đôi khi bạn có thể muốn đếm khác nhau trên một danh sách có thứ tự — e. g. , bắt đầu từ một số khác 1 hoặc đếm ngược hoặc đếm theo từng bước lớn hơn 1. HTML và CSS có một số công cụ để giúp bạn ở đây

Thuộc tính cho phép bạn bắt đầu đếm từ một số khác 1. ví dụ sau

<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  li>
  <li>Wash and chop the salad.li>
  <li>Fill pita with salad, hummus, and fried halloumi.li>
ol>

Cung cấp cho bạn đầu ra này

Thuộc tính sẽ bắt đầu danh sách đếm ngược thay vì tăng. ví dụ sau

<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.li>
  <li>
    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  li>
  <li>Wash and chop the salad.li>
  <li>Fill pita with salad, hummus, and fried halloumi.li>
ol>

Cung cấp cho bạn đầu ra này

Ghi chú. Nếu có nhiều mục danh sách trong danh sách bị đảo ngược hơn giá trị của thuộc tính

ul {
  list-style: square url(example.png) inside;
}
0, số lượng sẽ tiếp tục bằng 0 và sau đó thành giá trị âm

Thuộc tính cho phép bạn đặt các mục trong danh sách của mình thành các giá trị số cụ thể. ví dụ sau

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* Description list styles */

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}
0

Cung cấp cho bạn đầu ra này

Ghi chú. Ngay cả khi bạn đang sử dụng một số không phải là

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}
8, bạn vẫn cần sử dụng các giá trị số tương đương trong thuộc tính
ul {
  list-style: square url(example.png) inside;
}
3

Trong phần học tập tích cực này, chúng tôi muốn bạn tiếp thu những gì bạn đã học ở trên và bắt đầu tạo kiểu cho một danh sách lồng nhau. Chúng tôi đã cung cấp cho bạn HTML và chúng tôi muốn bạn

  1. Đưa ra danh sách không có thứ tự gạch đầu dòng
  2. Cung cấp cho các mục danh sách không có thứ tự và các mục danh sách được sắp xếp có chiều cao dòng là 1. 5 cỡ chữ của họ
  3. Đưa ra danh sách có thứ tự các viên đạn theo thứ tự chữ cái thấp hơn
  4. Thoải mái chơi với ví dụ về danh sách bao nhiêu tùy thích, thử nghiệm với các loại dấu đầu dòng, khoảng cách hoặc bất kỳ thứ gì khác mà bạn có thể tìm thấy

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời tiềm năng

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* Description list styles */

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}
1

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,
ol,
dl,
p {
  font-size: 1.5rem;
}

li,
p {
  line-height: 1.5;
}

/* Description list styles */

dd,
dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}
2

Các danh sách tương đối dễ hiểu về kiểu dáng sau khi bạn biết một vài nguyên tắc cơ bản liên quan và các thuộc tính cụ thể. Trong bài viết tiếp theo, chúng ta sẽ chuyển sang các kỹ thuật tạo kiểu liên kết

Bộ đếm CSS cung cấp các công cụ nâng cao để tùy chỉnh cách đếm và tạo kiểu danh sách, nhưng chúng khá phức tạp. Chúng tôi khuyên bạn nên xem xét những điều này nếu bạn muốn vươn mình. Thấy

Làm cách nào để sử dụng kiểu danh sách trong CSS?

Thuộc tính tốc ký CSS kiểu danh sách cho phép bạn đặt tất cả các thuộc tính kiểu danh sách cùng một lúc. .
danh sách-kiểu-hình ảnh
danh sách-kiểu-vị trí. theo quy định
kiểu danh sách. theo quy định

Danh sách trong CSS là gì?

Nói chung, danh sách các mục hoặc danh sách nội dung theo một cách cụ thể được chỉ định bởi danh sách CSS. Có hai cách để tổ chức danh sách. có thứ tự và không có thứ tự.

danh sách là gì

Thuộc tính CSS kiểu danh sách đặt điểm đánh dấu (chẳng hạn như đĩa, ký tự hoặc kiểu bộ đếm tùy chỉnh) của thành phần mục danh sách.

Có thẻ danh sách trong HTML không?

Thẻ . Thẻ