CSS如何调试?

html-css015

CSS如何调试?,第1张

1.我们以谷歌浏览器为例,来讲讲怎么调试CSS。先打开谷歌浏览器,看截图里的红色箭头,点击“工具”,点击“开发者工具”,就打开调试工具了,也可以按下快捷键F12来打开调试工具;

2.打开的调试工具如下图所示:

3.我们就以百度的首页为例,看看调试效果。看截图,点击那个“抓取元素”的按钮,来获取要审查的元素;

4.看截图,出现下面的界面后,点击“style”,单击那个对勾,就可以看到效果了;

5.我去掉一些样式之后,就出现了下面的效果,看截图;

按F12进入控制台模式 或者选中内容 右键 审查元素

ELements html css调试 选中html标签右边就是css

右键标签Edit as HTML 为修改当前标签html代码 Edit as Text 是修改text内容

css去掉钩子 就能失效了 右上角加号添加新选择器元素后面点击添加新元素

还有一些常用的

sources 来源文件 CSS JavaScript之类文件调试debug

Network 页面请求 get post之类 一般用来抓包的

Application 存websql Local Storage cookies增删改查的地方

console 就是控制台了 可以输入JavaScript代码 或者console函数输出的地方

这个没试过,但是感觉应该不会,因为浏览器不会重新加载这个css文件。

推荐楼主可以这么做:

1.Elements选项卡

2.找到左下角有个像放大镜一样的按钮,点击,这时回到chrome页面,选择你想查看css样式的部分(选中的那部分会有一个遮罩层)

3.这时右侧有个Styles,点开,会看到当前选中部分的样式,在这里改是可以直接看到页面效果的。但它是临时的(页面刷新就没了),比较适合调样式。

建议用上面的方法调过,合适再写到css里