在拉钩学习的笔记（一）CSS的核心样式

1、新增选择器  子级选择器
    子级选择器用于选取带有特定父元素的元素
    书写语法：element1>element2（父级>子级）
2、新增选择器  兄弟选择器
    相邻兄弟选择器：可以用于选择紧跟在另一个元素后面的兄弟元素，而且二者有相同的父元素
        element1 + element2  匹配同一个父元素中紧跟在element1后面的一个element2元素
    其他兄弟选择器：匹配同一个父元素中在element1后面的所有element2元素
    element1 ~ element2  匹配同一个父元素中在element1后面的所有element2元素
3、结构伪类选择器
    E:first-child  匹配父元素中的第一个子元素
    E:last-child   匹配父元素中的最后一个子元素
    E:nth-child(n) 匹配父元素中的第n个子元素
    E:first-of-type指定类型的第一个
    E:last-of-type 指定类型的最后一个
    E:nth-of-type(n)指定类型的第n个
    注意：nth-child(n)，n可以是数字，关键字和公式；常见的关键字even偶数，odd奇数；常见的公式：2n 偶数；2n+1  奇数；5n  5,6,7,8,9...；-n+5  5,4,3,2,1,0……
        第0个元素或者超出了元素的个数会忽略
5、伪元素选择器
    新增伪元素：
        E::before       在E元素内部的前面插入一个元素
        E::after        在E元素内部的后面插入一个元素
        E::first-letter 选中了E容器内的第一个字母
        E::first-line   选中了E容器内的第一行文本
    伪元素只能给双标签添加，不能给单标签添加；伪元素的冒号前不能添加空格；伪元素里面必须写上属性content:"";
6、属性选择器
    用来选择包含指定属性的标签
    E[att]  选择具有att属性的E元素
    E[att="val"]  选择具有att属性且属性值等于val的E元素
    E[att^="val"] 匹配具有att属性、且值以val开头的E元素
    E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
    E[att*="val"] 匹配具有att属性、且值中包含val的E元素
    PS；选择器权重
        基础选择器：id选择器>类选择器>标签选择器>*
        伪类选择器、属性选择器的权重等于类选择器
        伪元素选择器的权重等于标签选择器
7、css3盒模型
    CSS3中可以通过box-sizing来指定盒模型
    属性值：content-box 默认值，标准盒子模型，盒模型是向外扩的，width和height只包括内容的宽和高，在width和height之外绘制元素的内边距和边框
        border-box  怪异模式，盒模型是内减的，width和height属性包括内容，内边距和边框，不包括外边框，为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制
8、CSS3的常用属性 border-radius 边框圆角
    作用：设置边框的圆角
    属性值：像素值，百分比，百分比参考的是盒子的整体宽度、高度的百分比
        x-radius/y-radius：/分隔两部分属性值，前面为水平半径，后面为垂直半径，得到的是椭圆形
        radius：一个属性值，则水平和垂直都设置为同一个值，得到的是圆角
        border-top-left-radius:半径；。
        /的属性值写法：border-radius属性值中出现了/斜线，那么/前面可以设置水平方向的四种写法，/后面可以设置垂直方向的四种值的写法
9、CSS3的常用属性  text-shadow  文本阴影
    属性值： h-shadow：必须，水平阴影的距离，允许负值
        v-shadow：必须，垂直阴影的距离，允许负值
        blur：可选，模糊的距离
        color：可选，阴影的颜色
    text-shadow:3px 3px 5px #f00;
    多层阴影：逗号分隔多个阴影的属性值，多阴影中，先写的阴影压盖在后写的阴影上。
    text-shadow:3px 3px #f00, 6px 6px #0f0, 9px 9px #00f;
10、盒子边框阴影  box-shadow  
    属性值： h-shadow：必须，水平阴影的距离，允许负值
        v-shadow：必须，垂直阴影的距离，允许负值
        blur：可选，模糊的距离
        spread：可选，阴影的尺寸
        color：可选，阴影的颜色
        inset：可选，只外部阴影改为内部阴影
    box-shadow:水平位置  垂直位置  模糊程度  扩展大小  颜色  是否内边框阴影;
11、过渡属性  transition
    作用：在不使用flash或者JavaScript的情况下，使用transition可以实现补间动画（过渡动画），并且当元素只要有“属性”发生变化时即出现两种状态（我们用A和B代指），那么A和B之间就可以实现平滑过度的动画效果
    语法格式：transition：过渡的属性　　过渡的时间　　运动曲线　　延时时间；
    单一属性：
            transition-property：规定应用过渡的CSS属性的名称。none表示没有属性过渡，all表示所有变化的属性都过渡；属性名  使用具体的属性名，多个属性名中间逗号分隔
            transition-duration：定义过渡花费的时间，默认是0。以s秒为单位
            transtion-timing-function：定义过渡效果的时间曲线，默认是ease。liner规定以相同的速度开始至结束