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

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 {/props for h1/} h2{/props for h2/}。
提前致谢。

Answer 1

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

我想 visual studio 然后只会覆盖各个选择器的 必要 部分。例如，它想要 <h1> s 更大，所以它用 font-size: 1.6em 覆盖它.对于 <h3>字体大小为 1.2em 但 font-variant , font-weight , text-transform等不需要更改，因此通过在页面的最开头设置“标准”，VisualStudio 不会重复所有其他样式，只会重复它想要覆盖的样式。

有些东西没有多大意义，比如设置 font-size属性(property) <h2>到 1.5em，因为这已经在顶部的标准化规则中完成，但我认为这更多是关于如何设置 VisualStudio 来处理这些规则的问题(它只是设置为以这种方式生成 CSS)作为反对成为“有意义”的东西。如果您手动编写 CSS，就不会像那样重复相同的规则。

我希望这是有道理的:)