2019-04-04 小总结与文本样式

小总结

        1.选择器
          1) 元素 p  div
          2) 类选择器
             html
               

             css
               .box{样式}
          3) id选择器
              html
               

             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;

文本样式

        color:green;/*文本颜色*/
        text-align:center;/*文本居中*/
        /* text-align:left; *//*文本居左，默认*/
        /* text-align:right; *//*文本居右*/
         text-indent:40px; /*首行缩进*/
        border:1px solid #000;
        line-height:100px;/*行高*/
        /* text-decoration:none; *//*文本装饰，none默认值没有装饰*/
        text-decoration:underline;/*文本装饰为下划线*/

边框与尺寸

     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(0,0,0,.2); 
      opacity：.5；
      取值范围：0~1
              两者的区别：
                        opacity是元素下所有元素都透明化
                         rgba：只透明背景颜色

边框

        border:1px solid red;      全边框
        border-（top，bottom，left，right）：1px solid red;边框可以加上下左右。
      border-width:2px;  边框的宽度
  border-style:solid(实线)   dotted(虚线)
       border-color:red;  边框的颜色
  特殊：transparent（透明边框）