菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 陈玉-20221013-CSS2 [打印本页]

作者: polaris123 时间: 2022-10-14 00:01
标题: 陈玉-20221013-CSS2

一、今日学习内容

1.复合选择器
（1）后代选择器
注意：1.元素1 和元素2之间要用空格隔开

2.元素1是父级，元素2是子级，最终选择的是子级

3.元素2可以是儿子，也可是孙子，只要是元素1的后代都可以

4.元素1和元素2可以使任意的基础选择器

（2）子选择器

注意：1.元素1和元素2之间要用大于号隔开

2.元素1是父级，元素2是子级，最终选择的是元素2

3.元素2必须是亲儿子，也就是距离元素1最近一级的元素2，孙子、重孙都不能被选择

（3）并集选择器：并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明，每组选择器之间用“,”隔开即可。

（4）伪类选择器

a.链接伪类选择器（为链接添加特定效果）

注意：需要使用lvha的顺序来进行书写，如果顺序变化会影响链接伪类的样式效果

b.focus伪类选择器（焦点伪类选择器）：是获取光标所在位置进行样式变化，主要用于表单元素

基本语法：input：focus { }

2.CSS元素显示模式

2,1块级元素

特点：

1.自己独占一行

2.高度和宽度都是可以控制的（内外边距也可以控制）

3.宽度默认是父级的100%

4.块级元素里面可以放其他的块级或者行内元素，文字类的元素内不可以放块级元素

2.2行内元素

特点：

1.行内元素在一行上可以显示多个

2.无法设置宽高

3.默认的宽度和高度是他本身的内容的宽高；行内元素内只能容纳文本或者其他行内元素

2.3行内块元素

特点：

1.和相邻的行内块元素在一行上，但是它们之间会有空白空隙，一行可以显示多个（行内元素特点）

2.默认宽度是它本身内容的宽度（行内元素特点）

3.高度和宽度都是可以进行控制的（块级元素的特点）

2.4元素显示模式转化

转为块级元素：display:block;

转化为行内元素：display:inline;

转化为行内块元素：display:inline-block;

3.CSS背景属性

3.1背景颜色background-color：____； transparent（透明）

3.2背景图片background-image：url(图片地址);默认是none

3.3背景平铺bacground-repeat：repeat/no-repeat/repeat-x/repeat-y

3.4图片定位background-position：x，y；或者设置方位名词

3.5图片附着（滚动）background-attachment：fixed/scroll

3.6背景复合写法默认顺序为：background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

4.CSS三大特性

4.1层叠性

概念：相同的选择器给设置相同的样式时，新的样式会覆盖掉旧的样式（层叠）

原则：样式冲突，遵循的是就近原则，哪个样式离结构近，就执行哪个样式。

4.2继承性

概念：子标签会集成父标签的某些样式，比如文本颜色和字号等等。

4.3优先级

概念：当选择器不同时，遵循优先级（权重）原则

优先级注意点：

1、权重是由四组数字组成的，但是不会有进位

2、可以理解为类选择器永远大于元素选择器，以此类推

3、等级判断从左向右进行判断，如果某一位相同，那就判断下一位

4、继承的权重是0，不管父元素的权重有多高，子元素继承得到的权重都是0

5、复合选择器的权重相加

二、今日问题

今日内容已掌握

三、解决方案

今日内容已掌握

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)