1.1快速生成html结构语法
1.生成标签直接输入标签名按tab键即可，如div然后tab键，就可以生成<div></div>
2.如果想要生成多个相同标签 加上*就可以，如div*3就可以快速生成3个div
3.如果有父子级关系的标签，可以用>比如ul>就可以了
4.如果有兄弟关系的标签, 用+就可以了,如div+p
5.如果生成带有类名或者id的名字,直接写. demo或者#two tab键就可以
6.如果生成的div类名是有顺序的,可以用自增符号$
7.如果想要在生成的标签内部写内容可以用()表示
结合上述内容可得:
1.2emmet语法快速生成css样式
1.3快速格式化代码
Vscode快速格式化代码:shift+alt+f
1.文件---->首选项----->设置---->搜索Emmet.include--->再settings.json下的用户中添加语句
(如果输入的emmet.include搜索没有出现settings.json中编辑,就输入format)
"editro.formatOnType":true,
"editro.fromatOnSave":true,
1.
2.搜索:emmet.include或format
3.输入所给的内容
注意:只需设置一次即可,以后都可以自动保存格式化
2.CSS复合选择器
2.1后代选择器(重要):后代选择器又称为包含选择器,可以选择父子元素里面子元素.前写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔.当标签发生嵌套是时,内层标签成为外层标签的后代.
语法: 元素1 元素2{样式声明 } ,语法表示选择元素1里面的所有元素2(后代元素)
ul li {样式声明}/选择ul里面所有的li标签元素/
.元素1和元素2中间用,空格隔开
.元素1是父级,元素2是子级,最终选择的是有元素2
.元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
.元素1和元素2可以是任意基础选择器
如果有两个相同的ul标签,而只想改一个ul标签里面的内容,我们就可以把想要改颜色的ul标签命名为nav
这样我们在改颜色的时候只需将ul标签改为输入nav.
运行结果:
2.2子选择器(重要):子元素选择器,只能选择作为某单元的最近一级子元素,进而言之就是选亲儿子元素 .语法: 元素1>元素2{样式声明} ,语法表示选择元素1里面所有直接后代(子元素)元素2.
例如: div>p {样式声明} /选择div里面所有最近以级p标签元素/
.元素1和元素2中间用大于号隔开
.元素1级是父级,元素2是子级,最终选择的是元素2
.元素2必须是亲儿子,其孙子,重孙子之类都不归他管.也可以叫他亲儿子选择器
运行结果:
2.3并集选择器(重要):并集选择器可以选择多组标签,同时为他们定义相同的样式.通常用于集体声明.
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分
语法: 元素1 元素2 {样式声明} ,语法表示选择元素1和元素2
例如: ul,div {样式声明} /选择ul和div标签/
.元素1和元素2中间用逗号隔开i
.逗号可以理解为和的意思
.并集选择器通常用于集体声明
运行结果:
2.4(上)伪类选择器:伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个, 第n个元素. 伪类选择器书写最大的特点是用冒号(:)表示,比如hover first-child.
因为伪类选择器很多,比如有链接伪类,结构伪类等.
a:link /选择所有未被访问的链接/:
a:visited /选择所有已被访问的链接/:
a:hover /选择鼠标指针位于其上的链接/:
a:active /选择活动链接(鼠标按下未弹起的链接)/:
运行结果:
2.4(下):1.为了确保生效,请按照LVHA的循序声明:link visited hover active
2.记忆法:love hate 或者lv包包hao.
3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都要给链接单独指定样式
写法:
/*a {
color: gray;
}
/* :hover是链接伪类选择器 鼠标经过*/
a:hover{
color: red; /*鼠标经过的时候,由原来的灰色 变成了红色*/
}
2.5focus伪类选择器:focus伪类选择器用于选取获得焦点的表单元
焦点就是鼠标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说.
input:focus{
background-color:yellow;
}
结果:
总结:
2022年11月13日下午13点53分完成
历经3个小时完成.