以下是Google浏览器查看网页CSS样式的方法：
1. 使用开发者工具检查元素样式
- 打开开发者工具：在Chrome中按 `F12` 或右键点击页面选择“检查”→进入元素面板→鼠标悬停到网页元素上→右侧会显示该元素的CSS样式。
- 查看继承的样式：在元素面板选中目标元素→展开“Computed”标签页→查看所有生效的CSS属性（包括继承自父元素的样式）。
2. 定位具体样式来源
- 查看样式定义位置：在元素面板右侧的“Styles”栏→点击每条CSS规则前的文件夹图标→可跳转到源代码中对应的样式表文件（如 `style.css` 或 `` 标签）。
- 区分样式优先级：在“Styles”栏中观察规则顺序→带叹号（!）的表示被其他样式覆盖→通过调整优先级或修改选择器解决问题。
3. 修改实时样式并预览效果
- 编辑CSS属性：在“Styles”栏点击属性值→直接修改（如将 `color: black` 改为 `red`）→页面会实时更新，方便测试调整效果。
- 添加新样式规则：在“Styles”栏底部点击“+”按钮→输入自定义CSS（如 `border: 1px solid red`）→立即查看对页面的影响。
4. 使用“样式面板”统一管理
- 切换到样式面板：在开发者工具顶部选择“Styles”标签页→左侧显示页面所有样式表（如外部文件、内联样式）→点击具体文件可折叠/展开规则。
- 搜索特定样式：按 `Ctrl+F` 输入关键词（如 `margin`）→快速定位所有相关样式→支持正则表达式搜索复杂选择器。
5. 导出复制CSS代码
- 复制元素完整样式：右键点击元素→选择“Copy”→点击“Copy element styles”→直接获取该元素所有CSS代码（含选择器和声明）。
- 导出整个样式表：在“Styles”栏点击样式文件名→右键选择“Save all to file”→将当前页面所有样式保存为独立文件。