css - 重置继承的 CSS

Question

我正在尝试为网站创建替代设计作为后备。我无法真正改变系统的架构方式。加载了一个主样式表，然后加载了第二个。我可以控制第二个样式表。我想重置很多 CSS，特别是表单元素。

但是，我在这方面遇到了困难。例如 <button> :

background: rgb(88,222,255);
border-radius: 4px;
border: 1px solid #91d7eb;
box-shadow: 0px 2px 4px 0px rgba(1, 75, 138, .8);
color: #FFF;
cursor: pointer;
font-family: "Graphic-Font";
font-size: 25px;
font-weight: bold;
text-shadow: 0px 1px 3px #014b8a;
padding: 10px 40px;

虽然我可以设置background: none , border-radius: none` 等等，按钮没有样式，而不是默认的浏览器样式。我必须让表单元素成为默认浏览器样式，以及页面上的许多其他元素。但我似乎无法至少让表单元素取消样式。

为清楚起见简化问题:如何重新设计 <button>回到默认值？

Answer 1

我建议使用 CSS 重置作为起点(Eric Meyers' 可能是最著名的)。

我认为您遇到了一些您不想设置自己的样式，而是将其恢复为浏览器默认值的事情(例如，您不想 margin:0;在所有方面，您都希望 H1 上的默认大边距，p 上的默认小边距，等等。

您实际上可以获得用户代理样式表的副本，修改它们以使其更具体，并包含它们以进行覆盖。 Here is a site that has copies of a lot of default UA stylesheets .这里的一个问题是每个浏览器都使用自己的样式表，因此除非您的浏览器检测并提供选择性样式表，否则它看起来不会像该浏览器通常那样。不过，我认为没关系。我实际上建议你只选择一个你喜欢的默认浏览器并将所有浏览器设置为这样，或者你可以使用 W3C's suggestion for default browser styles .

虽然所有这些都不能解决您的问题，因为样式化表单元素是 hell 。一旦应用样式，某些浏览器就会切换表单元素的呈现模式，因此您永远无法将其恢复为原始样式。例如，IE7 不支持圆 Angular ，但其默认按钮具有圆 Angular ，因为它以 Windows 操作系统风格呈现。但是，一旦您为按钮设置了边框或其他样式，它就会失去漂亮的 Windows 阴影圆 Angular 默认外观，并且不使用图像就无法恢复它!

所以说真的，我不会试图让浏览器返回到它们的原生默认样式。我会使用 UA 默认样式表，然后对其进行修改，从而形成一种通用的、跨浏览器、跨系统的默认样式。它看起来不像 native 无样式代码，但看起来足够接近。