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

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

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

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

硬件:安卓系统 版本:107.0.5304.105 大小:174.16MB 语言:简体中文 评分: 发布: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 所做的更改。

如何使用谷歌浏览器调试 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是我们在生活中经常用到的一个软件,但是下载的时候,很多用户总觉得速度太慢。

如何更新谷歌浏览器

如何更新谷歌浏览器

如何更新谷歌浏览器?如果您想确保您使用的是最新版本的 Google Chrome 浏览器,以下是在桌面、Apple iOS 和 Android 设备上检查和更新的方法。

如何在 Kali Linux 上安装 Google Chrome 浏览器?

如何在 Kali Linux 上安装 Google Chrome 浏览器?

在 Kali 上安装 Google Chrome 非常简单,但并不像你想象的那么简单。由于 Chrome 是一个封闭源代码的 Web 浏览器,因此无法从默认软件包存储库安装它。不用担心,您将通过几个简短的步骤了解如何安装它。

怎么将谷歌浏览器升级到Chrome 88?<升级方法>

怎么将谷歌浏览器升级到Chrome 88?<升级方法>

Google Chrome,又称Google浏览器,是个由Google(谷歌)公司开发的网页浏览器。该浏览器是基于Chromium开源软件所撰写。

为什么下载了谷歌浏览器打开是360?该怎么恢复?

为什么下载了谷歌浏览器打开是360?该怎么恢复?

谷歌浏览器打开为什么是360首页,这是怎么回事?最近很多小伙伴都发现自己的win10系统打开谷歌浏览器发现不是原本的页面,而是360的首页,这个原因可能是你在安装软件的过程中,装入了捆绑了相关插件的软件。

谷歌浏览器安装时无法定位

谷歌浏览器安装时无法定位

你有没有在使用谷歌浏览器的时候遇到各种问题呢,你知道谷歌浏览器安装时无法定位是怎么回事呢?来了解谷歌浏览器安装时无法定位的解决方法,大家可以学习一下。

如何关闭 Chrome 烦人的标签组

如何关闭 Chrome 烦人的标签组

约一个月前,Chromium 存储库的用户对 Android 版 Chrome 中的标签组发起了一场非常礼貌的反抗,宣称他们更喜欢直接在新标签中打开选定链接的选项。

谷歌浏览器与edge究竟谁更胜一筹?

谷歌浏览器与edge究竟谁更胜一筹?

chrome和edge到底有什么优缺点,哪款更适合你呢,一起来和小编看看吧1

谷歌浏览器提示你的连接不是私密连接该怎么解决?

谷歌浏览器提示你的连接不是私密连接该怎么解决?

google浏览器是现在最受广大用户喜爱,使用率最高的一款网页浏览器。不过,最近有用户反应在互联网手机扫码继续观看,很多小伙伴都在使用谷歌浏览器的时候提示了你的连接不是私密连接,这是怎么回事?该如何处理呢?今天小编就为大家带来了关于谷歌浏览器提示您的连接不是私密连接的具体解决方法。

Chrome 声音在 Windows 中不起作用是怎么回事?<修复方法>

Chrome 声音在 Windows 中不起作用是怎么回事?<修复方法>

当您什么都听不见时,观看 YouTube 视频的乐趣会少很多。这是在 Windows 上为 Chrome 恢复声音的方法。

如何使用Chrome远程桌面获得虚拟技术支持?

如何使用Chrome远程桌面获得虚拟技术支持?

由于许多人在家工作,远离他们的IT团队,因此很难通过一条消息或视频电话来解决问题。有时,最好的选择是虚拟技术支持,但这些系统中的许多都很昂贵,需要您是企业用户或管理员才能访问它们。进入Chrome Remote Desktop,这是一个免费的基于网络的应用程序,旨在通过谷歌帐户提供和接受虚拟技术支持。以下是如何访问和使用该功能来给予和接受技术支持。

如何在谷歌浏览器中屏蔽广告

如何在谷歌浏览器中屏蔽广告

在线广告变得越来越烦人和烦人。您可以采取一些措施来阻止它们,具体取决于您使用的浏览器。Google Chrome 浏览器允许您以几种不同的方式阻止广告。