一、CSS概述

• 是层叠样式表，作用是将内容和样式分离开，更方便修改样式而不会影响内容；
• 基本语法如下：（最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号）

二、CSS样式添加

• 方法一：行内  例：<p style=" color.red;">
• 方法二：内嵌样式  例：<style type="text/css"></style>
• 方法三：单独文件  例：<link rel="stylesheet" href="css/style.css"/>
• 优先级：行内样式>内嵌样式>链接样式>浏览器默认样式

三，CSS选择器

• 标签选择器   例：body{ }   h1{ }
• 类别选择器   例：.one{ }      ( class="one" )
• ID选择器       例：#one{ }   ( id="one")
• 嵌套说明  例： p span{ } ( <p><span>你</span>是对的</p>)  注：空格
• 集体声明  例：h1,p{ }
• 全局声明  例：*{ }
• 混合：1.多个class选择器混用，用空格分开 例：<div class=" one yellow left">...</div>  2.id 和class混用<div  id="my" class="one yellow left">   注意：id选择器只可以引用一次；

四.CSS样式

• 单位

1. px 像素    
2. 1em—— 一个字符    2em ——两个字符 自动适应用户所使用的字体，比如：当前所使用的字体自号为12像素大小，那2em就是12*2=24px
3. %  百分比  是相对的，看 继承关系

• 颜色

1. red,blue,green
2. rgb(x,x,,x)  0-255
3. rgb(x%,x%,x%)  0%-100%
4. rgba(x,x,x,x)   a表示透明度，
5. #rrggbb  十六进制数

• 文本

1. color  文本颜色  red #f00
2. letter-spacing  字符间距  2px  -3px 
3. line-height   行高  14px  1.5em  120%  使用场景：垂直方向上垂直居中
4. text-align  对齐  center   left  right  justify(两端对齐)
5. text-decoration  装饰线   none  overline（上）  underline（下）  line-through（作为删除线贯穿文本之中）
6. text-indent  首行缩进   2em

• 字体

1. font  在一个声明中设置所有的字体属性  font：bold  18px  '幼圆'
2. font-family 字体系列 
3. font-size    字号   14px  120%
4. font -style   斜体  italic
5. font-weight  粗体  bold

• 背景属性

1. background-color  背景颜色
2. background-image  背景图片
3. background-repeat   背景分量(棋盘格式填充 repect ,横向填充一行用repeat-x ,纵向填充一列用repect_y,只想让一副很大的图片作为背景图片出现只显示一次 就用no-repeat）
4. background:颜色  图片  repeat

• 超链接（伪类选择器）

1. a:link    普通的，未被访问的链接
2. a:visited  用户已访问的链6
3. a:hover  鼠标指针位于链接的上方悬停
4. a:active  链接被点击的时刻
5. a:hover必须位于a:link和a:visited之后；a:active 必须位于a:hover之后   记忆技巧：LOve&HAte

   6.练习：使鼠标停在上面的时候字体变成1.2倍？

• 列表

1. list-style   所有用于列表的属性，设置于一个声明
2. list-style-image 为列表项标志设置图像 ； list-style-image：url("images/bullet.gif");
3. list-style-position  标志的位置

  4.list-style-type  标志的类型

• CSS表格

1. 表格大小：属性  width height   
2. 表格边框：属性 border     例：table,td,th{border:1px solid #eee; }
3. 表格border-collapse属性  (border-collapse:collapse;叠加或者坍缩)
4. 奇偶选择器   ：nth-child(odd|even)

要求：切换按钮后改变css的样式

实现思路：循环数组，然后添加点击事件，获取到当前点击的index 根据数组的下标去动态的改变样式。

<div class="cross-content">
          <div class="cross-state">
              <h3>状态筛选</h3>
              <span @click="checknow(index,'status')"  v-for="(item,index) in crossList" :key="index" :class="activeIndex === index ?'chose_type':'normal_type'" >{{item.name}}</span>
          </div>
          <div class="cross-state">
            <h3>分类筛选</h3>
            <span @click="checknow(index,'type')"  v-for="(item,index) in crossList" :key="index"  :class="activeIndexs === index ?'chose_type':'normal_type'">{{item.name}}</span>
          </div>
        </div>

 data中需要定义的数据信息

 activeIndex:0,//状态筛选的图片
 activeIndexs:0,//分类筛选的图片

事件中方法的处理

  //todo 查看当前选中的时那个状态的value值
    checknow(index,info){
      // 2组不同的值循环尽量用同一个方法时要有区分因为你循环的是2次数组，不是嵌数组
      if(info === 'status'){
         this.activeIndex = index
      }
       if(info === 'type'){
         this.activeIndexs = index
      }
    },

css样式

.cross-state{
  padding: 1rem;
  font-size: .8rem;
  .sure{
    color: #ffffff;
  }
  h3{
    color: #333333;
    font-weight: 600;
  }
 .chose_type {
  width: 5.2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  background: #42E5BA;
  border-radius: .2rem;
  color: white;
  display: inline-block;
  margin-top: 0.4rem;
  margin-left: .12rem;
}
.normal_type {
  width: 5.2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  background: #F5F5F5;
  border-radius: .2rem;
  display: inline-block;
  margin-top: 0.4rem;
  color: #666666;
  font-size: .7rem;
  margin-left: .12rem;
}
}

 实现结果：