2019-04-04

    1.选择器
      1) 元素 p  div
      2) 类选择器
         html
           <p class="box"></p>
         css
           .box{样式}
      3) id选择器
          html
           <p id="box"></p>
         css
           #box{样式}
      4)后代
          ul li
      5)子代
          ul>li
      6)相邻兄弟
          .list+li
      7)通用兄弟
          .list~li
      8)结构伪类
         ul
           li
           li
           li
           li
         ul>li:first-child  选取父元素下的第一个孩子
         ul>li:last-child   选取父元素下的最后一个孩子
         ul>li:nth-child(n) 选取父元素下的第n个孩子

    2.css
        1)字体相关样式：
            font-family:"黑体"; 设置字体类型
            font-size:16px; 设置字体大小
            font-weight:bold/100/200/300/400/500/600/700/800/900;
            font-style:italic(倾斜)  normal(正常);

       2)display:改变元素的类型
            行内元素   
                 转换成行内块： display:inline-block;
                 转换成块元素： display:block;
            块元素
                 转换成行内元素：display:inline;
                 转换成行内块：  display:inline-block;
            行内块元素
                 转换成行内元素 display:inline;
                 转换成块元素   display:block;

     3)文本相关样式
           color:"red";设置文本的颜色
           text-align:center(居中) left(左) right(右)   文本对齐方式
           text-indent:12px;  首行缩进
           line-height:30px;  设置行高
           text-decoration:none(默认值) undeline(下划线) 

    
    4)边框与尺寸
        css单位：
             px  像素   屏幕上的一个点
             %   相对单位 根据父元素的大小来变化
             in  英寸    1 in=2.54cm
             cm  厘米     
             mm  毫米
             em/rem  
        
                  
       颜色单位：
            red blue     #F0F0F0
            红  （0-255）
            绿   （0-255）
            蓝  （0-255）

          rgb   
          r:red
          g:green
          b:blue

          rgb(0,0,0)  黑色
          rgb(255,255,255); 白色

          rgb(255,0,0);  红色
          rgb(0,255,0)  绿色
          rgb(0,0,255)  蓝色

          rgba()
             a:alpha 透明度
                范围：0-1
                 0:完全透明
                 1：完全不透明
    
         opacity:.5;透明度

         opacity与rgba()的区别：
            opacity:能把所包含的所有内容都变成透明
            rgba()只改变当前元素的透明度
    
    5)边框
        border:1px solid #000;
        border-top:上边框
        border-bottom: 下边框
        border-left:左边框
        border-right:右边框

        border-width:2px;  边框的宽度
        border-style:solid(实线)   dotted(虚线)
        border-color:red;  边框的颜色
        特殊：transparent（透明边框）