在过去,互联网充满了Web设计,不可读的字体,颜色冲突,并且没有适应屏幕尺寸。此时,Web浏览器允许用户编写CSS样式表,浏览器用于覆盖页面设计人员所做的样式选项。此用户样式表将字体设置为一致大小并设置页面以显示指定的颜色背景。这完全是关于一致性和可用性。
用户样式表很流行性漏水
然而,现在,用户样式表不常见。谷歌Chrome不允许他们,并且Firefox正在淘汰他们。在Chrome的情况下,您需要一个扩展创建用户样式表。Firefox要求您通过开发人员页面启用该选项。用户样式表消失,因为Web设计更好。
如果您仍然想尝试使用用户样式表,可以,但不建议使用。你更有可能打破你访问的页面或让他们真正丑陋。
在Firefox中启用用户样式表
要在Firefox中启用用户样式表,请启用它们。它只需要几秒钟,但该选项埋在Firefox Config页面中。
-
打开Firefox,以及类型关于:config.进入地址栏。
-
Firefox将您带到一个页面警告您进一步允许您删除浏览器。按接受风险并继续继续前进。
-
您将看到的下一页只是一个搜索栏。类型toolkit.legacyuserprofilecustomizations.stylesheet.进入搜索。
-
应该只有一个结果。双击它以将值设置为真的。
-
关闭Firefox。
创建Firefox用户样式表
现在Firefox将接受您的样式表,可以创建一个。该文件与任何其他CSS没有什么不同。它位于浏览器用户配置文件目录中的文件夹中。
-
找到Firefox用户配置文件目录。在窗户上,你可以找到它C:\用户\ username \ appdata \ roaming \ mozilla \ firefox \ compleasiles \。
在Mac上,它位于库/应用程序支持/ Firefox /配置文件。
在Linux上,它在/home/username/mozilla/firefox.。
-
在该文件夹中,至少有一个包含一个名称的文件夹,这是一个随机字符串,后跟一个.default或.default-reforment扩展。除非您创建另一个,否则这是您需要的配置文件文件夹。
-
在配置文件中创建一个新文件夹,并命名为它铬合金。
-
在里面铬合金目录,使文件调用UserContent.css.,并在您选择的文本编辑器中打开它。
-
只要它是有效的CSS,您可以在此文件中放入此文件中。为了说明一个点,让所有网站看起来很荒谬。将背景颜色设置为亮粉色:
身体,主要{
背景颜色:#ff00ff!重要;
}这!重要的最后很重要。通常,使用!在CSS中重要是一个坏主意。它打破了风格纸的自然流动,可以使噩梦进行调试。但是,在这种情况下,需要覆盖网站现有的CSS。您需要它为您创建的每个规则都需要它。
-
更改字体大小。
p {
字体大小:1.25REM!重要;
}
H1 {
字体大小:1REM!重要;
}
H2 {
字体大小:1.75REM!重要;
}
H3 {
字体大小:1.5REM!重要;
}
P,A,H1,H 2,H3,H4 {
字体 - 家庭:'Comic Sans Ms',Sans-Serif!重要;
} -
保存并退出文件。
-
打开Firefox并导航到页面以尝试。如果设置此示例中使用的规则,则该网站应看起来很糟糕。
使用带Google Chrome的Chrome扩展
Google Chrome不支持用户样式表,也不支持。Chrome不是为它而建造的。很多这是它的铬,拥有更多现代的起源。另一部分是哲学的差异。Firefox一直在考虑用户控制,而Chrome已更加由Google拥有和控制的商业产品。他们真的不在乎你在浏览器上有多少控制。
但是,有镀铬扩展允许您实现用户样式表以自定义浏览体验。本指南使用扩展时髦的在Chrome中启用用户样式表。
-
打开铬。
-
选择三堆叠点菜单图标在屏幕的左上角。导航更多工具>延期。
-
在Chrome扩展选项卡中,选择三层线菜单图标在屏幕的左上角。一个新菜单幻灯片。选择打开Chrome Web Store在底部。
-
在Chrome Web Store中,使用搜索查找时髦的。
-
时尚应该是结果的第一个扩展。选择它。
-
在页面上时尚,选择添加到Chrome.。
-
出现一个弹出窗口,要求您确认添加时尚。选择添加扩展名。
-
Chrome显示一个页面,让您了解时尚。从那里,您可以转到任何页面或关闭选项卡。
-
选择一块拼图Chrome窗口右上角的扩展图标。选择时髦的从菜单。
-
打开一个新的时尚菜单。选择三堆叠点右上角的菜单图标。
-
从生成的菜单中,选择创造新风格。
-
Chrome为您的风格打开一个新标签。使用左上角的字段给它一个名称。
-
使用CSS在选项卡主体中为样式创建新规则。务必使用!重要的在每个规则之后,以确保规则覆盖该网站的现有样式。
身体,主要{
背景颜色:#ff00ff!重要;
} -
选择保存在左边拯救你的新风格。您应该立即看到它。
-
浏览到网站以测试新样式表。时尚让您控制样式表并选择性地将它们应用于您选择的网站。探索扩展的控件,了解如何对用户样式表采取微调方法的感觉。