Thuộc tính list

  -  

Trong bài học này mình vẫn cùng tìm hiểu về list (list) vào CSS. Vậy danh sách (list) là gì, tất cả mấy loại list (list) vào HTML, vào CSS có các thuộc tínhnào sẽ được vận dụng trên list (list). Mình cùng nhau tò mò trong bài xích này nhé.

Bạn đang xem: Thuộc tính list

*


*

1. List (list) trong CSS là gì?

Mình đã lấy hình minh họa cho chúng ta dễhiểu, và mình cũng không biết giải thích khái niệm của danh sách ra sao nữa.:)

List trong HTML bao gồm 2 loại chính đó là:

Bài viết này được đăng tại


- list có thiết bị tự (orderedlist). Đánh vệt mục của list có vật dụng tựmặc địnhlàsố và bắt đầu bằng 1.

- Danh sách không có thứ trường đoản cú (unordered list). Đánh vết mục của danh sách không có thứ tự khoác định là vết chấm màu đen.

CSS bao hàm thuộc tính như list-style-type, list-style-image, list-style-position cho phépthay đổi hình tượng đánh dấu hạng mục của danh sách.Vậy cách thực hiện nhữngthuộc tính này như vậy nào, mình thuộc xem tiếp phần 2 nhé.

2. Một số thuộc tính chủ yếu của list

list-style-type

list-style-type là ở trong tính được cho phép chỉ định loại khắc ghi mục của list nào đã đượchiển thị, vídụ như là hình tròn, hình vuông, chữ la mã ...

list-style-type có rất nhiều giá trị, tuy nhiên mình chỉ ra mắt những giá chỉ trị hay được sử dụng sau:

circle: quý giá hiển thịlà hình trònsquare: cực hiếm hiển thị là hình vuôngupper-roman: giátrị hiển thị là chữ la mã hoa như I, II, II, IV ...lower-roman: quý giá hiển thị là chữ la mã hay như i, ii, iii, iv ...upper-latin: quý hiếm hiển thịlà vần âm latin hoa như A, B, C ...lower-alpha: quý hiếm hiển thịlà chữ cái alphabet như a, b, c ...none:không hiển thị gì cảdecimal: cực hiếm hiển thị là số như 1, 2, 3 ...decimal-leading-zero: giá trị hiển thị là số tuy thế sẽ thêm số 0 phía trước số, nếu số

Cú pháp:


Selector list-style-type: giá bán trị;
Mình đã lấy lấy ví dụ như sau:


lấy một ví dụ RUN

.circle list-style-type: circle; .square list-style-type: square; .upper-roman list-style-type: upper-roman; .lower-roman list-style-type: lower-roman; .upper-latin list-style-type: upper-latin; .lower-alpha list-style-type: lower-alpha ; .none list-style-type: none; .decimal list-style-type: decimal;

list-style-image

list-style-image là ở trong tính cần sử dụng hình ảnh (image)để làmđánh vệt mục của danh sách.

Xem thêm: Hướng Dẫn Cách Tắt Màn Hình Cảm Ứng Trên Điện Thoại Android Cho Trẻ Em Nghịch

Cú pháp CSS:


selector list-style-image: url của hình ảnh;
lấy ví dụ RUN
ul list-style-image: url("css-list-image-ex.gif");

list-style-position

list-style-position là ở trong tính dùng để làm thiết lậpvị trí hiển thịcủa các ghi lại mục của danh sách.

list-style-position bao gồm 2 giá trị bao gồm đó là:

outside: đánh dấu mục của danh sách sẽ nằm bên ngoài các phần tử của danh sáchinside: ghi lại mục của danh sách sẽ nằm phía bên trong cácphần tử của danh sách.

Cú pháp CSS:


selector list-style-position: giá chỉ trị;
Để chúng ta dễ hiểu, mình sẽ lấy ví dụ sau:


ví dụ RUN

ul.inside list-style-position: inside;ul.outsite list-style-position: outsite;p color: red;
Và kết quả của lấy một ví dụ trên là:

list-style

list-style là trực thuộc tính trình bài xích cách viết gọn gàng của 3 trực thuộc tínhlist-style-type,list-style-image,list-style-position.

Cú pháp:


selector list-style: type image position;
lấy một ví dụ RUN
ul list-style: inside url("css-list-image-ex.gif") square;
Lưu ý: máy tự của 3 ở trong tính list-style-type,list-style-image,list-style-positionmình tất cả thể đổi khác được và hiệu quả các vật dụng tự thay đổi là như nhau. Vào 2 thuộc tínhlist-style-type vàlist-style-imagethì trực thuộc tínhlist-style-image sẽ tiến hành áp dụng, còn trực thuộc tínhlist-style-type sẽ không còn được áp dụng, chỉ lúc hình ảnh bị lỗithì trực thuộc tínhlist-style-type bắt đầu được áp dụng.

Xem thêm: Tìm Hiểu Về Mô Hình 7 Lớp Osi 7 Tầng, Mô Hình Osi: Một Cách Nhìn Dễ Hiểu

3. Kết luận

Như vậy là mình đã trình bày xongvề list (list) trong CSSlà gì và các thuộc tính chủ yếu của danh sách trong CSS rồi.

Cuối cùng, trong quá trình viết vào tránh khỏi sai sót, nếu tất cả điểm làm sao không hợp lý rất ao ước nhận được sự góp ý tình thực của chúng ta để bài viết của mình ngày càng một giỏi hơn