4

我正在尝试为网站创建替代设计作为后备。我无法真正改变系统的架构方式。加载一个主样式表，然后加载第二个样式表。我可以控制第二个样式表。我想要重置很多 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>重新设置为默认值？

4

2 回答 2

1

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

我认为您在不想设置自己的样式但将其返回到浏览器默认值的事情上遇到了麻烦（例如，您不想要margin:0;所有内容，您想要默认的大边距H1，默认上较小的一个p，等等。

您实际上可以获取用户代理样式表的副本，修改它们以使其更具体，并包含它们以覆盖。这是一个包含许多默认 UA 样式表副本的站点。这里的一个问题是每个浏览器都使用它们自己的，因此除非您的浏览器检测并提供选择性样式表，否则它看起来不会像该浏览器通常那样。不过，我认为没关系。我实际上建议您选择一个您喜欢的浏览器默认设置并将所有浏览器设置为这样，或者您可以使用W3C 对默认浏览器样式的建议。

但是，所有这些都不能解决您的问题，因为样式化表单元素是地狱。应用样式后，某些浏览器会立即切换表单元素的呈现模式，因此您永远无法将其恢复为原始样式。例如，IE7 不支持圆角，但它们的默认按钮具有圆角，因为它以 Windows 操作系统样式呈现。但是一旦你给按钮一个边框或其他样式，它就会失去那种漂亮的 Windows 阴影圆角默认外观，并且如果不使用图像就无法恢复它！

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

于 2012-07-26T18:40:08.623 回答
0

您需要了解CSS 特异性是如何工作的。您可以覆盖任何 CSS 规则，使其比其他规则更具体。

例如：

<div class="content">
    <div class="wrapper"><span>Hello World</span></div>
</div>

CSS：

.content .wrapper span { ... }
.wrapper span { ... }

在这种情况下，第一个声明将覆盖第二个声明，因为它“更具体”。您通常可以只向上一级树并指定包装元素或包装类来覆盖内部元素的规则。这实际上是在处理许多 CMS 系统，例如 WordPress，在这些系统中您无法访问主样式表，或者只是想不理会它并重新设计您想要的部分。

看文章，很重要。

CSS 特异性：你应该知道的事情

于 2012-07-26T18:06:10.283 回答