HTML“樣式”標簽無效

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

首先 ：使用頭部taq（必填）：

    <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>

第二 ：使用這樣的樣式代碼（不是必需的）：

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

</style>

第三 ：擺放; 在您的CSS代碼末尾（第6行末尾）（不是必需的）：

 body {
   background-color: lavenderblush;
  }

希望第二和第三對您有幫助。

:)

Answer 2

在Codepen中，它在我這邊正常工作。

你應該嘗試硬刷新（Ctrl + F5）

要么

清除緩存和Cookie，然后加載頁面

要么

嘗試鐵桿版本如增加?1或之后的任何事情? 在URL中，然后點擊URL。 例如

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

最佳做法是在<head >標記中使用樣式和腳本，因為它會在頁面之前加載，並且您將看到最佳的設計。 如果仍未解決，則上述解決方案將在與緩存相關的問題時起作用。

在<head>使用Style

Answer 3

這可能是預感，但是您說它一直有效到昨天。 嘗試清除瀏覽器緩存。 https://support.microsoft.com/zh-cn/help/10607/microsoft-edge-view-delete-browser-history希望這會有所幫助！

Answer 4

您的錯誤是您的身體標簽background-color屬性中的分號

 body{
   background-color: lavenderblush;
  }