CSS进阶

1. 选择器进阶

                1.1 后代选择器：空格

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

                        选择器语法：选择器1 选择器2{CSS}

                        注意：选择器和选择器之间用空格隔开

                        结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择

                器2的标签，设置样式；其中后代包括：儿子、孙子、重孙子…

                1.2 子代选择器：>

                        选择器语法：选择器1>选择器2{CSS}

                        子代选择器与后代选择器的区别是，子代选择器只包括儿子，选择器之间用>隔开

                1.3 并集选择器：,

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

                        选择器语法：选择器1,选择器2{CSS}

                        注意：并集选择器中的每个选择器可以是基础选择器也可以是复合选择器（可以是

                类选择器，id选择器等等）；

                1.4 交集选择器：紧挨着

                        作用：选中页面中同时满足多个选择器的标签，可以找到页面中既被选择器1选中

                又被选择器2选中的标签

                        选择器语法：选择器1选择器2{CSS}

                        注意：交集选择器中的选择器之间是紧挨着的，没有东西分隔；交集选择器中如果

                   有标签选择器，标签选择器必须写在最前面，如：p.box（p为标签选择器，.box为类

                   选择器）    

                1.5 hover伪类选择器：

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

                        选择器语法：选择器:hover{CSS}

---

2.背景（background）：

        2.1 背景色：

                属性名：background-color

                属性值：即颜色取值：关键字（red、blue、white…）、rgb表示法、rgba表示法、十六进制…

                注意：背景颜色默认值是透明：rgba(0,0,0,0)、transparent；背景颜色不会影响盒子大小

        2.2 背景图片：

                属性名：background-image

                属性值：background-image:url('图片的路径');

                注意：背景图片中url中可以省略引号；背景图片默认是在水平和垂直方向平铺的；背景图片是给盒子起装饰效果的，不能撑开盒子

        2.3 背景平铺：

                属性名：background-repeat

                属性值：repeat（默认值）水平和垂直方向都平铺；no-repeat不平铺；repeat-x沿着水平方向（x轴）平铺；repeat-y沿着垂直方向（y轴）平铺

        2.4 背景位置

                属性名：background-position

                属性值：background-position:水平方向位置 垂直方向位置;（两个属性值之间用空格隔开）

                        水平方向位置：左left，中center，右right；垂直方向位置：上top，中center，下bottom；也可以用：数字+px（坐标）来表示

        2.5 背景属性的连写：

                属性值：推荐顺序：background:color image repeat position，这四个属性是不分先后顺序的

---

 3.元素显示模式：

        3.1 块级元素：

                显示特点：独占一行（一行只能显示一个）；宽度默认是父元素的宽度，高度默认由内容撑开；可以设置宽高；

                代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、footer…

        3.2 行内元素：

                显示特点：一行可以显示多个；宽度和高度默认由内容撑开；不可以设置宽高

                代表标签：a、span、b、u、i、s、strong、ins、em、del…

        3.3 行内块元素：

                显示特点：一行可以显示多个；可以设置宽高

                代表标签：input、textarea、button、select…

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

        3.4 元素显示模式转换：

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

                语法：属性display，display:block转换成块级元素；display:inline-block转换成行内块元素；display:inline转换成行内元素

---

4.CSS三大特性：

        4.1 继承性：

                特性：子元素有默认继承父元素样式的特点（子承父业）

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

                        1. color；

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

                        3. text-indent、text-align；

                        4. line-height

                        5. ……

                注意：可以通过调试工具判断样式是否可以继承

                特殊情况（继承失效）：如果元素有浏览器默认样式，此时继承性依然存在，但是优先

        显示浏览器默认样式，例如：1. a标签的color会继承失效（因为a标签本身具有颜色）；2. h

        系列标签的font-size会继承失效

        4.2 层叠性：

                特性：给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上；

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

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

        4.3 优先级：

                特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

                优先级公式：

                        继承<通配符<标签选择器<类选择器<id选择器<行内样式<!important

                注意点：!important写在属性值的后面，分号的前面；!important不能提升继承的优先级，只要是继承优先级最低；实际开发不建议使用!important