css选择器-行高-背景属性-列表属性-内容溢出-css样式分类-样式的继承和覆盖(重点)-样式的优先级-标签的显示模式(重点)

通配选择器

语法：

将页面中所有标签都选中

使用场景：通常设置 *{padding:0;margin:0;}

伪类选择器

        元素：link 正常链接状态

        元素：visited 点击以后的状态

        元素:  hover 当鼠标移动上去的状态-------重点、常用

        元素:  active 当鼠标按下去时候的状态

总结：

        1.伪类是选择器，不是css的属性，不能写在{}中

        2.visited和link不能适用于普通标签，只有a标签才有（LV）

        3.hover和active        是任何标签都可以有的

伪对象选择器

语法：

元素:first-letter   选择第一个字符
元素:first-line       选择第一行

总结：

        1.这是选择器，不是css属性，不能写在{}中

        2.所谓的元素，可以是标签名，还可以是类名.class名:first-letter/line{}

兄弟选择器（相邻元素选择器）

语法：

哥哥+弟弟{}  /*通过哥哥选择到弟弟 */

第一个盒子
第一个段落
第二个段落
无用的标签
第三个段落

总结：

1.哥哥和弟弟中间用的符号：+

2.修饰的是弟弟标签

3.不能通过弟弟选哥哥

关系选择器（3个）：后代(空格)，子元素(大于号)，兄弟(加号)

属性选择器

语法：

[属性名]{}

[属性名=属性值]{}

[属性名~=属性值]（选择多个值中的一个）

[属性名~=属性值]{}

[属性名|=属性值]（选择连字符值中的第一个单词）

[属性名|=属性值]{}

[属性名*=属性值]（选择包含当前值的元素）

[属性名*=属性值]{}

重点：[属性名]  和  [属性名=属性值]

行高属性

语法：

line-height:数字px;

代表的一行的高度，放在段落中，可以理解为是行距

总结：

        1.文字在行高中是垂直居中的

        2.行高通常用于让文字在盒子中垂直居中

背景属性

背景颜色

background-color:颜色值

背景图片

background-image:url(图片路径)

设置背景图片是否平铺

background-repeat:值

取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺------默认

设置背景图片位置语法：

语法：

background:颜色 url(图片路径) 平铺类型 位置/大小

设置背景图片大小

语法：

background-size:宽度 高度

宽高取值可以是像素也可以是百分比

综合使用

语法：

background:颜色 url(图片路径) 平铺类型 位置/大小

属性中的每个值顺序可以调整，且background可以为单独其中之一设置

设置背景是否受滚动条的影响

语法：

background-attachment:值

取值：

（1）scroll会受滚动条的影响，当内容滚动到下方，图片会消失----默认

（2）fixed不会受滚动条影响，一直保持在视线范围内

背景可以设置为透明

语法：

background:rgba();  /* a代表透明度，取值为0-1 */

背景和图片标签都可以让页面中显示图片，那有什么区别？

img和背景图片的区别：

         img不需要专门写宽高就能够显示在页面上 而背景图片默认是撑不开容器的 需要专门写宽高；         一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图 而且背景图可以让内部的文字盖在上面，但是img不行（除非后期用定位）

背景颜色渐变

线性渐变

语法：

 background:linear-gradient(red,black); 
        /* 表示颜色从上往下，从红色到绿色转换，各占50%(默认) */

 background:linear-gradient(to right,red,black); 
        /* 表示颜色的渐变方向(也是九宫格) */

gradient(45deg,red,black); 
        /* 表示中间的水平线顺时针旋转10度开始渐变 */

background:linear-gradient(red 20%,black 50%,pink); 
		/* 表示颜色渐变所占的百分比 */

background:linear-gradient(to top right,red 20%,black 30%,pink); 
		/* 复合写法，表示颜色从左下角往右上角，从红色开始渐变到20%，再由黑色从20%渐变到30%，剩下的都是粉色 */

to bottom、to top、to left、to right、to top right、to top left、to bottom left、to bottom right【其实就是一个四边形的四条边与四个角】

径向渐变

语法：

background:radial-gradient(orange,black);
		/* 从中心点向四周扩散渐变 */
div如果是正方形，扩散的形状会是圆形

background:radial-gradient(orange 20%,black 30%,red 70%);
        /* 代表颜色扩散到哪个位置停止渐变 */
除了使用百分比还可以使用具体像素设置停止渐变的位置

background:radial-gradient(circle,orange 10%,black 50%);
		/* 指定渐变的形状 */
指定形状的时候可以是circle圆形，也可以是ellipse椭圆

background:radial-gradient(circle 100px,orange 10%,black 50%);
		/* 指定渐变的区域大小，因为是圆形，所以代表宽100px高也是100px */

background:radial-gradient(ellipse 200px 100px at right bottom,orange 10%,black 50%);
		/* 指定径向渐变的圆心 */

重复线性渐变

语法：

repeating-linear-gradient(方向,颜色 结束百分比,...);

重复径向渐变

语法：

repeating-radial-gradient(形状 方向,颜色 结束百分比,...;

未指定颜色值的结束位置时，颜色是平均分配的

列表属性

list-style-type  语法：

list-style-type:none

list-style-image 语法：

list-style-image:url(图片路径)

将列表前缀设置为自定义图片

应用场景：通常在网页中，使用的列表都是要去除前面的符号，并且去除左边和上边的空间，所以，样式如下：

ul{
    list-style:none;
    padding:0;
    margin:0;
}

内容溢出

语法：

overflow:值

取值：auto当内容溢出时，生成滚动条------默认，hidden内容溢出时超出部分隐藏

        auto----自动生成滚动条（右边）

        hidden----超出部分隐藏（重点）

        scroll----右边和下边都有滚动条

设置水平方向溢出可以使用overflow-x，纵向溢出使用overflow-y，取值和overflow一样

css样式的分类

1.内部样式----内联样式

2.行内样式

    我是盒子

多学一招：通常是后台程序员进行修改页面的时候使用

3.外部样式

新建一个css文件，然后和html页面关联起来

a) 使用标签关联

b) 使用指令关联

多学一招：做项目最常用的是外部样式，link标签

样式的继承和覆盖（重点）

当父标签设置了样式，子标签都会具有父标签的样式

总结：

        1.能继承的css属性：font系列，text系列，color，line-height

        2.div可以继承父亲的宽度，高度不能继承

当子标签和父标签设置了同样属性的css，子标签会覆盖父标签的设置

总结：

        继承：父元素设置了样式，子元素也具有了

        覆盖：父元素和子元素有同样的样式，生效的是子元素，子元素覆盖了父元素的样式