网站建设制作哪家好,有没有在线做动图的网站,建个人网站赚钱多吗,seo sem是啥#xff08;大家好#xff0c;今天我们将继续来学习CSS的相关知识#xff0c;大家可以在评论区进行互动答疑哦~加油#xff01;#x1f495;#xff09; 目录
续#xff1a;七、Chrome调试工具
一、Emmet语法
1.1 快速生成HTML结构语法
1.2 快速生成CSS样式语法 大家好今天我们将继续来学习CSS的相关知识大家可以在评论区进行互动答疑哦~加油 目录
续七、Chrome调试工具
一、Emmet语法
1.1 快速生成HTML结构语法
1.2 快速生成CSS样式语法 续CSS样式表Chrome调试工具。
续七、Chrome调试工具
Chrome 浏览器提供了一个非常好用的周试工具可以用来调试我们]的HTML结构何css样式。
1. 打开调试工具 打开Chrome 浏览器按下 F12键 或 右击空白页面处→检查 2.使用调试工具
ctrl滚轮可以放大开发者工具代码大小。 左边是HTML元素结构右边是CSS样式。 右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。 ctrl0复原浏览器大小。如果点击元素发现右侧没有样式引入极有可能是类名或者样式引入错误。如果有样式但是样式前面有黄色叹号提示则是样式属性书写错误。 续 结束接下来是新的知识 目标
能使用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. 如果想要生成多个相同标签加上 * 就可以了。 比如 div3就可以快速生成3个div 3. 如果有父子级关系的标签可以用 比如 ul li 就可以了 4. 如果有兄弟关系的标签用就可以了 比如div p 5. 如果生成带有类名或者id名字的直接写 .demo 或者#twotab链就可以了。
6. 如果生成的div类名是有顺序的可以用自增符号$ .demo $*5 7. 如果想要在生成的标签内部写内容可以用 { } 表示。
1.2 快速生成CSS样式语法
CSS基本采取简写形式即可: 比如 w200 按tab 可以生成width: 200px; 比如 lh26 按tab可以生成line-height: 26px
自动格式化设置
打开设置点击文本编辑器点击其中的格式化勾选其中的 Format On Paste 和 Format On Save即可 今日分享暂时到此为止啦为不断努力的自己鼓鼓掌吧。今日文案分享人生就是这样要耐的住寂寞才守得住繁华。
