001、CSS基础

```mindmap
# 基础
- 文本
  - 文本颜色
    - 十六进制值 - 如: ＃FF0000 —— h1 {color:#00ff00;}
    - RGB值 - 如: RGB(255,0,0)——h2 {color:rgb(255,0,0);}
    - 颜色的名称 - 如: red——body {color:red;}
  - 对齐方式
    - text-align：center  right   justify
    - justify：每一行被展开为宽度相等，左，右外边距是对齐
  - 文本修饰
    - text-decoration：设置或删除文本的装饰；主要是用来删除链接的下划线
    - text-decoration:none; ——取值：overline(上划线)；line-through(中划线)；underline(下划线)；none(无)；
  - 文本转换
    - text-transform:uppercase;
    - uppercase 全大写；lowercase 全小写；capitalize  首字母大写
  - 文本缩进：text-indent:50px;
- 字体
  - 字体系列
    - font-family:"Times New Roman"
  - 字体样式
    - font-style:normal;
    - normal  正常；italic   斜体；oblique 倾斜的文字
  - 字体大小
    - 默认像素：16像素（16px=1em）
    - 用公式将像素转换为em：px/16=em：40px/16=2.5em；14px/16=0.875em
- 链接
  - 四个链接状态
    - a:link - 正常，未访问过的链接——a:link {color:#000000;}      /* 未访问链接*/
    - a:visited - 用户已访问过的链接——a:visited {color:#00FF00;}  /* 已访问链接 */
    - a:hover - 当用户鼠标放在链接上时——a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
    - a:active - 链接被点击的那一刻——a:active {color:#0000FF;}  /* 鼠标点击时 */
  - 文本修饰：text-decoration
  - 背景颜色：background-color
- 列表 
  - 列表项标记：list-style-type: circle;
    - 无序列表：circle（小圆）；square（方块）
    - 有序列表：upper-roman（大写数字）；lower-alpha（小写字母）
  - 列表项标记的图像：list-style-image: url('sqpurple.gif')；简写   list-style: square url("sqpurple.gif");
- 表格
  - 表格边框：table, th, td {     border: 1px solid black; }
  - 折叠边框：table {    border-collapse:collapse; }
  - 宽度和高度：table  {    width:100%; }   th   {     height:50px;  }
  - 文字对齐：td  {     text-align:right（水平）;  vertical-align:bottom（垂直）; }
  - 表格填充：td  {    padding:15px;  }
  - 表格颜色：th  {    background-color:green;      color:white;  }
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
```