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: