(大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)
目录
续:七、Chrome调试工具
一、Emmet语法
1.1 快速生成HTML结构语法
1.2 快速生成CSS样式语法
(续:CSS样式表:Chrome调试工具。)
续:七、Chrome调试工具
Chrome 浏览器提供了一个非常好用的周试工具,可以用来调试我们]的HTML结构何css样式。
1. 打开调试工具: 打开Chrome 浏览器,按下 F12键 或 右击空白页面处→检查
2.使用调试工具:
- ctrl+滚轮可以放大开发者工具代码大小。
- 左边是HTML元素结构,右边是CSS样式。
- 右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。
- ctrl+0复原浏览器大小。
- 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
- 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。
(续 结束,接下来是新的知识)
目标
- 能使用emmet语法
- 能够使用CSS复合选择器
- 能够写出伪类选择器的使用规范
- 能够说出元素有几种显示模式
- 能够写出元素显示模式的相互转换代码
- 能够写出背景图片的设置方式
- 能够计算CSS权重
目录大纲
- emmet语法
- CSS的复合选择器
- CSS的元素显示模式
- CSS的背景
- CSS的三大特性
- CSS的注释
一、Emmet语法
Emmet语法的前身是Zen coding,它便用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
1.1 快速生成HTML结构语法
1. 生成标签,直接输入标签名,按tab链即可;
比如 div,然后tab键,就可以生成<div>/div>
2. 如果想要生成多个相同标签,加上 * 就可以了。
比如 div+3,就可以快速生成3个div
3. 如果有父子级关系的标签,可以用>;
比如 ul> li 就可以了
4. 如果有兄弟关系的标签,用+就可以了;
比如div + p
5. 如果生成带有类名或者id名字的,直接写 .demo 或者#two,tab链就可以了。
6. 如果生成的div类名是有顺序的,可以用自增符号$;
.demo $*5
7. 如果想要在生成的标签内部写内容可以用 { } 表示。
1.2 快速生成CSS样式语法
CSS基本采取简写形式即可:
- 比如 w200 按tab 可以生成width: 200px;
- 比如 lh26 按tab可以生成line-height: 26px;
自动格式化设置:
- 打开设置
- 点击文本编辑器
- 点击其中的格式化
- 勾选其中的 Format On Paste 和 Format On Save即可
(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:人生就是这样,要耐的住寂寞,才守得住繁华。)