CSS基础知识---选择器进阶+背景属性+元素显示模式+三大特性
1、选择器进阶
1.1.1 后代选择器 重点
作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素(选中子孙后代)
问题1:后代选择器的语法格式是什么?选择器与选择器之间用什么符号隔开?
答:
-
选择器1 选择器2{属性:属性值;属性:属性值;}
-
空格隔开
问题2:后代选择器最终选中的元素是父元素还是子元素?
答:
-
子元素
-
后代选择器选中子孙后代
- 我要改变颜色
- 我要改变颜色
- 我要改变颜色
- 我要变色并且改变字体大小
- 我不变
- 我不变
1.1.2 子代选择器
作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素(只能选中亲儿子)
问题1:子代选择器的语法格式是什么?选择器与选择器之间用什么符号隔开?
答:
-
选择器1> 选择器2{属性:属性值;属性:属性值;}
-
>隔开
问题2:子代选择器最终选中的元素是父元素还是子元素?
答:子代选择器最终选择的是子元素--->亲儿子
我是儿子
1.1.3 并集选择器
作用：同时选择多组标签，设置相同的样式.
问题1:并集选择器的语法格式是什么？元素之间使用什么符号分开？
答:
-
选择器1,选择器2{属性:属性值;属性:属性值;}
-
元素之间使用
,隔开,最后一个选择器的后面不用加逗号
问题2:并集选择器可以使用基础选择器或者复合选择器吗?
答:
-
可以.
-
并集选择器通常一行写一个,提高代码可读性
熊大
熊二
光头强
- 小猪佩奇
- 猪爸爸
- 猪妈妈
1.1.4 交集选择器
作用：选中页面中 同时满足 多个选择器的标签
问题1:交集选择器的语法格式是什么？选择器之间需要分隔吗?
答:
-
选择器1选择器2 { 属性:属性值;属性:属性值;}
-
不需要分隔.
问题2:交集选择器中如果有标签选择器,标签选择器写在哪里呢?
答:标签选择器必须写在最前面
作用：选中鼠标悬停在元素上的状态，设置样式
E:link 未访问的链接(把没有点击过的(访问过的)链接选出来)
E:visited 已访问的链接(访问过的链接)
E:hover 鼠标经过时的连接
E:active 鼠标按下未弹起时的链接问题1:伪类选择器的语法格式是什么,他的作用是什么?
答:选择器:hover{属性:属性值;}
问题2:书写:hover的时候有什么注意事项?
答::号的前面与后面都不能用空格
1.1.5 Emmet语法
作用：通过简写语法，快速生成代码,提高编码效率
2、背景相关属性
2.1.1 背景颜色
问题1:设置背景颜色使用哪个属性,快捷键是?
答:background-color:背景颜色 快捷键:bgc
问题2:背景颜色属性的默认值是什么?
答:transparent(透明色) rgba(0,0,0,0)
问题3:背景颜色属性为rgba格式时第四个值表示什么意思?
答:透明度,默认是0,透明度的区间是0-1
2.1.3 背景图片
应用场景:网页的logo 装饰图片 超大背景图 精灵图
问题1:设置背景图片使用哪个属性,快捷键是?
答:background-image:背景图片 快捷键:bgi
问题2:背景图片属性的属性值格式是什么样的？
答:background-image:url(图片名称)
问题3:背景图片可以撑开盒子吗?
答:背景图片不可以撑开盒子.
问题4:背景图片和背景色的显示层级是?
答:背景图片在上,背景色在下
2.1.4 背景平铺
问题1:设置背景平铺使用哪个属性,快捷键是?
答:background-repeat:背景平铺 快捷键:bgr
问题2:在使用背景图片时，默认背景是平铺的吗？
答:默认是平铺的
问题3:背景平铺有哪些属性,有Z轴吗？
答:repeat|no-repeat|repeat-x|repeat-y
2.1.5 背景位置
问题1:设置背景位置使用哪个属性,快捷键是?
答:
-
background-position:背景位置 快捷键:bgp -
background-position:水平方向 垂直方向
问题2:方位名词分别对应哪些方位?
答:
-
水平方向:
left/right/center -
垂直方向:
top/bottom/center
问题3:背景位置属性的取值有哪些？
答:
-
方位名词
-
精确单位(数字+
px[坐标]) -
混合单位(第一个取值表示水平，第二个取值表示垂直)
2.1.6 背景连写
问题1:背景相关属性连写的属性名是？
答:background
问题2:背景相关属性连写有顺序要求吗？推荐写法是?
答:
-
没有顺序要求
-
background:color image repeat position;
-
各个属性之间使用空格隔开
2.1.7 img标签和背景图片的区别
img标签可以撑开盒子,一般展示重要的图片,比背景图要清晰
背景图片不可以撑开盒子.(需要设置盒子的宽高),超大的图片和logo以及精灵图
3、元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示，比如div独占一行，比如一行可以显示个span。
3.1.1 块级元素
问题1:块级元素的display属性的属性值是？
答:display：block
问题2:块级元素有什么特点?
答:
-
独占一行（一行只能显示一个）
-
宽度默认是父元素的宽度，高度默认由内容撑开
-
可以设置宽高
-
可以存放其他行内元素和块级元素 文本
问题3:块级元素的代表标签有哪些？
答:div、p、h系列、ul、li、ol、dl
3.1.2 行内元素
问题1:行内元素的display属性的属性值是？
答:display：inline
问题2:行内元素有什么特点?
答:
-
一行可以显示多个
-
宽度和高度默认由内容撑开
-
不可以设置宽高
-
只能容纳文本或其他行内元素
问题3:行内元素的代表标签有哪些？
答:span a em 等
3.1.3 行内快元素
问题1:行内块元素的display属性的属性值是？
答:display：inline-block
问题2:行内块元素的显示特点有哪些？
答:
-
一行可以显示多个
-
可以设置宽高
问题3:行内块元素的代表标签有哪些？
答:input button textarea
3.1.4元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求.
三种转换模式代码:
-
display: block转换为块元素 -
display: inline-block转换为行内块元素 -
display: inline转化为行内元素（使用较少）
案例:
代码块:
html
手机 家电手机 电话卡电视 盒子笔记本 平板出行 穿戴智能 路由器健康 儿童耳机 音响耳机 音响
css
/* 1 设置div盒子宽度 高度 背景颜色 */.nav {width: 234px;height: 420px;background-color: #555;}/* 2. 将 a 标签转换为块级元素，设置默认显示属性 */.nav a {display: block;width: 234px;height: 42px;color: #fff;font-size: 14px;text-decoration: none;text-indent: 2em;line-height: 42px;}/* 2. 设置 a 标签鼠标经过状态 */.nav a:hover {background-color: #f70;}
3.1.5 HTML嵌套规范注意点
问题1:块元素可以嵌套哪些元素?有什么注意事项?
答:
-
文本、块级元素、行内元素、行内块元素等等
-
p标签中不要嵌套div、p、h等块级元素
h系列标签也一样.
问题2:a标签可以嵌套哪些元素?有什么注意事项?
答:
-
a标签可以嵌套任意元素
-
a标签不能嵌套a
4、CSS 三大特性
4.1.1 继承性的介绍
问题1:CSS三大特性是什么?
答:继承性 层叠性 优先级
问题2:继承性的特性是什么？有哪些常见的属性可以继承?
答:
-
子元素有默认继承父元素的某些样式
-
文本属性 字体属性 行高 颜色属性
-
如
1.color
2.font-style、font-weight、font-size、font-family
3.text-indent、text-align
4.line-height
4.1.2 继承的小应用
好处：可以在一定程度上减少代码 常见应用场景：
-
问题1可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
-
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
4.1.3继承失效的特殊情况
-
a标签的color会继承失效
-
h系列标签的font-size会继承失效
-
div的高度不能继承，但是宽度有类似于继承的效果
4.1.4 层叠性
相同选择器设置相同的样式就会出现样式层叠
问题1:如果给同一个标签设置了相同的属性，此时样式会出现什么情况？
答:会层叠覆盖，写在最后的会生效
问题2:如果给同一个标签设置了不同的样式，此时样式会出现什么情况？
答:
-
会层叠叠加，共同作用在标签上
-
注意点:当样式不冲突时,要先考虑优先级,才能通过层叠性去进行判断
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！