我需要在网页中直接编辑CSS?打开Web代码检查器

最受欢迎的支持问题是:“我必须编辑哪些CSS代码才能改变(…)的外观”。几年前,CSS/HTML编辑器是最有用的web开发工具。现在,我认为更有用的是构建在每个现代浏览器中的web代码调试器,例如Firefox、Safari、Chrome、Brave甚至MS Edge。代码检查器允许你检查、修改(模拟更改)和调试网页的HTML、CSS和JavaScript。如果你正在寻找有关使用浏览器中可用的web 开发人员工具的信息,那么你找到了正确的地方。

如何运行浏览器的Web开发人员工具? 

首先是第一件事,使用开发人员工具的方法因浏览器而异。我们从谷歌浏览器开始。

  • 对于Chrome,点击菜单上的>开发工具或者使用相应的键盘快捷键,或者
  • 选中一个元素:右键单击网页上的元素,然后选择“检查”

检查器将出现在浏览器窗口的底部,如下面的截图所示。

Joomla在网页中编辑CSS

打开时,它会弹出并停靠到当前浏览器窗口的底部或单独的窗口中(这取决于浏览器的设置)。

查看并检查组成一个网页的元素。所呈现的站点HTML是可见的并且在左侧完整可编辑,并且关于网页的节点、样式和层的细节可在右侧的工具条中获得。

对于Chrome,你可以参考官方文件。继续阅读本文内容,以便更快地学习核心内容。

如何使用web开发人员工具?

工具栏通常位于屏幕的底部,你可以控制检查器。选中的元素将高亮显示,页面上的其他元素将变暗。编辑允许你预览带有HTML、CSS和JavaScript代码调整的web内容输出。它可以帮助你检查所有的资源使开发更高效,最重要的是,使用最常见的CSS属性调整样式。

你可以编辑任何HTML元素,并通过CSS块和可视化的方式编辑CSS样式。

Joomla在网页中编辑CSS

如果你点击了样式视图的声明或者选择器,你可以编辑它们,并且可以马上看到效果。那你还可以选择不同的现有属性和值,并通过按Enter或鼠标单击开始编辑它们。要向规则添加新声明,请单击规则的最后一行(右括号所占的行)。当你开始输入属性名时,你会看到一份自动补充的属性列表。

你可以接受当前建议或在列表中移动。默认选项是以你键入的字母开头的最常见属性。例如,这里用户键入了“c”,默认选项是“color”(上面的屏幕截图)。如果在编辑属性时输入无效值,或者输入未知属性名称或值,则该行中将显示黄色警报图标。Web检查器还包括许多用于处理特定CSS功能的专用工具,例如颜色,字体和动画。

你还可以在样式表文件中编辑CSS规则并在脚本文件中编辑JavaScript(下面的屏幕截图)。

Joomla在网页中编辑CSS

你所做的任何更改都是临时的:重新加载页面将恢复原始样式。

警告!开发人员工具中所做的更改不会保存在模板,组件,模块CSS / JS文件中。你必须复制更改的代码行并在自定义代码文件中使用它们。

大多数浏览器还有内置选项来模拟浏览器中的移动设备(视图)。响应式设计模式提供了一个简单的界面,可以跨各种屏幕尺寸,方向和分辨率快速预览你的网页。非常方便的移动开发工具。

Joomla在网页中编辑CSS

我需要改变页面所更改的css样式

如果你知道应该覆盖哪些CSS行以实现所需的更改,则必须在模板中使用自定义代码。如果你已安装并设置为默认的Helix3或Helix Ultimate模板,我们建议你使用custom.css文件写入所有主要更改并添加的新行:

templates \ shaper_NAME \ css \ custom.css

首先你必须从Joomla管理员或通过FTP创建该新文件

使用这种方法,你可以custom.css中控制整个站点的CSS样式设计。

Joomla在网页中编辑CSS

例如,如果所有的插件标题都应该是红色的,你可以custom.css中更改它,而不是在每个模块设置中单独更改。你可以对来自SP Page Builder的插件样式和任何其他组件执行相同的操作。主要规则是通用的。

选择开发浏览器

Joomla在网页中编辑CSS

Mozilla开发了Firefox开发者版,内置开发工具,为开发者量身定制的版本,配备了最新的Firefox功能和实验性开发工具。它包括专门用于使用CSS网格构建和设计的工具。这些工具允许你可视化网格、显示相关的区域名称、在网格上预览转换等等。

总结

从一开始我每天都使用这个工具。无论你是新用户还是有经验的Joomla用户,你都将从使用浏览器中内置的web开发人员工具中获益良多。它们是免费的,非常强大,提供了一个学习、思考和试验新风格的平台。几乎所有这些工具都提供了用于创建、调试和性能监视的各种工具。解释所有的特性超出了这篇文章的范围。但是,我们希望上述工具的介绍能够帮助你完成日常Joomla开发工作。