前端学习-HTML+CSS(4)

一、选择器进阶

1.1 后代选择器：空格

选择器1 选择器2{CSS}

后代：儿孙...

根据HTML标签的嵌套关系，选择后代元素中满足条件的元素，选择器之间通过空格隔开

1.2 子代选择器：>

选择器1>选择器2{CSS}

子代：只有儿子

根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素，选择器之间通过大于号隔开

1.3 并集选择器

选择器1，选择器2{CSS}

同时选中多个标签，设置相同的样式

1.4 交集选择器

选择器1选择器2 { css }

选中页面中 同时满足 多个选择器的标签

1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔

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

1.5 hover伪类选择器

鼠标悬停在上面的效果 ，设置样式

选择器：hover{CSS}

任何标签都可以添加伪类

1.6 emmet语法

快速书写代码

二、背景相关属性

2.1 背景颜色

属性名：background-color（bgc） 

属性值： • 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……

• 背景颜色默认值是透明： rgba(0,0,0,0) （a是透明度取值0-1）、transparent

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

 2.2 背景图片

属性名：background-image（bgi）

属性值：url("图片的路径")

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

• 背景图片默认是在水平和垂直方向平铺的（按照图片原大小填充）

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

2.3 背景平铺

属性名：background-repeat

属性值：

repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

2.4 背景位置

属性名：background-position

属性值：水平位置（left/center/right） 垂直位置（top/center/bottom）

        或    数字+px（水平位置） 数字+px（垂直位置）（图片左上角的位置） 

正数向下向右移动，负数向左向上移动， 0 0 表示在容器左上角

background-position: 50px 50px;
background-position: center bottom;

2.5 背景属性的连写

background：color image repeat position

拓展

三、元素显示模式

3.1 块级元素

显示特点：

1. 独占一行（一行只能显示一个）

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

3. 可以设置宽高 

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

 3.2 行内元素

显示特点：

1. 一行可以显示多个

2. 宽度和高度默认由内容撑开

3. 不可以设置宽高

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

3.3 行内块元素

显示特点：

1. 一行可以显示多个

2. 可以设置宽高

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

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

3.4 元素显示模式转换

属性：display

属性值：block/inline/inline-block (块级/行内/行内块)

拓展

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

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

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

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

四、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会继承失效 

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

4.2 层叠性

 特性：

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

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

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