Question

我注意到Visual Studio 2010在其默认项目中使用以下代码创建了一个文件 Site.css ：

/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}


h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

我不明白为什么有一个部分为所有标题设置了相同的属性，即h1，h2，h3等。然后每个标题分别给出属性，即h1 {/ 支持h1 /} h2 {/ 支持h2 /}。
提前谢谢。

Answer 1

首先为所有标题选择器创建一套标准化的规则，这意味着它们在整个设计中看起来都是一致的。

我认为visual studio只会覆盖个别选择器的必要部分。例如，它希望<h1>更大，因此它会覆盖font-size: 1.6em。对于<h3>，字体大小为1.2em，但font-variant，font-weight，text-transform等不需要更改，因此通过设置＆＃ 39;标准＆＃39;在页面的最开始，VisualStudio不会重复所有其他样式，只重复它想要覆盖的样式。

有些事情没有多大意义，例如将font-size上的<h2>属性设置为1.5em，因为这已在顶部的标准化规则中完成，但是我认为这更像是VisualStudio如何设置来处理这些规则的问题（它只是设置为以这种方式生成CSS），而不是那些有意义的东西＆＃39 ;。如果你手工编写你的CSS，你就不会重复相同的规则。

我希望这有点道理：）

Answer 2

这可以防止适用于所有类型标题的规则被复制。这是一种标准的方法。您也可以将顶部集中的规则放入所有特定规则集中。但这是一个更长的代码，更难修改。

顶部集内的规则适用于所有逗号分隔的标题类型。这样，您只需要在特定规则集内进一步指定这些特定于此类标题的规则。

Answer 3

因为在这个选择器h1，h2，h3，h4，h5，h6中你拥有的属性等于所有这些属性，所有其他属性只有一个被选中，可能就是这种情况吗？

Answer 4

第一部分h1, h2, h3, h4, h5, h6将代码应用于所有标题，在下面的部分中，某些属性会被特定标记覆盖。所以这意味着，所有标题都会得到，例如color: #666666;和font-weight: 200;。所有标题的颜色保持不变，但是字体权重200会被覆盖为h2（600），但不会覆盖其他标题。它停留在200。

这样，第一部分中的属性只需要写一次，而不是每个标题。为所有标题指定了字体大小，因此可以在第一部分中省略。

对所有标题使用相同的CSS规则

4 个答案: