Fatal编程技术网
  • html/
  • Html 为什么chrome浏览器中的CSS文件有问题？

Html 为什么chrome浏览器中的CSS文件有问题？

html css

Html 为什么chrome浏览器中的CSS文件有问题？,html,css,Html,Css,我对HTML、CSS和JS非常陌生。 我刚刚在youtube上观看了制作“石头剪刀”游戏网站的讲座。 在非常早期的阶段，当我制作CSS文件时，我会陷入困境。 像这样 @import url('https://fonts.googleapis.com/css2?family=Asap:wght@600&display=swap'); *{ margin: 0; padding : 0; box-sizing: border-box; } header{

我对HTML、CSS和JS非常陌生。 我刚刚在youtube上观看了制作“石头剪刀”游戏网站的讲座。 在非常早期的阶段，当我制作CSS文件时，我会陷入困境。 像这样

@import url('https://fonts.googleapis.com/css2?family=Asap:wght@600&display=swap');

*{
    margin: 0;
    padding : 0;
    box-sizing: border-box;
}

header{
    background : white;
    padding: 20px;
}

header > h1{
    color :  #25272E;
    text-align: center;
    font-family: Asap, sans-serif;
}

body{
    background-color: #25272E;
}

.score-board{
    margin : 20px auto;
    border : 3px solid white;
    border-radius: 4px;
    width : 200px;
    text-align: center;
    color : white;
    font-size: 40px;
    padding : 15px 20px; /*top-bottom left-right */
    font-family: Asap, sans-serif;
    position : relative;
}
.badge{
    background : #E2584D;
    color: white;
    font-size: 14px;
    padding : 2px 10px;
    font-family: Asap, sans-serif;

}

#user-label{
    position : absolute;
    top: 0px;
    left : 0px;
}
在我的HTML文件中，我只是将它添加到标题中。 就像这样，我学会了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Rock Paper Sissors Game</title>
        <link rel="stylesheet" type="text/css" href="css/page_styles.css">
    </head>
    <body>
        <header>
            <h1>Rock Paper Sissors</h1>
        </header>
        <div class="score-board">
            <div id = "user-label" class="badge">user</div>
            <div id = "computer-label"class="badge">comp</div>
            <span id="user-score">0</span>:<span id="computer-score">0</span>
        </div>
        <div class="result">
            <p>Paper covers Rock. You Win!</p>
        </div>
        <div class="choices">
            <div class="choice" id="r">
                <img src="images/hand_rock.png" alt="">
            </div>
            <div class="choice" id="p">
                <img src="images/hand_paper.png" alt="">
            </div>
            <div class="choice" id="s">
                <img src="images/hand_sissors.png" alt="">
            </div>
        </div>
        <p id="action-message">Make your move</p>
    </body>
</html>


摇滚纸剑术游戏
石纸剑麻
用户
公司
0:0
纸盖石头。你赢了


采取行动
我仔细检查了文件的位置，没有任何问题。 但是，每当我启动HTML文件时，我的页面样式根本不会改变。 我第一次通过Chrome中的检查功能检查HTML的源代码。 是这样的

但当我重新加载页面时，CSS源文件就变成了这样

我真的不知道为什么我的CSS文件不能在Chrome浏览器中工作。 因为在微软的边缘，问题并没有出现

我的Html CSS图像：

我的chrome屏幕：

当我按下F4（重新加载页面）时：

看起来我的CSS文件已经不见了。

好的，首先你的CSS文件很好，一点都没有。要查找并签出CSS文件，请转到编辑器并导航到CSS链接：

<link rel="stylesheet" href="assets/css/style.css">
另一件事是，由于您正在使用开发人员工具对文件进行更改，这里有一个提示，请使用此功能使更改也应用于您的本地副本

1-导航到要覆盖的源>覆盖>选择文件夹（您的项目文件夹）

2-确保检查了本地超控

3-选择要编辑的文件，然后保存更改并重新加载更改，同时本地副本也已更改

我不确定这是否是你想说的。但无论如何，我希望这是有帮助的。

好的，首先你的CSS文件很好，它一点也没有消失。要查找并签出CSS文件，请转到编辑器并导航到CSS链接：

<link rel="stylesheet" href="assets/css/style.css">
另一件事是，由于您正在使用开发人员工具对文件进行更改，这里有一个提示，请使用此功能使更改也应用于您的本地副本

1-导航到要覆盖的源>覆盖>选择文件夹（您的项目文件夹）

2-确保检查了本地超控

3-选择要编辑的文件，然后保存更改并重新加载更改，同时本地副本也已更改

我不确定这是否是你想说的。但无论如何，我希望这会有所帮助。

您是否尝试过在“css”之前添加“/”？那将是我的第一次guess@Maharkus在CSS不起作用之前添加“/”，它甚至无法与Html链接。截至2020年3月，Chrome=Edge（相同的代码库），因此肯定有其他问题，请发布一个…@RenevanderLende我没有升级Edge版本，因此双方的结果都不同。您仍然需要发布一个。SO的人是不会猜的<代码>背景：红色（最好是背景颜色：红色）是更改背景颜色的正确方法。使用SO问题编辑器中的[]按钮添加运行代码。是否尝试在“css”之前添加“/”？那将是我的第一次guess@Maharkus在CSS不起作用之前添加“/”，它甚至无法与Html链接。截至2020年3月，Chrome=Edge（相同的代码库），因此肯定有其他问题，请发布一个…@RenevanderLende我没有升级Edge版本，因此双方的结果都不同。您仍然需要发布一个。SO的人是不会猜的<代码>背景：红色（最好是背景颜色：红色）是更改背景颜色的正确方法。使用SO问题编辑器中的[]按钮添加运行代码。感谢您的建议。不幸的是，它不起作用。有趣的是，每当我用InternetExplorer（raley使用）打开html文件时，它都运行得非常好。但当我用Chrome、FireFox、MicrosoftEdge（我刚刚更新过）打开它时，它不会运行。我认为CSS文件丢失了网络w/html文件。作为一个真正的网络开发语言初学者，我真的很沮丧…谢谢你的建议。不幸的是，它不起作用。有趣的是，每当我用InternetExplorer（raley使用）打开html文件时，它都运行得非常好。但当我用Chrome、FireFox、MicrosoftEdge（我刚刚更新过）打开它时，它不会运行。我认为CSS文件丢失了网络w/html文件。作为一个真正的网络开发语言初学者，我真的很沮丧。。。