HTML "style“标记不起作用

Question

我在w3schools的在线编辑器和codepen的笔式编辑器中尝试了以下代码。以下是代码。

​

body {
 background-color: lavenderblush
}
.red-text {
  color: red;
}
h1 {
  font-family: Tangerine, times new roman;
  font-size: 55px;
}
p {
  font-size : 18px;
  font-family: inconsolata;
} 
.thick-salmon-border {
  border-color: salmon;
  border-width: 5px;
  border-style: solid;
  border-radius: 50%;
}
.smaller-image {
  width: 120px;
  height: 120px;
}

.thick-royalblue-border {
  border-color: royalblue;
  border-width: 5px;
  border-style: solid;
  border-radius: 50%;
}
.thick-green-border {
  border-color: green;
  border-width: 5px;
  border-style: solid;
  border-radius: 50%;
}

.thick-sandybrown-border {
  border-color: sandybrown;
  border-width: 5px;
  border-style: solid;
  border-radius: 50%;
}
.thick-lightpink-border {
  border-color: lightpink;
  border-width: 5px;
  border-style: solid;
  border-radius: 50%;
}
.thick-rosybrown-border {
  border-color: rosybrown;
  border-width: 5px;
  border-style: solid;
  border-radius: 50%;
}
.box {
  border-style: solid;
  border-color: rosybrown;
  border-width: 5px;
}
 .AntiqueWhite-box {
  background-color: AntiqueWhite;
  padding: 20px;
  margin: 20px;
}
 .MistyRose-box {
  background-color: MistyRose;
  padding: 20px;
  margin: 20px;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<h1 class="red-text font-effect-shadow-multiple">My Favorite Songs</h1>
<p>
    <a href="https://en.wikipedia.org/wiki/Ed_Sheeran"><img class="smaller-image thick-salmon-border" src="http://cdn3.thr.com/sites/default/files/2015/07/ed_sheeran.jpg" alt="My Favorite Songs"></a>
    <a href="https://en.wikipedia.org/wiki/Shape_of_You"><img class="smaller-image thick-royalblue-border" src="https://images.genius.com/fc44439c55552eb23d4a9ecb28a21f06.1000x1000x1.jpg " alt="My Favorite Songs"></a>
    <a href="https://en.wikipedia.org/wiki/Thinking_Out_Loud"><img class="smaller-image thick-green-border" src="https://upload.wikimedia.org/wikipedia/en/a/ad/X_cover.png" alt="My Favorite Songs"></a>
</p>
<div class=" box AntiqueWhite-box">
    <p>Ed Sheeran</p>
    <ul>
        <li><a href="https://www.musixmatch.com/lyrics/Ed-Sheeran/Shape-of-You">Shape of You</a></li>
        <li><a href="https://www.musixmatch.com/lyrics/Ed-Sheeran/Thinking-Out-Loud">Thinking Out Loud</a></li>
        <li><a href="https://www.musixmatch.com/lyrics/Ed-Sheeran/Galway-Girl">Galway Girl</a></li>
    </ul>
    <form action="/submit-Ed Sheeran" id="Ed Sheeran-form">
        <label>
            <input type="radio" name="reaction" checked>Like</label>
        <label>
            <input type="radio" name="reaction">Dislike</label>
        <label>
            <input type="radio" name="reaction">None of Above</label>
        <br>
        <label>
            <input type="checkbox" name="electronic devices" checked>Phone</label>
        <label>
            <input type="checkbox" name="electronic devices">Laptop</label>
        <label>
            <input type="checkbox" name="electronic devices">Mp3</label>
        <br>
        <input type="text" placeholder="Ed Sheeran URL">
        <button type="submit">Submit</button>
    </form>
</div>
<p>
    <a href="https://en.wikipedia.org/wiki/Adele"><img class="smaller-image thick-sandybrown-border" src="http://www.hellomagazine.com/imagenes//celebrities/2017080741334/adele-grenfell-tower-victims-screening/0-214-739/adele-t.jpg" alt="My Favorite Songs"></a>
    <a href="https://en.wikipedia.org/wiki/Rolling_in_the_Deep"><img class="smaller-image thick-lightpink-border" src="http://netstorage.metrolyrics.com/albums/2777347adele-21.jpg" alt="My Favorite Songs"></a>
    <a href="https://en.wikipedia.org/wiki/Hello_(Adele_song)"><img class="smaller-image thick-rosybrown-border" src="https://i.pinimg.com/736x/a9/95/9c/a9959c17c8260650136fdc4a7d8bb218--adele-in-concert-adele--album.jpg" alt="My Favorite Songs"></a>
    <p>
        <div class="box MistyRose-box">
            <p>Adele</p>
            <ul>
                <li><a href="https://www.musixmatch.com/lyrics/Adele-3/Rolling-in-the-Deep">Rolling In the Deep</a></li>
                <li><a href="https://www.musixmatch.com/lyrics/Adele-3/Someone-Like-You">Someone Like You</a></li>
                <li><a href="https://www.musixmatch.com/lyrics/Adele-3/Hello">Hello</a></li>
            </ul>
            <form action="/submit-Adele" id="Adele">
                <label>
                    <input type="radio" name="reaction" checked>Like</label>
                <label>
                    <input type="radio" name="reaction">Dislike</label>
                <label>
                    <input type="radio" name="reaction">None of Above</label>
                <br>
                <label>
                    <input type="checkbox" name="electronic devices" checked>Phone</label>
                <label>
                    <input type="checkbox" name="electronic devices">Laptop</label>
                <label>
                    <input type="checkbox" name="electronic devices">Mp3</label>
                <br>
                <input type="text" placeholder="Adele URL">
                <button type="submit">Submit</button>
            </form>
        </div>

​

顺便说一句，我是在windows的"Edge“浏览器中运行的。怎么了？直到昨天，这段代码都工作得很好，但是现在css不能工作了。w3schools或codepen中有什么变化吗？有没有O型？请帮帮忙。

Answer 1

First：使用头部标签(必填)：

    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">

    </style>
</head>

Second：使用如下样式代码(不是必需的)：

<style type="text/css" media="screen">

</style>

css Third：将;放在代码的末尾(在第6行的末尾)(不是必需的)：

 body {
   background-color: lavenderblush;
  }

我希望second和third能帮助你。

:)

Answer 2

在codepen中，它在我这一边工作正常。

您应该尝试硬刷新(ctrl+F5)

或

清除缓存和cookie，然后加载页面

或

尝试一个核心版本控制，例如在URL中的?后面添加?1或任何东西，然后点击URL。例如：

http://<your URL>.html?1

最佳实践是在<head >标记中使用样式和脚本，因为它将在页面之前加载，您将看到最佳设计。如果它没有得到解决，那么上面的解决方案将工作，如果它是缓存相关的问题。

在<head>

中使用Style

Answer 3

这可能是预感，但你说它直到昨天才起作用。请尝试清除浏览器缓存。https://support.microsoft.com/en-us/help/10607/microsoft-edge-view-delete-browser-history希望这能有所帮助！