文章目录
- Html&Css 基础学习回顾总结
- 前言
- 复合选择器
- 后代选择器
- 子代选择器
- 并集选择器
- 交集选择器 （了解即可）
- 伪类选择器
- 伪类选择器-超链接的四个状态
- CSS的特性
- 继承性
- 层叠性
- 优先级
- 叠加计算规则
- Emmet 写法
- 背景属性
- 显示模式
- 块级元素
- 行内元素
- 行内块元素
- 转换显示模式
- 结束
前言
这是作者的第四天总结篇章， 有需要的小伙伴可以 在这里 找到上一篇文章
视频在这里~ @B站黑马程序员视频
视频共15天，作者会以天为粒度，来分散到不同文章中，有兴趣的小伙伴可以关注一下，谢谢你
书中错误在所难免，如果有小伙伴发现的话恳请斧正，在此先谢过咯~
本篇文章主要讲述CSS的复合选择器、特性、背景属性和显示模式
复合选择器
后代选择器
选中某个元素的后代元素（内嵌元素）子代选择器
选择某元素的子级元素，不往下走了
并集选择器
选中多组标签设置相同的样式，
选择器1,2，3…n` 选择器之间用，隔开
交集选择器 （了解即可）
选中同时满足多个条件的元素
伪类选择器
状态选择器，表示元素的状态，选中元素的某个状态设置样式
鼠标悬停状态：选择器 hover （css属性）
选择器后面加：hover， 适用于基础选择器
伪类选择器-超链接的四个状态
:link 访问前；
:visited 访问后；
:hover 鼠标悬停；
:active 点击时（激活）；
CSS的特性
继承性
子级标签默认继承父级的文字控制属性，例如字体大小粗细颜色等…
但是有一种情况会失效，就是当子标签有自己的相同样式，例如颜色，的时候；
层叠性
意思是说相同的属性， 后面的会覆盖前面的（从上往下执行），而不同的属性会被叠加， 试想一下两个相同的标签选择器，不同的属性会被叠加， 如果是一样的，则后面的会把前面的覆盖掉
优先级
当一个标签适配多个选择的时候，该以哪个为优先呢？ 就是匹配规则呢？
“谁的优先级高选择器”
规则： 选择器的范围越大， 优先级就越低
公式： 通配符选择器 <标签选择器<类选择器< id选择器<行内样式 <!important
tips： 通配符选择器就是 *{xx}
可是important 是个什么东西？ 之前怎么没学过
ok，他是一个提权的 其实是提升优先级；
具体用法
#myid{
color:red !important // 那么这个的优先级就是最高的了
}
叠加计算规则
叠加计算： 如果是复合选择器， 则需要权重叠加计算；
公式（每一级之间不存在进位比较）
行内样式，id选择器格式， 类选择器个数，标签选择器个数；
从左向右依次比较个数， 同一级个数多的优先级高， 如果个数相同，则向后比较；
！important 权重最高
继承权重最低
Emmet 写法
Emmet 写法就是代码的简写方式，缩写输入vs code会自动生成对应的代码~我觉得蛮好的
html：
标签名.类名,div.mycalss:
<div class="mycalss"></div>
标签名#id名,div#cc:
<div id="cc"></div>
同级标签,div+p
<div></div>
<p></p>
父子级别标签： div>p
<div>
<p></p>
</div>
多个相同标签 span*3
<span></span><span></span><span></span>
带内容的div，div{ccc}
<div>cccc</div>css：
大多数简写方式未属性单词的首字母（自动提示）
背景属性
背景色：background-color;
背景图：background-image;
背景图平铺方式: repeat;
背景图位置：position；
背景图缩放：size；
背景图固定：attachment;
背景复合属性：background
div{
width: 500px;
height: 500px;
background-color: blue;
background-image: url(./641.webp);
/* 不平铺 */
background-repeat: no-repeat;
/* 方向英文单词 center left right top */
/* 0 0 ，左上角 */
background-position: center center;
/* 图片完全覆盖盒子 */
/* background-size: cover; */
/* 保留图片自身宽高比例 */
/* background-size: contain; */
/* 等同cover */
background-size: 100%;
/* 背景图固定 */
/* 背景图不会随着元素的内容滚动 */
background-attachment: fixed;
}显示模式
标签元素的显示方式
块级元素
- 独占一行
- 默认是父级的100% ;
- 添加宽高元素生效；
行内元素
例如span， 添加宽高不生效， 所以外部要包裹一个块级元素；
行内块元素
行内不换行， 默认尺寸由内容撑开
例子： span(image)
转换显示模式
属性名： display
属性值：
block 块级；
inline-block; 行内块；
inline 行内；
结束
今天的学习也到此为止了，希望大家都有所收获，再见
