如图,选中某一个元素,然后在开发者工具的过滤器当中有一个:HOV值点击它,然后选取你需要查找的伪类。
注:因为正常情况下点击一个元素属性,你是看不到它的伪类的。
点击出现伪类后,你就可以在这个上面直接更改样式了。
比如颜色,可以直接在开发者工具中自带的画板中吸取页面中你想要的颜色,然后确定就可以更改了。
咱们在制作网页时,UI图上的颜色也可以拿开发者自带的画板吸取确定颜色。
6,如何添加新的类,复制和删除原来的类?
过滤器栏中最右边有一个.CLS选项,它可以添加新的类,这个功能主要是添加CSS原样式中存在的类,通过调用其它类样式到当前元素中来,从而查看新的样式。
.CLS右边的十号作用是复制当前类,可重新在新类中布置新的样式。特别是在旧类样式代码非常多的情况下重新布局样式,这时候用新增一个类的方法就很方便,新类复制到编码器当中也省不少事。
7,如何快速增加元素的样式?
谷歌浏览器自带了4个快速增加属性的按钮,如图上4个图标,从左到右分别是应:
文本shadow-文本元素阴影效果
箱型shadow-块级元素阴影效果
color-字体颜色
背景color-背景颜色
有人可能会问怎么才能找到它们呢?可能细心的同学已经发现了。
当鼠标悬浮在类栏中,右边会出现一个三个小点的按钮,点击它便会出现这四个按钮了。
最后,页面样式修改完成后,我们就该保存啦。可以有三种方式保存修改后的代码。
①从开发者工具类里面复制代码到你的代码编辑器。
②直接在页面上CTRL + S另存为即可,这种比较暴力,适合F12大幅度修改后的页面。
③也可以对照开发者工具,在WebStorm或VScode代码编辑器中敲上去····
四,思考
1,如何通过F12开发者工具来学习优秀网站的设计?
比如在开发过程中遇到了一些很难的布局,或者产品经理的一些要求你没有想到一些很好的方法来实现的,大家就可以借鉴一下别的网站的设计。
如图上,我们可以打开F12的源来查看HTML或者CSS样式,JavaScript的的的样式。通过借鉴别的网站的代码来参悟自己想要实现的布局。
五。一些常见问题
问题一:如何用F12查询伪类?
在F12中有一个:HOV值,点击它然后勾选你需要查找的伪类就能在底下显示出来了。
问题二:如何用F12查看CSS文件?
点击F12中的资源,就能看见页面中包含的文件,然后找到CSS文件,JS文件的查找也是同样的办法。
问题三:如何使用F12修改文字阴影效果?
在F12中有四个按钮是专门修改阴影效果,块级元素效果,字体颜色,块级颜色的。
点击需要修改的元素,在元素里面点击Ť图标就可以形象的同步更改字体的阴影效果了。