如何使用谷歌浏览器调试 CSS?

 发布时间:2022-05-16  222 来源:谷歌浏览器官网
谷歌浏览器电脑版 谷歌浏览器电脑版

硬件:Windows系统 版本:122.0.6261.6 大小:101.47MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-03-29 厂商:谷歌信息技术(中国)有限公司

谷歌浏览器安卓版 谷歌浏览器安卓版

硬件:安卓系统 版本:107.0.5304.105 大小:218.98MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-03-12 厂商:Google Inc.

谷歌浏览器苹果版 谷歌浏览器苹果版

硬件:苹果系统 版本:122.0.6261.89 大小:198.4 MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC

      在实时调试网页时,Inspect Element 工具非常棒。您可以使用此工具来帮助预览和更改网站的设计。它还允许您这样做而无需重新加载页面,立即显示您的 CSS 更改。

  本文将介绍如何在 Inspect Element 窗口中查看 CSS 类及其应用的样式。它还将介绍如何使用它来实时预览对 CSS 所做的更改。

  在 Google Chrome 中打开检查元素

  您可以访问任何网站并打开“检查元素”窗口以查看其 HTML 或 CSS 代码的外观。

  您可以通过按F12键在 Google Chrome 中打开“检查元素”窗口。您也可以右键单击页面上的任意位置,然后单击Inspect

  检查元素窗口将打开您右键单击的网站部分的 HTML 代码。您还可以在此处使用 Google Chrome 编辑网站文本

  检查元素窗口中的样式选项卡

  在 Inspect Element 窗口本身的Elements选项卡下,有一个地方可以查看 HTML 和 CSS 代码。您可以在 Inspect Element 窗口的左侧看到 HTML 代码。您可以在右侧的样式选项卡下找到 CSS 代码。

  假设您有一个 HTML 元素,其中包含一个名为“card-padding”的类,并对其应用了左右填充。

  如果您在浏览器中预览此网站,您将能够选择具有“card-padding”类的div元素。应用于“card-padding”类的任何样式都将显示在右侧的样式选项卡下。

  当您将鼠标悬停在 HTML 代码视图中的某个元素上时,网页的该部分将在 Web 浏览器中突出显示。HTML 元素类型以及任何类名也将显示在元素旁边的对话框中。

  在这种情况下,您将看到 div 容器的类名“row”、“card-padding”和“pb-5”在页面上突出显示。

  如何实时更改 CSS

  您可以直接从样式选项卡更改 CSS:

   1、使用此网站,右键单击第一个标题。

   2、在那个特定的 h4 标题上,您将看到一个应用到它的名为“text-grey”的类,颜色为#8a8a8a。

  3、将颜色改为其他颜色,例如橙色。您只想更改值本身,而不是属性名称“颜色”。

  4、您将看到航向从深灰色变为橙色。

  5、如果要禁用特定的 CSS 样式,请取消选中样式左侧的框。

  6、、您还可以在原始集合中添加更多样式。单击属性正下方或右侧以开始添加新属性。添加新样式时,您应该使用与常规 CSS 文件中相同的语法。

  7、如果您正在预览本地网站,则可以继续进行 CSS 更改,直到您的 UI 更接近所需的外观。之后,您可以将所做的 CSS 更改复制回本地代码。

  如何从第三方库或框架修改 CSS

  如果您使用 3rd 方库或框架(例如 Bootstrap),您还可以对 HTML 元素进行更改。

  1、使用此网站,右键单击页面上的引导按钮之一。

  、2您将看到两个应用于按钮的类,“btn”和“btn-primary”。Bootstrap 已经将自己的样式应用于这两个类。用作背景和边框颜色的颜色是#007bff。将此更改为其他内容,例如 Violet。

  3、如果您正在预览本地网站,则可以将新更改添加回本地代码。根据 CSS 的顺序,您可能需要使用更具体的 CSS 选择器。例如,为选择器添加前缀“.btn”。这将覆盖原来的 Bootstrap 样式。

  样式选项卡中的 element.style 是什么意思?

  在 Inspect Element 窗口中突出显示的每个 HTML 元素都有一个 element.styles 块。这相当于向 HTML 元素添加内联样式,而不是使用选择器来定位它。

  1、右键单击 HTML 元素。将任何样式添加到 element.style 部分,例如:

  color: whitesmoke;

   2、您将看到 HTML 元素的代码也发生了变化。HTML 元素中的代码现在有了新的一行:

  style="color: whitesmoke;"

  子 HTML 元素如何继承样式

  如果您将两个不同的样式值应用于父元素和子元素,则子元素中的值将优先。

  1、使用此网站,右键单击网站外边缘的任意位置。

  2、在 Inspect Element 窗口的 HTML 部分中,关注两个特定的 HTML 元素。有一个应用了“内容”类的父 div 元素。这个 HTML 元素有一个 h4 子元素,并应用了一个“text-grey”类。

  3、选择子 h4 HTML 元素,并禁用“text-grey”类中的颜色样式。

  4、选择具有“内容”类的父 HTML 元素。将以下 CSS 样式添加到类中:

color: red;

  父 div 中的所有文本都将变为红色。此更改还将级联到子元素,这意味着 h4 也将具有红色。

  5、选择子 h4 HTML 元素,并将新样式添加到“text-grey”类:

  color: green;

  这将覆盖任何父类的样式。h4 HTML 元素将从红色变为绿色。

  6、如果您查看“内容”类的样式,您还会看到删除线。这确认了 h4 子元素覆盖了父元素的颜色。

  在浏览器中调试 CSS 的好处

  在浏览器中调试 CSS 可以节省大量时间并加快编码工作流程。如果您需要实时查看新的 CSS 更改如何影响您网站上的 UI,则尤其如此。

  您可以使用此技术,而不是更改本地代码并重新加载您的应用程序。这将使您不必猜测哪些 CSS 值会起作用,因为您现在可以在进行 UI 更改时查看它们。

  您可以对 Inspect Element 窗口进行更改,直到您接近所需的设计。完成后,您可以将“检查元素”窗口中的代码复制回本地代码。您仍然可以重新运行您的应用程序以测试您的新 CSS 更改是否仍然有效。

  其他有用的检查元素工具

  本教程涵盖了如何使用“检查元素”窗口调试网站 CSS 的基础知识,包括在“样式”选项卡中的何处找到 CSS。

  它还介绍了如何更改 CSS 并实时查看 UI 的视觉更改。希望您还了解当 CSS 使用第三方库时如何进行更改,以及样式继承如何工作。

  您可以使用“检查元素”窗口执行许多其他有趣的操作。

相关阅读
如何修复Google Chrome 上的 SSL 证书错误?

如何修复Google Chrome 上的 SSL 证书错误?

我们都知道Google Chrome是Windows 10 上最好的浏览器之一,它具有扩展和增强的安全浏览等功能,使网络体验真正安全和高效。但是我们在Chrome上经常会遇到SSL证书错误等恼人的问题。即使重新安装 Chrome 后,“ERR_SSL_PROTOCOL_ERROR”也不会消失。

Chrome.adm管理模版文件下载及安装方法!

Chrome.adm管理模版文件下载及安装方法!

在谷歌浏览器市场占有率超过60%基本是所向披靡。相比其他浏览器胜在速度上,简洁快速。专业人士爱用chrome,用chrome再也看不上别的浏览器了。

如何在 Chrome 中停止禁用开发者模式扩展?

如何在 Chrome 中停止禁用开发者模式扩展?

禁用开发者模式扩展是一条警告消息,当您从Chrome Web App Store之外安装该扩展时,Chrome会显示这条消息。Chrome不信任不是来自Chrome在线应用商店的扩展,并将其视为恶意软件。因此,作为一项安全措施,它会在每次启动浏览器时显示此消息。

如何将书签从 Chrome 导入到 Firefox?

如何将书签从 Chrome 导入到 Firefox?

作为互联网用户,我们大部分时间都在与网络浏览器进行交互。在过去的几年中,Web 应用程序随着 Web 浏览器的发展而蓬勃发展。许多新的浏览器已经出现在现场。来自 Mozilla 的 Firefox 和来自 Google 的 Chrome 是互联网上最占主导地位的两种浏览器。当两者都提供非常边缘的功能时,选择其中之一的决定并不容易。

如何使用 Chrome 扩展 AdNauseam 混淆 Google Ads?

如何使用 Chrome 扩展 AdNauseam 混淆 Google Ads?

如果您希望维护自己的在线隐私,AdNauseam 可以通过混淆 Google Ads 来帮助您。

如何将 Chrome 标签页固定在其他应用程序之上?

如何将 Chrome 标签页固定在其他应用程序之上?

如果您想始终查看 Chrome 选项卡的内容,此扩展程序将比您想象的更容易。