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

标题: 裴虎伟-前端(4)_20221111 [打印本页]

作者: faith 时间: 2022-11-14 19:28
标题: 裴虎伟-前端(4)_20221111
一、今日学习内容
1、CSS的复合选择器
（1）复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的
（2）优点：复合选择器可以更加准确、高效的选择目标元素
（3）后代选择器：是可以选择父元素的子元素，外层标签写前面，内层标签写后面，中间用空格隔开——>元素1 元素2{样式声明}；
（4）子元素选择器：子元素选择器是能选择作为某元素的最近的一级子元素——>元素1>元素2{样式声明}；
（5）并集选择器：并集选择器可以选择多组标签，同时为它们来指定相同的样式，通常用于集体声明——>元素1，元素2{元素声明}；
（6）伪类选择器：
链接伪类选择器：：link选择所有未被访问过的链接；：visited选择所有已经被访问过的链接；：hover选择所有链接鼠标悬停时，来设置状态；：active选择所有链接当鼠标点击时的状
焦点伪类选择器： input：focus{样式声明}；
2、CSS的元素显示模式：元素在网页中的显示状态就是它本身的显示模式
分类：
（1）块元素：h1—h6标签；div标签；p标签；ul、ol、li等；
特点：自己独占一行；宽度默认是父级宽度的百分之百；本身也可以是容器或者盒子，里面可以放其他的行内或者块级元素；高度和宽度都是可以设置的；内、外边距也可以控制；
（2）行内元素：<a>、<strong>、<em>、<span>、<ins>等（文本格式化标签）
特点：相邻的行内元素会在一行上进行显示；宽高设置都是无效的（input直接被除掉）；默认的宽高是它本身内容的宽高；行内元素只能容纳文本或者其他的行内元素；
（3）行内块元素：input、img、td标签等
特点：相邻的行内块元素在一行上显示，并且有空白缝隙（行内元素特点）；默认宽度是它本身内容的宽度（行内元素特点）；高度和宽度可以进行设置（块级元素的特点）；
（4）元素显示模式的转换
转化为块级元素：display:block；转化为行内元素：display: inline; 转化为行内块元素：display: inline-block;

3.CSS背景属性
（1）背景颜色：background-color:
（2）背景图片：background-image：
（3）背景平铺：background-repeat：
（4）背景图片定位：background-position：
（5）背景图片滚动：background-attachment：
（6）背景半透明：background:rgba(0,0,0,0.3);
4.CSS的三大特性
（1）层叠性：相同的选择器设置相同的样式，此时新的样式会覆盖掉旧的样式
（2）继承性：在CSS中，子标签会继承父标签的某些样式，比如：文本颜色、字号等
（3）优先级（权重）：如果选择器相同，执行层叠性；如果选择器不同，执行优先级（根据选择器的权重来执行）

二、今日问题

无

三、解决方案

无

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