web前端学习-css3进阶

目录

css-复合选择器-后代选择器：

css-复合选择器-子代选择器：

 css-并集选择器：

 css-交集选择器：

CSS-选择器-伪类：

 css-背景-背景色：

css-背景-背景图：

  css-img标签和背景图的区别：

css-显示模式-块：

 css-显示模式-行内：

css-显示模式的转换

css特性-继承性：

css特性-层叠性：

 拓展标签嵌套的注意规范：

---

学完了前面的css3的基础部分 现在开始进阶学习 加油！

css-复合选择器-后代选择器：

作用：根据HTML标签的嵌套关系，选择父亲元素后代中满足条件的元素

选择器语法:选择器1 选择器2{css}

结果：选择器1所找到标签的后代（儿子，孙子，重孙子...）中，找到能满足选择器2的标签，设置样式

注意点：

1.后代包括：儿子， 孙子， 重孙子...

2.后代选择器中，选择器与选择器之间通过空格隔开

css-复合选择器-子代选择器：

作用：根据HTML标签的嵌套关系，选择父亲元素子代中满足条件的元素

选择器语法:选择器1>选择器2{css}

结果：选择器1所找到标签的后代（儿子）中，找到能满足选择器2的标签，设置样式

注意点：

1.后代包括：儿子

2.后代选择器中，选择器与选择器之间通过>隔开

 css-并集选择器：

作用:同时选择多组标签，设置相同的样式

选择器语法:选择器1，选择器2{css}

结果：

找到选择器1和选择器2选中的标签，设置样式

注意点：

1.并集选择器中的每一个选择器直接按通过，分割

2.并集选择器中的每组选择器可以说是基础选择器或者复核选择器

3.并集选择器中的每组选择器通常一行写一个提高代码质量

 css-交集选择器：

作用:选中页面中，同时满足多个选择器的标签

选择器语法:选择器1选择器2{css}

结果：

找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点：

1.并集选择器中的每一个选择器是紧挨着的，没有东西分割

2.交集选择器中如果有标签选择器，标签学选择器必须在最前面

CSS-选择器-伪类：

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器：hover{css}

注意点：伪类选择器选中的元素的某种状态

 css-背景-背景色：

属性名字：background-color

属性值：颜色取值:关键字,rgb表示法，rgba表示法，16进制表示法

注意点:

        背景颜色默认值是透明的:rgba(0,0,0,0)、transpant

        颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一班在布局中会习惯先给盒子设置背景颜色

css-背景-背景图：

属性名字：background-imge

属性值：url（'图片的路径'）

注意点:

        背景图片中url中可以省略引号

        背景图片默认是在水平和垂直方向平铺的

        背景图片仅仅是指给盒子起到装饰作用，类似于背景颜色，是不能撑开盒子的

 背景相关属性的连写：

属性名：background

属性值：

        单个属性值的合写，取值之间可以空格隔开

书写顺序：

        推荐：background：color image repeat position

省略问题:

         可以按照需求省略

         在pc端，如果盒子大小和背景图大小一样，此时可以直接写background：url（）

注意点：

         如果需要设置单独的样式和连写

         ①要么把单独设置的样式写在连写的下面

         ②要么把单独设置的样式写在连写的里面

  css-img标签和背景图的区别：

1.img标签是一个标签，不能设置宽高会以原尺寸显示

2.背景图只是装饰css的样式 依赖于标签去展示

css-显示模式-块：

显示特点：

1.独占一行

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

代表标签：

div、p、h系列、ul、li、dl、dt、dd、from、header、nav、footer......

 css-显示模式-行内：

显示特点：

1.一行可以显示多个

2.宽度默认由内容撑开

3.不可以设置宽高

代表标签：

        a、span、b、u、i、strong、ins、em、del......

 css-显示模式-行内块：

显示特点：

1.一行可以显示多个

2.可以设置宽高

代表标签：

        input、textarea、button、select.....

        特殊情况：img标签有所有行内块元素的特点，但是chrome调试工具显示结果是inline

css-显示模式的转换

目的：改变元素的默认的显示特点，让元素复合布局要求

语法：

css特性-继承性：

特性:子元素有莫仍继承父元素样式的特点

可以继承常见的属性（文字控制属性都可以继承）

1.color

2.font-size、font-weight、font-size、font-family

3.text-indent、text-align

4.line-height

......

注意点：

可以通过调试工具判断是否继承

css特性-层叠性：

特性:

1. 给同一个标签设置不同的样式 ->此时样式会层叠叠加 -> 会共同作用在标签上

2. 给同一个标签设置相同的样式 ->此时样式会层叠覆盖 ->最终写在最后的样式会生效

注意点：

1.当样式冲突时，只有当选择器优先级相同时，才能通过层叠判断结果

 拓展标签嵌套的注意规范：

1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等......

   但是：p标签中不要嵌套div、p、h等元素

2.a标签内部可以嵌套任意元素

   但是：a标签不能嵌套a标签

  这里是本人学习CSS3基础的一些笔记，可以供大家一起学习和交流！！！