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. Attributelines
Type"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
Shopping [unordered] list
Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.
Hummus
Pita
Green salad
Halloumi
Recipe [ordered] list
Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.
Toast pita, leave to cool, then slice down the edge.
Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
Wash and chop the salad.
Fill pita with salad, hummus, and fried halloumi.
Ingredient description list
Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.
Hummus
A thick dip/sauce generally made from chick peas blended with tahini, lemon
juice, salt, garlic, and other ingredients.
Pita
A soft, slightly leavened flatbread.
Halloumi
A semi-hard, unripened, brined cheese with a higher-than-usual melting
point, usually made from goat/sheep milk.
Green salad
That green healthy stuff that many of us just use to garnish kebabs.
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ử
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 [/* 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]ol { list-style-type: upper-roman; }
- 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ử
2 cóol { list-style-type: upper-roman; }
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/* 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; }
- Các phần tử
6 cóol { list-style-type: upper-roman; }
7 củaol { list-style-type: upper-roman; }
9 [/* 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]ol { list-style-type: upper-roman; }
- Các phần tử
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ủaol { list-style-type: upper-roman; list-style-position: inside; }
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/* 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; }
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
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ánol { list-style-type: upper-roman; list-style-position: inside; }
- Quy tắc 5 và 6 áp dụng cho danh sách mô tả. Chúng tôi đặt
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 ảnhol { list-style-type: upper-roman; list-style-position: inside; }
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
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áchol { list-style-type: upper-roman; list-style-position: inside; }
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ảnul { list-style-image: url[star.svg]; }
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ớiol {
list-style-type: upper-roman;
}
Điều này cho chúng ta cái nhìn sau đây
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;
}
8Thuộ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ênNế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òngol {
list-style-type: upper-roman;
list-style-position: inside;
}
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ảnul {
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 tasterTrong 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
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/* 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, 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ộnul { 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; }
- Đặt
8 thànhol { list-style-type: upper-roman; list-style-position: inside; }
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ủaul { 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 để xử lý các dấu đầu dòngul { list-style-image: url[star.svg]; }
- Đã 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
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òngul { 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óiul { 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áchul { 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ướcul { 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 đệmul { 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ốtul { 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; }
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ànhul { list-style-type: square; list-style-image: url[example.png]; list-style-position: inside; }
3ul { list-style-type: square; list-style-image: url[example.png]; list-style-position: inside; }
Điều này cho chúng ta kết quả sau
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 sauul {
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
Toast pita, leave to cool, then slice down the edge.
Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
Wash and chop the salad.
Fill pita with salad, hummus, and fried halloumi.
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
Toast pita, leave to cool, then slice down the edge.
Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
Wash and chop the salad.
Fill pita with salad, hummus, and fried halloumi.
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ị âmThuộ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;
}
0Cung 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;
}
3Trong 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
- Đưa ra danh sách không có thứ tự gạch đầu dòng
- 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ọ
- Đưa ra danh sách có thứ tự các viên đạn theo thứ tự chữ cái thấp hơn
- 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;
}
2Cá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