HTML“样式”标记不起作用

时间:2017-09-14 05:08:32

标签: html css microsoft-edge

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

BTW,我在Windows的“Edge”浏览器中运行了这个。怎么了? 这段代码工作正常,直到昨天,但现在css不起作用。在w3schools或codepen中有什么变化吗?有类型吗?请帮忙。

4 个答案:

答案 0 :(得分:2)

首先:使用head 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;
  }

我希望第二次第三次为您提供帮助。

<强>:)

答案 1 :(得分:0)

它在codepen中正常工作。

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

OR

清除缓存和Cookie然后加载页面

OR

尝试硬核版本控制,例如在网址中添加?1?之后的任何内容,然后点击网址。 e.g。

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

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

  

Style

中使用<head>

答案 2 :(得分:0)

这可能是一种预感,但你说它一直工作到昨天。尝试清除你的 浏览器缓存。 https://support.microsoft.com/en-us/help/10607/microsoft-edge-view-delete-browser-history 希望这有帮助!

答案 3 :(得分:-2)

你的错误是你的身体标签背景颜色属性中的分号

 body{
   background-color: lavenderblush;
  }