css - 浏览器作为设计工具 - 更改颜色，保存它们？

Question

关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。












想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。

2年前关闭。




Improve this question




我是一名 Web 开发人员/设计师，我需要我不懂代码的客户能够轻松地处理特定元素的颜色，保存这些 CSS 更改，并将它们发送给我。我将通过电话指导他们，但我仍然需要它比期望他们在主题表中定位 CSS 选择器并编写十六进制代码更容易。

我需要一个浏览器内检查器，它可以允许不识代码的人:

使用 GUI 颜色选择器轻松操纵网页元素上的颜色。
(+) Chrome 完美地做到了这一点。这正是我想要的。
(-) Firefox 原本华丽的检查器似乎没有这种基本功能。

保存受影响的样式表，以便他们可以将其发送给我。
(?) Firefox 的样式编辑器使保存工作表变得容易，但是对检查元素的更改 - 奇怪的是 - 似乎没有应用。
(-) Chrome 可能可以做到这一点，在 Sources 面板的深处，但似乎你需要成为一名黑客才能弄清楚，因为我是代码识字的人，我还没有弄清楚出来。

我发现这个难题的存在非常令人困惑——为什么浏览器供应商要费心制作如此丰富的网页编辑套件，在其中可以操作 CSS，但不包括基本的“保存更改”功能？ 我错过了什么吗？

编辑01:

我发现，在 Chrome 中，可以使用检查器自由操作元素的 CSS，然后单击与每个规则关联的 CSS 表(在规则的右上 Angular )，将您带到修改过的 CSS 表中来源选项卡。 这就是我想要保存的。
从这里，您可以右键单击此修改后的源代码中的任意位置，然后另存为 -- 但奇怪的是，不幸的是，不直观， Chrome 保存了错误的源代码。它保存原始的、未修改的源代码——而不是您右键单击另存为的修改后的源代码。非常令人沮丧，我目前正试图找到解决此错误的方法。我离得那么近!

编辑02:

好的，我已经想通了。 当您在 Chrome 的“源”选项卡中保存文件时，你不只是在保存那个文件 -- 您实际上是在将 Chrome 设置为在每次更改时不断自动保存该文件。
这实际上很酷，但非常具有误导性。

因此，在保存 CSS 文件后， 您在检查器中对元素的 CSS 所做的每项更改都会自动保存到该文件中。 即使您重新启动浏览器，这种情况仍然存在。

困惑出现了，因为当您将文件标记为自动保存，然后将文件另存为修改后的文件时，Chrome 会奇怪地写入原始文件，而不是您右键单击的文件。只要您在此之后进行任何更改，Chrome 就会自动将当前的每个修改写入该文件。我认为这是 Chrome 中的一个错误。

吸取教训，首先，另存为文件。其次，做出你的改变。
Presto，你修改过的 CSS 主题在你的硬盘上等着你。

要清楚，如果您保存，然后进行更改，然后再次保存 - Chrome 将保存原始源，而不是您的修改后的源。这使得事情的顺序很重要。

我不知道有什么方法可以查看当前标记为自动保存的文件列表，也不知道如何取消标记它们。

Answer 1

如何使用 Chrome 玩转 CSS 并保存它

确定您要更改的样式表。 确保只影响与此样式表关联的规则。

在 Developer Tools 的 Sources 面板中导航到此样式表，右键单击它，然后将此文件另存为您的计算机。 通过单击“元素”面板中所选元素的每个 CSS 规则右上 Angular 的样式表，您可以快速访问“源”面板中的样式表。

自由更改与您选择并保存的样式表相关联的 CSS 规则。 Chrome 会自动将每项更改保存到您保存在计算机上的样式表中。

但是请记住，您 必须按照这个顺序做事。如果您保存样式表，然后进行 CSS 更改，然后再次保存，Chrome 会奇怪地将原始未修改的源代码写入文件(直到您再进行一次更改，这会导致 Chrome 自动将所有更改保存到文件中)。

如何与您的客户和 friend 一起使用

为您打算让它们使用的每个元素设置一个带有空白(或默认)CSS 规则(具有最高优先级)的主题样式表。

通过电话，引导他们从“源”面板中另存为此主题样式表。

指导他们检查元素，并使用 Chrome 检查器的 GUI 颜色选择器进行干预并找到他们想要的确切颜色。

让他们向您发送保存的样式表 :)
在他们关闭浏览器窗口之前，您最好验证修改是否在他们发送给您的文件中:P