前端之CSS介绍（层叠样式表）

Cascading Style Sheets（CSS）

1.CSS就是在HTML文档中，如何显示HTML标签，元素，以及他们的样式布局，前端页面的展示形式均由CSS来布局.

2.如何使用CSS

1. 内部样式表
   1. head标签里<style></style>
   2. 内联样式，在HTML标签里面直接写style
2. 外部样式表
   1. 内容
   2. 表现---可以直接引入写好的CSS样式文件（.css）,提高效率
   3. 存储--存储在CSS文件中
3. 基本语法
   1. 通过xxx{属性：值}，等同于xxx{key:value}
4. 选择器
   1. 基本选择器
      1. 元素选择器（名称选择器）---标签的名称:h1{key:value}
      2. 属性选择器---id=“属性名称”，一般由#号后面跟属性名称，
      3. 类选择器---class选择器，class关键字，用来描述一类样式的元素---.类名{key:value}
   2. 高级选择器
      1. 分组选择器（组合选择器）---小组1,小组2,小组3...
      2. 通用选择器---*{margin:0;padding:0}
      3. 后代选择器---选择器1 选择器2 选择器3...比如：h1 p{}
      4. 兄弟选择器
      5. 子元素选择器---比如:ul>li{}
      6. 伪类选择器---a:hover{},a:active{}.a:visited{}
5. CSS注释---/**/
6. 常见的属性
   1. 宽高
      1. width
      2. hegiht
   2. 颜色
      1. color--值
         1. 颜色名称：red
         2. 颜色进制：#000000
         3. 颜色标识：rgb/rgba
   3. 背景
      1. background-color
      2. background-image
      3. background-repeat
      4. background-postion
   4. 字体
      1. font-size---修改字体大小
      2. font-family---使用哪种字体
      3. font-style:normal
      4. font-weghit:normal bold
   5. 文本
      1. text-align：center,left,right
   6. 链接
      1. a标签：link,active,hover,visited
   7. 列表
      1. 有序列表
         1. list-style:图片，原点，小三角，矩形，星号...
      2. 无序列表
   8. 表格
      1. table---表格
         1. tr
         2. th
            1. background-color
         3. td
            1. text-align
            2. vertical-align
      2. table-collapse
   9. 轮廓
      1. outline
         1. outline-color
         2. outline-style
7. 盒子模型
   1. 盒模型
   2. 边框
   3. 外边框
   4. 内边框
8. 定位和浮动
   1. float：涉及元素的排列方式---left,right
   2. position
      1. fixed(固定)
      2. absolute(绝对定位)
      3. relative(相对定位)
9. DIV标签布局