Question

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

Chrome显示了继承的差异，但我无法弄清楚原因。以下是违规html和CSS的链接：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中的页面时，我可以看到一些标签看到＆＃34; .format-style-1＆＃34;风格和其他人没有。请注意，角落不是圆角。这是屏幕截图： http://imgur.com/cYd6DKP

Answer 1

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

结果令人困惑。一些样式值起作用，而另一些则没有。它不是仅显示未格式化的页面，而是呈现了一些使我们相信CSS文件正常工作的样式。

一旦我们从CSS中删除了HTML标签，它就能完美运行。

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

1 个答案: