Question

问题已经解决，感谢所有帮助过我的人。问题是我正在使用＆lt; .style＆gt; css文件中的标签，这是一个HTML标签，在css中无法正确读取，会发生各种各样的事情。

我正在为我的HTML课程完成一项作业，并进入.css进行外部设置。

我一直注意到的是，当我将一个代码块移动到其他位置时，我的整个网页都会发生变化，但我所感动的内容似乎“不再存在”。

我的css代码是

    <style>

    body { background-color: #6699ff;
            color: #d5e3ff;
            font-family: verdana; }

    header { background-color: #6699ff;
            color: #003366;
            font-family: serif; }

    h1 { line-height: 200%; }

    nav { font-weight: bold; }

    #category { font-style: bold;
            background-color: #6699ff;
            color: #003366;
            font-size: 1.1em; }

    footer { font-size: 0.60em;
            font-style: italic; }

    </style>

页面如下：http://i.imgur.com/eGthqWR.jpg

但是当我将身体移动到标题

的位置时

    <style>


    header { background-color: #6699ff;
            color: #003366;
            font-family: serif; }

    body { background-color: #6699ff;
            color: #d5e3ff;
            font-family: verdana; }

    h1 { line-height: 200%; }

    nav { font-weight: bold; }

    #category { font-style: bold;
            background-color: #6699ff;
            color: #003366;
            font-size: 1.1em; }

    footer { font-size: 0.60em;
            font-style: italic; }

    </style>

页面最终看起来像这样...... http://i.imgur.com/GxTfpTs.jpg

我真的很困惑为什么它只使用第二个“块”来实际获得页面的样子。

我可以在我的索引页面中编辑，如果你还需要查看它，但我很确定这只是我编写css文件的问题。

这是Index.html

<!DOCTYPE html>
<html lang="en">

<link rel= "stylesheet" href="fishcreek.css">

    <header>
        <title> Fish Creek Animal Hospital </title>
        <meta charset="utf-8">
        <h1> Fish Creek Animal Hospital </h1>
    </header>

        <nav>
            <a href="index.html">Home</a> &nbsp;
            <a href="services.html">Services</a> &nbsp;
            <a href="askvet.html">Ask the Vet</a> &nbsp;
            <a href="contact.html">Contact</a>
        </nav>

    <body>
    <dl>

        <dt><strong>Full Service Facility</strong></dt>
            <dd>Veterinarians and staff are on duty 24 hours a day, 7 days a week.</dd>
        <dt><strong>Years of Experience</strong><dt>
            <dd>Fish Creek Veterinarians have provided quality, dependable care for your <br>
            beloved animals since 1984.</dd>
        <dt><strong>Open door Policy</strong></dt>
            <dd>Our Professionals welcome owners to stay with their pets during any medical <br>
            procedure.</dd>
        <dl>
            1-800-555-5555 <br> 1242 Grassy Lane <br> Fish Creek, WI 55534
        </dl>

    </dl>
    </body>

    <footer>
    <small><i>Copyright &copy 2014 Fish Creek Animal Hospital <br>
    <a href="mailto:Johnathon@Olivas.com">Johnathon@Olivas.com</a></i>       </small>
    </footer>
</html>

如果有人知道我的错，或为什么它似乎这样做，我很想知道！在此先感谢-John

作为问题的临时解决方案，我能够添加一小段代码作为被跳过的“饲料”，并且标题现在按照预期的方式工作，其余的全部按计划进行！

THEFIX! {background-color: #6699ff;}

这就是我必须做的全部工作......有点儿，我只是希望我能弄明白如何摆脱“thefix”，以便在没有它的情况下工作。

感谢大家的帮助，对不起，措辞不是很好，可能没什么意义，但是......临时解决方法ftw

Answer 1

我尝试这样的事情，并更改标题和正文的顺序css代码，结果是相同的。

<!DOCTYPE html>
<html>
<head>
<style>

/*
body { background-color: #6699ff;
        color: white;
        font-family: verdana; }

header { background-color: #6699ff;
        color: red;
        font-family: serif; }
*/
header { background-color: #6699ff;
        color: red;
        font-family: serif; }
body { background-color: #6699ff;
        color: white;
        font-family: verdana; }


</style>
</head>
<body>

<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here.</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

</body>
</html>

Answer 2

你不应该在你的css文件中使用<style>和</style> - 它是一个html标签，而不是css语法。

你的案件中发生了什么：

您正在尝试将css规则应用于<style> body选择器或<style> header选择器，具体取决于顺序。你的HTML中没有这样的元素，所以它实际上并不适用你的第一条规则。

更改几行会产生不同的结果，即使它不应该

我的css代码是

但是当我将身体移动到标题

2 个答案: