CSS学习总结（5）——列表/表格/链接/鼠标光标样式

列表样式

list-style-type属性

• 无序列表
  - 列表项目用项目符号标记
  • 有序列表
    - 列表项目用数字或字母标记

  使用CSS，列表可以进一步风格化，图像可以用作列表项标记。使用list-style-type属性，可以设置为none，circle，square，decimal，disc，lower-alpha等。 list-style-type属性的none值可以将列表的标记设置为不显示，在使用ul/ol进行一些网页布局（例如菜单）的时候较常使用到。

  ul.fang{
      list-style-type: square;
   }
  

  

  列表的图标和位置

  • list-style-image ： 指定要用作列表项标记的图像。
  • list-style-position ： 指定标记框的位置（属性值包括：inside, outside）。"list-style-position: outside"是默认值。

   ul {
      list-style-image: url("u=2830705192,2886686135&fm=26&gp=0.jpg");
      list-style-position: inside;
   }
  

  

  表格样式

  border-collapse属性

  border-collapse属性指定表格边框是否折叠为单个边框或默认分开。 如果边框是分开的，则可以使用border-spacing属性来更改间距。

  
        
  
            
  数学
            
  语文
        
        
  
             
  英语
             
  物理
        
  
  

  table {
      border-collapse: separate;
      border-spacing: 10px 10px;
   }
  

  

  caption-side属性

  caption-side属性指定表标题的位置。 值可以设置为 top 或 bottom。

   caption {
      caption-side: top;
   }
  

  

  empty-cells属性

  empty-cells属性指定是否在表格中的空单元格上显示边框和背景。参数值可以是：

  • show：呈现空单元格的边框
  • hide ：隐藏空单元格的边框

   table {
      border-collapse: separate;
      empty-cells: hide;
   }
  

  

  table-layout属性

  table-layout指定如何计算表格列的宽度。 参数值可以是：

  • auto ：当列或单元格宽度未明确设置时，列宽将与组成列的单元格中的内容量成比例。
  • fixed ：当列或单元格宽度未明确设置时，列宽将不受组成列的单元格中的内容数量的影响。
  • 表格布局默认设置为auto。

  链接样式

  链接的样式可以不同，具体取决于所处的状态。以下伪选择器可用：

  • a:link - 定义正常的未访问链接的样式
  • a:visited - 定义访问链接的样式
  • a:active - 一旦点击链接，链接就会激活
  • a:hover - 当鼠标悬停时，链接悬停

  当为链接设置样式时，必须遵循以下规则：

  • a:hover 必须在a:link和a:visited之后
  • a:active 必须在a:hover之后

  a:hover {
      color: red;
   }
  

  text-decoration属性用于删除下划线。

  a:link {
     text-decoration: none;
  }
  

  
  以下属性用于控制链接的样式：

  • border:none - 从包含链接的图像中删除边框
  • outline:none - 删除IE中点击链接行上的虚线边框

  鼠标光标样式

  cursor属性

  CSS允许将鼠标悬停在元素上时设置所需的光标样式。

  
     帮助光标s
  
  

  cursor属性还有许多其他的值，例如：