1.背景

  1. 背景颜色:background-color
  2. 背景图片:backgorund-image
  3. 背景重复:background-repeat
  4. 背景位置:background-position: x y 
  5. //第一个参数表示离x轴的距离,y表示离y轴的距离
  6. //简写
  7. background: color image repeat  position
  8. 背景吸附:background-attachment:fixed | scroll
  9. background-size
  10. //指定背景图片大小。
  11. background-size: x y;
  12. //x表示宽度，y表示高度
  13. background-size:cover;
  14. 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
  15. 相当于background-size:100% 100%;

2.文本

  1. text-align文本对齐方式
  2. text-align: right|left|center
  3. text-decoration文本修饰
  4. text-decoration: underline|overline|line-through
  5. text-indent文本缩进
  6. text-transform文本转换(了解)
  7. text-transform:uppercase|lowercase|capitalize

3.字体

  1. color:设置字体的颜色
  2. 颜色是通过CSS最经常的指定：
  3. 十六进制值 - 如: ＃FF0000
  4. 一个RGB值 - 如: RGB(255,0,0)
  5. 颜色的名称 - 如: red
  6. body {color:red;}
  7. h1 {color:#00ff00;}
  8. h2 {color:rgb(255,0,0);}
  1. //font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
  2. p{font-family:Helvetica,Microsoft YaHei}

推荐使用简书的

  1. font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
  1. font-size
  2. font-style:normal | italic
  3. font-weight:normal | bold | lighter
  4. 行高
  5. line-height

4.链接

  1. a:link - 正常，未访问过的链接
  2. a:visited - 用户已访问过的链接
  3. a:hover - 当用户鼠标放在链接上时
  4. a:active - 链接被点击的那一刻
  5. //*若单独设置几个链接，必须遵守如下规则：
  6. a:hover 必须跟在 a:link 和 a:visited后面
  7. a:active 必须跟在 a:hover后面

5.列表(针对ul)

  1. list-style:none;
  2. list-style-type:circle|square
  3. list-style-image:url("xxx")

6.边框

  1. border-width  边框的宽度
  2. border-style   边框的样式
  3. border-color 边框的颜色
  4. //可以简写成
  5. border： width style color
  6. p{border:1px solid #333}
  1. //边框-单独设置各边
  2. p
  3. {
  4.     border-top:1px solid #ccc;
  5.  }

7.表格

  1. border-collapse 
  2. //设置表格的边框被折叠成一个单一的边框
  3. table{border-collapse:collapse}
  1. //可以在td,th设置这个两个属性
  2. colspan:value    //跨越的列
  3. rowspan:value   //跨越的行

8.轮廓（了解）

  1. //轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
  2. p{outline:1px solid pink}

9.透明

opacity

  1. visibility:hidden|visible和display:none的区别