CSS学习--列表

列表

预设值

1. 和
   元素设置margin的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）。
   2. 默认是没有设置间距的。

   3. 元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定。

   4. 元素设置为： margin-left 40px (2.5em)。

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

   列表计数标记样式

   /* 常用 */
   list-style-type: none | disc | circle | square | decimal;
   list-style-type: ( @counter-style) | ;
   list-style-type: decimal-leading-zero(01) | lower-roman(i) | upper-roman(I);
   list-style-type: lower-greek(α) | lower-alpha(a) | upper-alpha(A) ;
   list-style-type: armenian | georgian;
   

   @counter-style

   自定义counter的样式

   @counter-style  {
       /* 指定一个算法，用于将计数器的整数值转化为字符串表示 */
       system: 
       /* 标记的表示 */
       symbols: 
       /* 包含一个可数的符号和一个非负证书的权重 */
       additive-symbols: 
       /* 指定一个符号，替代负号 */
       negative: 
       /* 指定一个符号，加在标记表示符的前面 */
       prefix: 
       /* 指定一个符号，加在标记表示符的后面 */
       suffix: 
       /* counter-style生效的范围 */
       range: 
       /* 给标记表示符最小值时使用 */
       pad: 
       /* 如何在语音识别器中读出计数器样式 */
       speak-as: 
       /* 备用的系统 */
       fallback: 
   }
   @counter-style circled-alpha {
   	system: fixed;
   	symbols: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?;
   	suffix: " ";
   }
   

   列表计数标记位置

   和
   列表盒子内 | 外

   list-style-position: inside | outside;
   

   列表计数标记图片

   list-style-image: url('./../1.jpg');
   

   ol 属性

   start

   start 属性允许你从1 以外的数字开始计数。

   
   	
   Toast pitta, leave to cool, then slice down the edge.
   	
   Wash and chop the salad.
   
   

   reversed

   reversed 属性将启动列表倒计数。

   
   	
   Toast pitta, leave to cool, then slice down the edge.
   	
   Wash and chop the salad.
   
   

   value

   value 属性允许设置列表项指定数值。

   
   	
   Toast pitta, leave to cool, then slice down the edge.
   	
   Wash and chop the salad.