如何查看被设置什么样式呢可鉯扩展到了解查看任何被设置什么。DIVCSS5教大家掌握如何使用谷歌浏览器查找网页css样式中某局部结构以及对应设置什么CSS样式

比较简单的布局，我们直接从浏览器上观察效果就能分析一下地方被设置什么样式

简单直观分析DIV CSS布局用什么样式图

如上图，可以大致分析对应样式有哪些比如使用，设置多少、设置多少、、、距离左多少

以上分析只是直观能看到的能分析的大致使用什么CSS样式，但如果要想精确的分析對应布局CSS样式到底设置什么那必须的看对应CSS代码。

实在分析观察不出的那就需要去查看DIV对应或对应的样式。

1、工具：DIVCSS5使用（）进行分析

2、查找分析某处使用什么CSS样式的流程

在网页css样式空白处鼠标右键-》查看网页css样式源代码

对应会在谷歌浏览器选项卡自动新建打开

2-3：找箌对应要查找地方DIV
可以使用快捷键“ctrl+F”查找要找DIV布局处。

通过对比原来网页css样式内容找到对应内容并获取对应DIV布局结构信息

查找技巧使鼡浏览器自带查找工具，然后对比所要找DIV内容与原来正常访问时内容找到确定的DIV布局结构。

这里找到对应内容DIV布局内容代码：

从以上代碼可以得到需要分析那个布局使用进行布局，同时使用class="home"

记住对应ID和，这里是用class命名为“home”可以想到CSS肯定使用".home{.....}"的选择器。

如果CSS是使用那需要打开对应这个页面外部，以便查找里对应Id或Class命名,从而获取得到对应DIV布局使用了什么CSS样式

找到link引入外部CSS文件代码

打开CSS文件：在谷謌浏览器中直接点击对应CSS文件URL即可，在谷歌浏览器打开CSS文件

打开对应CSS文件查看到对应CSS代码

2-4：使用查找工具找到对应CSS选择器
使用谷歌浏览器查找工具，快捷键“Ctrl+F”打开查找工具将HTML分析的id或class命名拷贝到查找输入框进行查找，这里是使用“class="home"”,我们知道class对应CSS就是以半角英文句号“.”为选择符号开头命名的“.home”进行查找

查找到两处对应CSS样式

对应的CSS代码如下：

分析得出对应地方设置CSS样式为：

2-4-1：对应H2标签设置高度为24px、文字的行高为24px、字体大小为14px、字体颜色为黑色“#000”、设置25px、设置图片为背景不重复不平铺（可以从网页css样式实践效果看出是对应的那个圖标）；

2-4-2：设置对应h2标签内的超链接为黑色“#000”、。

以上就是DIVCSS5介绍如何分析一个网页css样式某处局部使用什么标签布局、对应设置了什么CSS样式这样分析可以有助于大家平时借鉴别人、从而自己掌握不太会的布局方法技巧。

如需转载请注明文章出处和来源网址：