HtmlCss 基础总结（基础好了才是最能打的）四

Html&Css 基础学习回顾总结

Html&Css 基础总结（基础好了才是最能打的）一
Html&Css 基础总结（基础好了才是最能打的）二
Html&Css 基础总结（基础好了才是最能打的）三

文章目录

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;}