CSS样式（链接、列表、表格、轮廓）学习笔记

仅仅是自己对着W3CSchool整理的一些 CSS 基础知识点，敲一遍加深下印象也方便以后复习。

• • CSS链接
    • 设置链接的样式
      • 链接样式可用属性：color.font-family,background等
      • 链接可以根据其状态来设置样式
    • 链接的状态
      • a:link-普通的、未被访问的链接
      • a:visited-用户已访问的链接
      • a:hover-鼠标指针位于链接的上方
      • a:active-链接被点击的时刻
    • 例如：
      • a:link{color: #FF0000;}
      • a:visited{color:#00FF00;}
      • a:hover{color:#FF00FF;}
      • a:active{color:#0000FF;}
    • 设置不同状态样式的次序
      • a:hover必须位于a:link之后和a:visited之后
      • a:actived必须位于a:hover之后
    • 常见的链接样式
      • 文本修饰（使用text-decoration属性控制下划线）
        • 例如：alink{text-decoration:none}
      • 背景色
        • 例如：a:link{background: #B2FF99;}
  • CSS列表

  CSS列表属性允许放置、改变、列表项标志，或者使用图像作为列表项标志

  从某种意义上来讲，不是描述性的文本的任何内容都可以认为是列表

  • 列表类型
    • 无序列表：通常标志为圆点
    • 有序列表：通常标志为数字、字母
    • 使用属性list-style-type改变列表的标志
      • 例如:ul{list-type-type:square;}
  • 列表项的图像
    • 对各标志使用图像，利用list-style-image属性
    • 例如：ul li{list-style-image:url(a.jpg)
  • 列表标志位置
    • CSS2.1可以确定标志出现在列表项内容之外还是内容内部
    • 利用list-style-position完成
  • 简写列表样式
    • 例如：li{list-style: url(a.jpg) square inside}
  • CSS表格
    • 表格边框
      • 使用border属性设置
      • 例如:table,th,td{border:1px solid blue;}
      • 该例中表格具有双线条边框，由于table,th,td元素都有独立的边框
    • 折叠边框
      • 使用border-collapse属性设置，将表格边框折叠为单一边框
      • 例如：table{border-collapse:collapse;}

    table,th,td{border:1px solid black;}

  • 表格宽度和高度
    • 使用width和height属性
    • 例如:table{width:100%;}

  Th{height:50px'}

  • 表格文本对齐
    • 使用Text-align设置水平对齐
      • 例如:td{text-align:right;}
    • 使用vertical-align设置垂直对齐
      • 例如td{height:50px;vertical-align:bottom;}
  • 表格内边距
    • 使用padding属性设置
    • 例如：td{padding:15px;}
  • 表格颜色
    • 边框颜色
      • 例如：table,td,th{border:1px solid green;}
    • 格子颜色
      • 例如：th{background-color:green;color:white;}
  • CSS轮廓
    • 只有在规定了！DOCTYPE时，IE8以上版本才支持该属性
    • 在元素周围画线
      • 例如：p{outline:#00ff00 dotted thick;}
    • 设置轮廓颜色
      • 例如：p{outline-color:#00ff00;}
    • 设置轮廓样式
      • 例如：p{outlint-style:dotted;}
      • 样式包括dotted,dashed,solid,double,groove,ridge,inset,outset
    • 设置轮廓宽度
      • 例如:p{outlint-width:thin;}