为什么嵌入样式呈现的效果与具有相同样式的链接 CSS 文件不同？

Question

我将 HTML 的样式部分复制到外部 CSS 文件中，并在新文件中添加了 link。然而，结果略有不同。某些标签现在似乎被忽略了，而其他标签工作正常。

Chrome 显示了继承的差异，但我不明白为什么。这是对违规 html 和 CSS 的 link：http://jsfiddle.net/n36xot86/

<body>
    <!-- Header Section -->
    <div class="form-style-1">
        <h1>The School Board of Sarasota County, Florida<span>Construction Services Department.</span></h1>

        <h2> Building Permit Application</h2>
        <!-- Permit Application Section -->
    </div>
</body>

来自 CSS 文件：

<style type="text/css">
        .form-style-1 {
            margin: 10px auto;
            max-width: 800px;
            padding: 20px 12px 10px 20px;
            font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        }

            .form-style-1 h1 {
                background: #2A88AD;
                padding: 20px 30px 15px 30px;
                margin: -30px -30px 30px -30px;
                border-radius: 10px 10px 0 0;
                -webkit-border-radius: 10px 10px 0 0;
                -moz-border-radius: 10px 10px 0 0;
                color: #fff;
                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
                font: normal 30px 'Bitter', serif;
                -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
                -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
                box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
                border: 1px solid #257C9E;
            }

                .form-style-1 h1 > span {
                    display: block;
                    margin-top: 2px;
                    font: 13px Arial, Helvetica, sans-serif;
                }
</style>

当我查看 chrome 中的页面时，我发现有些标签看到“.format-style-1”样式，而其他标签则看不到。请注意，角不是圆的。这是屏幕截图： http://imgur.com/cYd6DKP

Answer 1

我们最初对 HTML 中嵌入的样式进行编码，然后将 HTML 中的所有样式复制到外部 CSS 文件中。不幸的是，当我们从 HTML 中剪切样式时，我们在样式周围包含了 HTML 标签："style type="text/css"" 和 "/style"。

结果令人困惑。一些样式值起作用，而另一些则不起作用。它不仅显示未格式化的页面，还呈现了一些样式，这让我们相信 CSS 文件正在运行。

一旦我们从 CSS 中删除了 HTML 标签，它就完美地工作了。

为什么嵌入样式呈现的效果与具有相同样式的链接 CSS 文件不同？

Why does embedded style render different than linked CSS file with same styles?

html

css

html-rendering