CSS的初识

                                        选择器

 后代选择器

形式：.

  .box li{

            color:red;

        }

子级选择器

形式：

.box>ul>li

background:blue

}

兄弟选择器

形式：

   .box2+.box3{

            width: 200px;

        }

nth-child选择器

指定标签选择器

    ul li:nth-child(3) span{

        color:tomato;

      }

说明：制定找到的相关标签

指定第一个标签的选择器

ul li:first-child{

            width: 10px;

            height: 10px;

            background: red;

        }

指定最后一个的选择器

        ul li:last-child{

            width: 10px;

            height: 10px;

            background: green;

        }

                              focus获取焦点

     .text:focus{

            outline:0px;

           border:5px solid orange;

        }

点击输入框，让输入框的颜色变成橘色

                               透明度的使用

 透明度的使用有两种方法

第一种方法：只让颜色透明，内容不变

格式： background: rgba(0, 0, 0, .4)

最后的数字式透明度，取值在0~1之间

第二种方法：颜色与内容同时透明

格式：opacity: 0.3;

取值在0~1之间

                            边框弧度

边框属性
border-radius: 20px;	同时设置4个角的弧度
border-top-left-radius:100px;	设置左上脚的弧度
border-top-right-radius: 150px;	设置右上角的弧度
border-bottom-left-radius: 120px;	设置左下角的弧度
border-bottom-right-radius: 20px;	设置右上角的弧度

                                float浮动

属性	说明
float:left;	在左边浮动
float:right;	在右边浮动
float:both;	左右都浮动
clear:both;	清除浮动

注意点：设置浮动，会造成塌陷，所以要用clear清除浮动

                                背景图片的属性

属性名	说明
background-image：url（图片路径）	背景图片
background-repeat：repeat	图片平铺（默认平铺）
background-repeat：no-repeat	背景图片不平铺
background-repeat：repeat-x	背景图片水平方向平铺
background-repeat：repeat-y	背景图片垂直方向平铺
background-position-x：left	背景图片在左边
background-position-x：right	背景图片在右边
background-position-x：center	背景图片在中间
background-position-y：top	背景图片在上边
background-position-y：bottom	背景图片在下边
background-position-y：center	背景图片在中间
background-position：right bottom	背景图片在右上方 （这是简写方式，第一个值表示水平方向的位置，第二个值表示垂直方向的位置）
background-size：10px 10px	背景图片的大小 （第一个值表示宽度，第二个值表示高度）
background：颜色 url（地址路径） 是否平铺 水平方向位置 垂直方向位置 background-size：10px 10px	以上属性的简写形式背景图片的大小要放在background之下