CSS - Danh sách
Danh sách rất hữu ích trong việc chuyển tải một tập hợp các dấu đầu dòng hoặc được đánh số. Chương này hướng dẫn bạn cách kiểm soát loại danh sách, vị trí, kiểu, v.v. bằng CSS.
Chúng tôi có năm thuộc tính CSS sau đây, có thể được sử dụng để kiểm soát danh sách -
Các list-style-type cho phép bạn kiểm soát hình dạng hoặc sự xuất hiện của điểm đánh dấu.
Các list-style-position chỉ định xem một điểm dài bao quanh dòng thứ hai sẽ thẳng hàng với dòng đầu tiên hay bắt đầu bên dưới điểm bắt đầu của điểm đánh dấu.
Các list-style-image chỉ định hình ảnh cho điểm đánh dấu chứ không phải là dấu đầu dòng hoặc số.
Các list-style phục vụ như viết tắt cho các thuộc tính trước đó.
Các marker-offset chỉ định khoảng cách giữa điểm đánh dấu và văn bản trong danh sách.
Bây giờ, chúng ta sẽ xem cách sử dụng các thuộc tính này với các ví dụ.
Thuộc tính kiểu danh sách
Thuộc tính kiểu kiểu danh sách cho phép bạn kiểm soát hình dạng hoặc kiểu của dấu đầu dòng (còn được gọi là điểm đánh dấu) trong trường hợp danh sách không có thứ tự và kiểu đánh số ký tự trong danh sách có thứ tự.
Dưới đây là các giá trị có thể được sử dụng cho một danh sách không có thứ tự -
| Sr.No. | Giá trị & Mô tả |
|---|---|
| 1 | none NA |
| 2 | disc (default) Một vòng kết nối đã được điền đầy đủ thông tin |
| 3 | circle Một vòng tròn trống |
| 4 | square Một hình vuông được điền vào |
Dưới đây là các giá trị, có thể được sử dụng cho danh sách có thứ tự -
| Giá trị | Sự miêu tả | Thí dụ |
|---|---|---|
| thập phân | Con số | 1,2,3,4,5 |
| thập phân-đứng đầu-số 0 | 0 trước số | 01, 02, 03, 04, 05 |
| alpha thấp hơn | Ký tự chữ và số viết thường | a, b, c, d, e |
| chữ trên | Ký tự chữ và số viết hoa | A, B, C, D, E |
| chữ La Mã thấp hơn | Chữ số La mã viết thường | i, ii, iii, iv, v |
| thượng la mã | Chữ số La mã viết hoa | I, II, III, IV, V |
| người Hy Lạp thấp hơn | Điểm đánh dấu là chữ Hy Lạp thấp hơn | alpha, beta, gamma |
| chữ latin thấp hơn | Điểm đánh dấu là chữ latin thường | a, b, c, d, e |
| chữ latin trên | Điểm đánh dấu là chữ latin viết hoa | A, B, C, D, E |
| tiếng Do Thái | Điểm đánh dấu là cách đánh số tiếng Do Thái truyền thống | |
| người armenia | Điểm đánh dấu là cách đánh số Armenia truyền thống | |
| georgian | Điểm đánh dấu là cách đánh số truyền thống của Georgia | |
| cjk-Ideographic | Điểm đánh dấu là các số lý tưởng đơn giản | |
| hiragana | Điểm đánh dấu là hiragana | a, i, u, e, o, ka, ki |
| katakana | Điểm đánh dấu là katakana | A, I, U, E, O, KA, KI |
| hiragana-iroha | Điểm đánh dấu là hiragana-iroha | i, ro, ha, ni, ho, he, to |
| katakana-iroha | Điểm đánh dấu là katakana-iroha | I, RO, HA, NI, HO, HE, TO |
Đây là một ví dụ -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Thuộc tính list-style-position
Thuộc tính list-style-position cho biết liệu điểm đánh dấu sẽ xuất hiện bên trong hay bên ngoài hộp chứa các dấu đầu dòng. Nó có thể có một trong hai giá trị -
| Sr.No. | Giá trị & Mô tả |
|---|---|
| 1 | none NA |
| 2 | inside Nếu văn bản chuyển sang dòng thứ hai, văn bản sẽ nằm bên dưới điểm đánh dấu. Nó cũng sẽ xuất hiện thụt vào nơi văn bản sẽ bắt đầu nếu danh sách có giá trị bên ngoài. |
| 3 | outside Nếu văn bản chuyển sang dòng thứ hai, văn bản sẽ được căn chỉnh với đầu dòng đầu tiên (bên phải dấu đầu dòng). |
Đây là một ví dụ -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Thuộc tính list-style-image
Các list-style-image cho phép bạn chỉ định một hình ảnh để bạn có thể sử dụng phong cách đạn của riêng bạn. Cú pháp tương tự như thuộc tính background-image với url các chữ cái bắt đầu giá trị của thuộc tính, theo sau là URL trong dấu ngoặc. Nếu nó không tìm thấy hình ảnh đã cho thì dấu đầu dòng mặc định được sử dụng.
Đây là một ví dụ -
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Thuộc tính kiểu danh sách
Kiểu danh sách cho phép bạn chỉ định tất cả các thuộc tính danh sách vào một biểu thức duy nhất. Các thuộc tính này có thể xuất hiện theo bất kỳ thứ tự nào.
Đây là một ví dụ -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Thuộc tính bù đắp điểm đánh dấu
Các marker bù tài sản cho phép bạn chỉ định khoảng cách giữa các điểm đánh dấu và các văn bản liên quan đến điểm đánh dấu đó. Giá trị của nó phải là độ dài như trong ví dụ sau:
Thật không may, thuộc tính này không được hỗ trợ trong IE 6 hoặc Netscape 7.
Đây là một ví dụ -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Nó sẽ tạo ra kết quả sau: