谷歌浏览器查看编辑元素CSS样式

2019-6-9 20:58| 作者: admin| 查看: 657| 评论: 0|来自: 钱柜手机网页版

通过谷歌浏览器可以查看当前页面应用的具体CSS代码。

并且还可以在线编辑(仅对客户端有效)对应的CSS代码以便查看页面渲染效果。

一.查看指定元素CSS样式:

通过谷歌浏览器我们可以查看应用于指定元素上的CSS代码。

查看步骤如下:

(1).鼠标右击对应的元素:

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/205935ae4rds8ex8ijd6xm.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然后点击弹出层的检查菜单,会弹出如下界面:

aid[3310]

在右侧可以看到定义在链接<a>元素的CSS代码,简单分析如下:

(1).顶部element.style展示的是通过元素style属性定义的CSS,由于没有定义所以为空。

(2).下面都是通过外部引入CSS文件定义的CSS属性,并且给出了CSS具体定义的位置。

(3).被横线穿过的CSS属性定义,说明它被其他的同名属性定义覆盖,并没有生效。

再往下看,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/210028cwxfdkjh3vs38wwl.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

User agent stylesheets表示是浏览器自带默认的样式规则。

继续往下看,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/210043d4kjvxrxqvxrvs48.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

Inherited from表示CSS属性从指定元素几成而来。

如上述截图,点击dd可以跳转到对应的DOM结构位置,并且右侧也会显示dd的CSS代码定义。

二.查看CSS伪类的定义:

上面介绍的方式无法查看定义在元素上的CSS伪类代码。

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/210105cvxjl6280zrct02k.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击顶部的:hov按钮,然后选择弹出层里面的相关伪类即可查看对应的CSS代码了。

三.编辑CSS代码:

下面再来介绍一下如何在线编辑CSS代码。

当然这个编辑只会对客户端的样式表现产生影响,不会影响服务器代码,否则岂不是乱套了。

按照上面介绍的方式检查元素,然后直接在线编辑元素:

(1).直接在元素上通过style属性设置:

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/210129d43pk32tklx29vd3.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

右击对应的元素,然后会弹出上述菜单,点击Edit as HTML进行编辑即可:

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/210148iaygc55bee85o5qz.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).编辑CSS代码:

检查元素后,会在某个地方出现应用在其上的CSS代码。

我们可以直接在线编辑这些代码:

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/210220c2cmy5zy5235vu2g.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过双击指定的位置可以修改已经存在的CSS代码,或者添加新的CSS代码。

(3).为元素添加class属性:

aid[3317]

点击对应的按钮,可以输入要添加的class的名称,即可添加完毕。

(4).添加新的规则:

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/210307jo7eqzg6gj7ocg7e.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击加号即可为当前元素添加一个新的样式规则,然后在其中编辑相应代码即可。



鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部