如何使用CSS Edit成为CSS侦探
接受挑战为Joomla!站点进行样式设计或重设计，很快就会让曾经的网页设计师穿上虚拟的风衣和帽子，神奇地变成一个代码侦探。对于新Joomla!用户来说，在Joomla!网站上更改设计元素时最令人困惑的事情之一是试图弄清楚任何给定样式的代码来源，然后当然，更改样式又是另一回事。
如果您只是在使用核心Joomla!安装和模板，那么这通常是一个简单的过程。样式通常来自模板的template_css.css文件，或者来自模板/css文件夹中的其中一个CSS文件，通常位于templates / [我的模板] / css文件夹中，因此跟踪影响您想要更改的设计元素的代码相对容易。然而，如果您在您的网站上使用多个插件、模块和组件，那么任务往往会变得有点棘手。
在大多数情况下，找到有问题的代码是一个试错的过程，但试错的有效性很大程度上取决于您所使用的工具。
CSS Edit赋予您超级英雄的力量...几乎是这样。
在我的模板工具包中，最常用的工具无疑是来自Mac rabbit的CSS Edit。
我仍然记得第一次意识到如何使用实时预览，以及当我突然意识到CSS及其级联选择器是如何工作时那种突如其来的领悟。这个工具对任何设计师来说都非常有价值，但如果您还没有mac，这个工具的价格相当昂贵。对我来说，几乎值得为了使用这个应用而购买一台mac。
在这个教程中，我将创建一个模拟调查，并使用CSS Edit追踪如何更改joomla.org网站上橙色标题的颜色。
以下是定位并更改joomla.org网站上生成橙色标题的CSS所需的步骤。
1. 在CSS Edit中打开预览窗口，导航到https://www.joomla.net.cn.
2. 点击xray按钮以启用xray功能。
3. 通过单击xray按钮旁边的i图标确保应用样式窗口处于活动状态。
4. 点击您想要调查的选择器 - 在这种情况下是橙色标题。
5. 目前我们有两个选项。
- 在不更改网站永久性的情况下进行调查。
- 在更改网站永久性的情况下进行调查。
5. a. 在不更改实时网站的情况下查找样式。
在应用样式窗口中，点击其中一个高亮的样式，然后选择将内容提取到新的样式表选项。不出所料，此选项将在cssedit中打开一个新的文件。
5. b. 查找样式并对您的网站进行实时更改。
这是我最喜欢的调查和更改网站CSS的选项，然而您需要小心，因为任何一旦保存的CSS文件更改都会直接影响到实时网站。
我不太确定按钮叫什么名字，所以我们叫它编辑CSS图标。
这是一个有用的图标，不仅因为它给你一个显示页面包含的CSS文件数量的数字，而且还帮助您追踪服务器上CSS文件的路径和位置。正如您所看到的，template.css文件位于joomla.org服务器上的cdn.joomla.org/jorgm/css/main。
要永久更改文件，现在只需通过导航到上面的路径来找到您服务器上的文件。一旦您使用FTP客户端打开此文件，您需要选择使用现有样式表选项，并从下拉列表中选择您已打开的文件。
现在，将在样式表顶部添加一段代码，看起来像这样
{codecitation}
/* @override https://cdn.joomla.org/jorgm/css/main/template.css */
{/codecitation}
6. 一旦您打开了相应的文件，您需要在应用样式窗口中再次点击样式，以便您想要追踪的样式在新建的样式表中突出显示。
通常有多个CSS选择器可能指向单个设计元素，所以这是一个检查每个引用并查看代码以找到CSS的问题。正如我们上面所看到的，有五条CSS规则影响标题元素的显示，但只有.content h2具有我们想要更改的颜色信息。
为了测试我们是否有了正确的元素，我们只需更改该块中的值，看看它是否实际上控制了元素的颜色。我们可以通过更改CSS选择器来测试，看看CSS文件中的更改是否适当地针对HTML。为了演示的目的，让我们将标题的橙色改为蓝色。
正如您所看到的，实时预览强制更改了标题颜色，从橙色变为蓝色。
所以现在我们知道，为了更改Joomla.org页面上h2元素的橙色标题颜色，我们需要更改template.css文件中分配给.content h2规则的十六进制值。如果您已经通过FTP在服务器上打开了文件，要使更改实时，您只需保存文件即可，FTP客户端将文件上传到服务器并更改网站。
查看屏幕录像
非常感谢TJ Baker发布他的快速屏幕录像。从这个视频中可以清楚地看出，这个工具对于初学者和CSS专家同样有价值。
其他工具
虽然我知道市面上有很多其他工具也能完成类似的工作（见下文），但在我看来，CSS Edit 无疑是这项工作的最佳界面和工具。虽然我可能有点偏见，但我当然愿意被说服。
浏览器工具
PC 用户工具
在 Joomla 社区杂志上发表的一些文章代表了作者对特定主题的个人观点或经验，可能并不代表 Joomla 项目官方立场。
关于作者
通过接受，您将访问 https://magazine.joomla.net.cn/ 外部第三方提供的服务
评论