本文详细介绍了Emment语法在HTML/CSS编写中的应用，以及复合选择器（后代、子、并集和伪类选择器）的概念和用法。同时涵盖了CSS元素显示模式、背景设置（包括图片、平铺、位置、固定和复合写法）和背景颜色半透明处理。
目录
1.Emment语法
Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，vscode内部已经集成了该语法。
Emment语法快速生成html标签：
1.生成标签，直接输入标签名字按tab键即可。
2.如果想要生成多个相同标签 加上*就可以了，例如div*3
3.如果有父子级关系的标签，用>符号，例如ul>li
4.如果有兄弟关系的标签，用+符号,例如：div+p
5.如果生成带有类名或者id名字的，直接写.demo 或者#tab 然后按tab键就可以了
6.如果生成的div类名有顺序，可以使用自增符号$
7.如果想要在生成的标签内部写内容可以使用{}表示
2.复合选择器
2.1 什么是复合选择器
在css中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。
- 复合选择器可以更准确，更高效的选择目标元素（标签）
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等
2.2 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开。当标签发生嵌套时，内层标签成为外层标签的后代。
语法
元素1 元素2 { 样式声明 }
上述语法表示选择元素1里面的所以元素2（后代元素）
- 元素1和元素2中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。
- 元素1和元素2可以使任意基础选择器
2.3 子选择器
子元素选择器（子选择器）只能选择作为某元素最近一级子元素。简单理解就是选亲儿子元素。
语法：
元素1> 元素2 { 样式声明 }
上述语法表示选择元素1里面的所以直接后代（子元素）元素2.
注意：
- 元素1和元素2中间用大于号隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，其孙子，重孙之类不归他管，你可以叫他亲儿子选择器
2.4 并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是个各选择器通过英文逗号（，）链接而成，任何形式的选择器都可以作为并选择器的一部分。
语法
元素1，元素2 { 样式声明 }
上述语法表示选择元素1和元素2
注意：
- 元素1和元素2中间使用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
- 一定要注意最后一个选择器 不需要加逗号
- 约定的语法规范，我们并集选择器喜欢竖着写
2.5 伪类选择器
伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或者选择第一个，第n个元素等
伪类选择器书写最大的特点是用冒号（：）表示，比如：hover ：first-child。
2.5.1 链接伪类选择器
a:link 选择所以未被访问的链接
a:visited 选择所以已被访问过的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
注意事项：
1.为了确保生效，请按照LVHA的循环顺序声明：:link :visited :hover :active。
2.记忆法：love hate 或者 lv包包hao
3. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
2.5.2 ：foncus伪类选择器
：focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标 ，一般情况下input类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input ：foucus{
样式声明
}
2.6 总结
3 css的元素显示模式
3.1 什么是元素显示模式
作用：网页标签非常多，在不同的地方会遇到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是 元素（标签）以什么方式进行显示，比如div自己占一行，比如一行可以放多个span。
html元素一般分为块元素和行内元素两种类型。
3.2 块元素
常见的快元素<h1>~<h6>,<p>,<div>,<ol>,<li>等，其中<div>标签是最典型的块块元素。
块级元素的特点：
1.比较霸道，自己独占一行
2.高度，宽度，外边距以及内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块级元素
注意：
1.文字类的元素内不能块级元素
2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。
3.3 行内元素
常见的行内元素有a，strong，b，em，i，del，s，ins，u，span等，其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素
行内元素的特点
- 相邻行内元素在一行上，一行可以显示多个
- 高，宽 直接设置是无效的
- 默认宽度就是它的本身内容的宽度
- 行内元素只能容纳文本或者其他行内元素
注意：
- 链接里面不能放链接
- 特殊情况下链接a里面可以放块级元素，但是a转换一下块级模式最安全。
3.4 行内块元素
在行内元素中有几个特殊的标签 img input td 它们同时具有块元素和行内元素的特点。
特点：
- 和相邻的行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个行内块元素
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度，行高，内外边距都可以控制（块级元素特点）
3.5 总结
3.6 元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特征，这时候就需要用到模式转换
转换为块级元素：display:block
转换为行内元素：display:inline
转换为行内块元素：display:inline-block
3.7 单行文字垂直居中
css没有给我们题功文字垂直居中的代码，这里我们可以使用一个小技巧来实现。
解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中
简单理解：行高的上空隙和下空隙把文字挤到中间，是如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下
4.css的背景
通过css背景属性，可以给页面元素添加背景样式
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。
4.1 背景图片
background-image 属性描述了元素的背景图像。实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置
属性值
none 无背景图片
url 使用绝对或者相对地址指定背景图片
4.2 背景平铺
如果需要在html页面上对背景图片进行平铺，可以使用background-repeat属性
background-repeat：repeat | no-repeat | repeat-x | repeat-y
4.3 背景图片的位置
利用background-position 属性可以改变图片在背景中的位置
background-position：x y；
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位
| length | 百分数| 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | right方位名词 |
1.当参数是方位名词时
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left 效果一致
- 如果只指定一个方位名词，第二个省略，则第二个默认居中对齐
2.参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。
3.参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
4.4 背景固定（背景附着）
backckground-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
后期可以制作视差滚动效果
background-attachment ： scroll | fixed
| scroll | 背景图像是 |
| fixed | 背景图像固定 |
4.5 背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写到同一个属性background中
节约代码量，当使用简写属性时，没有特定的书写顺序，一般按照习惯约定顺序为；
background ：背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置；
4.6 背景色半透明
css为我们提高了背景颜色半透明效果
background： rgba（0,0,0,0.3）；
最后一个参数是alpha透明度，取值范围在0~1之间
4.7 总结
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
