CSS 样式调试

Unsplash

a. 找到对应的需要调试的元素,右键,检查

调试元素

b. 出现黄色三角形的警告,表示该 CSS 属性出错

警告

可能的原因有:① CSS 属性结束后,忘记添加分号 ;;② 分号使用了中文的,要使用英文的半角符号;③ 属性名称或属性值写错了

c. CSS 属性被中横线划掉,表示该属性被覆盖,重写

覆盖重写

原因:被自身选择器相同的或者简写的属性覆盖掉

d. 以上两种情况都没有出现,样式还是不生效

原因:简写的 CSS 属性以及分开属性的混在一起书写

div {
  width: 100px;
  height: 100px;
  background-color: black;
  background: url("img/1.png") no-repeat center center;  //PS:1.png图片的宽高60*68,小于100*100
}

<div></div>

运行结果

可以看到,上例中所定义的黑色背景不生效

解决方法:统一使用简写,或者统一使用分开属性,不要混在一起;

background: url("img/1.png") black no-repeat center center;

确实需要混在一起的,分开属性的书写在简写属性后面

background: url("img/1.png") no-repeat center center;
background-color: black;

运行结果

e. 通过 Chrome 调试面板 [F12 或者右键检查] 判断 CSS 是通过何种方式引入,快速定位到对应的选择器元素

element.style 表示头部引入 ② 对应的选择器的右边如果出现 .html+number 字样,表示样式是通过头部引入的,number 为该选择器所在的页面行数

头部引入

③ 对应的选择器的右边如果出现 .css+number 字样,xxx.css 就是当前样式所在的样式表的名字,是通过外部引入的方式引入的,number 为该选择器所在样式表里的行数

外部引入

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

React Native入门(三)组件的Props(属性)和State(状态)

前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。 1...

204100
来自专栏性能与架构

浏览器的渲染阻塞

浏览器渲染的步骤 (1)浏览器解析HTML标记去构造DOM树(DOM = Document Object Model 文档对象模型) (2)解析CSS去构造...

37140
来自专栏积累沉淀

JavaScript事件

JavaScript事件 对于事件来讲,首先,我们需要了解这样几个概念:事件;事件处理程序;事件类型;事件流;事件冒泡;事件捕获;事件对象;事件模拟,事件方面的...

26060
来自专栏吾爱乐享

php学习之html属性-框架(八)

20930
来自专栏JetpropelledSnake

Python入门之Pycharm开发中最常用快捷键

32420
来自专栏python3

tkinter -- Frame

...

10010
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

26940
来自专栏吴裕超

原生js怎么为动态生成的标签添加各种事件

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的...

34550
来自专栏前端儿

CSS布局 -- 左侧定宽,右侧自适应

14720
来自专栏快乐八哥

自定义的html radio button的样式

设计要求效果如下: ? <!-- .csharpcode, .csharpcode pre { font-size: small; color: black...

23660

扫码关注云+社区

领取腾讯云代金券