了解UA StyleSheets和CSS3初始值

最新推荐文章于 2022-03-17 10:56:38 发布

cungui5726

最新推荐文章于 2022-03-17 10:56:38 发布

阅读量217

点赞数

文章标签： css html web js css3 ViewUI

原文链接：https://thenewcode.com/345/Understanding-UA-StyleSheets-and-the-CSS3-initial-Value

版权

Imagine that you build a page using only HTML, with no CSS attached or applied. When you render the page in a browser, how does the program know to display links as blue and underlined, and paragraphs as black? Why is the margin for h1 elements 14pt in IE by default, and 0.67em in Firefox?

假设您仅使用HTML构建页面，而没有附加或应用CSS 。在浏览器中呈现页面时，程序如何知道将链接显示为蓝色和带下划线的段落，将段落显示为黑色？为什么默认情况下，IE中h1元素的margin默认为14pt ，而在Firefox中为0.67em ？

The answer to these questions is User Agent stylesheets. UA stylesheets are CSS files built into the browser. Each browser has its own UA file, which it uses to determine how to render every website, unless the browser is explicitly told otherwise.

这些问题的答案是用户代理样式表。 UA样式表是浏览器内置CSS文件。 除非明确告知浏览器 ，否则每个浏览器都有自己的UA文件，该文件用于确定如何呈现每个网站。

The way we tell the browser to use the site’s CSS, rather than the UA styles, is by linking or embedding a stylesheet to a page, or by using inline styles. The browser then makes a simple decision:

我们告诉浏览器使用网站CSS而不是UA样式的方法是，将样式表链接或嵌入到页面中，或者使用内联样式。然后，浏览器做出一个简单的决定：

If the new styles conflict with the browser’s UA stylesheet rules, the site’s style declaration will be used when rendering the element.
如果新样式与浏览器的UA样式表规则冲突，则在呈现元素时将使用网站的样式声明。
Anything the site style rules don’t specify will be assumed by the UA stylesheet.
UA样式表将假定网站样式规则中未指定的任何内容。

This leads developers to create mammoth reset stylesheets that attempt to set every CSS property to a shared default value; applied to a web page, this effectively wipes out any effect of a UA stylesheet. The designer/developer can then build custom CSS for the site, somewhat assured that browsers will not unexpectedly assume a value for some property they have left unspecified. (You can see the UA CSS for IE, Opera at IEcss.com; reading the UA stylesheet for Firefox is easier: just type resource://gre-resources/html.css into the URL bar)

这导致开发人员创建庞大的重置样式表，尝试将每个CSS属性设置为共享的默认值。应用于网页，这可以有效消除UA样式表的任何影响。然后，设计人员/开发人员可以为该网站构建自定义CSS，这可以一定程度地保证浏览器不会意外地假定自己未指定的某些属性的值。 (您可以在IEcss.com上查看IE的UA CSS， Opera ；阅读Firefox的UA样式表更为简单：只需在URL栏中键入resource：//gre-resources/html.css即可 )

CSS Resets are not without controversy; as I have discussed, I personally prefer a less heavy-handed approach. For example:

CSS重置并非没有争议。正如我已经讨论过的，我个人更喜欢一种不那么笨拙的方法。例如：

<div style="color: red;">
	<p>This is some text <span>in color.</span>
</div>

The color of the paragraph text, inherited from the parent <div>, will be red. What if we wanted to set the text inside the span to black? There are two choices. The traditional approach is this:

从父<div>继承的段落文本的颜色将为红色。如果我们想将跨度内的文本设置为黑色怎么办？有两种选择。传统方法是这样的：

<div style="color: red;">
	<p>This is some text <span style="color: #000;">in color.</span>
</div>

There is also a second option:

还有第二种选择：

<div style="color: red;">
	<p>This is some text <span style="color: initial">in color.</span>
</div>

initial is a value that resets a property back to the default UA style. This can be particularly useful when the style you wish to negate may be, long, complex, or difficult to remember:

initial是一个将属性重置为默认UA样式的值。当您希望否定的样式过长，复杂或难以记住时，此功能特别有用：

div {
	border: 3px dotted green;
}
div.special {
	border: initial;
} 
/* resets the border on divs with a class of “special” to that specified in the UA, i.e. no border; } */