Question

我已经仔细检查了我的HTML文件中链接CSS文件的语法，这对我来说都是正确的。当我查看HTML页面的页面源时，确实可以正确链接到CSS页面。但是这些造型似乎都没有出现。我很确定CSS文件的链接很好，但是我无法理解为什么没有出现任何变化。

HTML文件：

<!DOCTYPE html>
<html>
<head>
    <!--title to appear on the tab of the browser-->
    <title>Midterm: Hangman</title>

    <!--linking a CSS style sheet for the page--> 
    <link rel="stylesheet" type="type/css" href="hangman.css">

    <!--running the hangman game-->
    <script src="hangman.js"></script>
</head>

<!--run the main function from the javascript file when page is loaded-->
<body onload="javascript:hideWord()">
    <!--adding a title that will appear on the webpage-->
    <h1>Hangman</h1>

    <!--create a text box, restrict to only one letter being able to be typed, create placeholder text-->
    <input id="guessedLetter" type="text" maxlength="1" minlength="1" placeholder="Guess a letter" />

    <!--create a button to submit guessed letter and run the compareLetter function when clicked-->
    <button type="button" onclick="javascript:compareLetter()">Guess!</button>


    <button type="button" onclick="javascript:hideWord()">Restart</button>

    <!--underscores to hide the word that the player is guessing-->
    <div id="hiddenWord"></div>

    <!--a counter to keep track of number of player attempts-->
    <p id="counter"></p>

    <!--add instructions for the player-->
    <h2>Instructions</h2>
    <p>Put some instructions here!</p>

</body>
</html>

CSS FILE：

body {
    background: #2C2A30;
}

button[type=button] {
    background: #D94C47;
    font-family: Arial;
    padding: 5px 5px;
    font-size: 25px;
    border-radius: 5px;
    padding: 7px 12px;
    border: 1px solid #D94C47;
    color: white;
    font-weight: bold;
}

button[type=button]:hover {
    background: #FF7A61;
    border: 1px solid #FF7A61;
    color: #2C2A30;
}

SCREENSHOT的铬开发工具：

文件结构的屏幕截图：

Answer 1

你有一个错字：

<link rel="stylesheet" type="type/css" href="hangman.css">

应该是：

<link rel="stylesheet" type="text/css" href="hangman.css">

请注意type - ＆gt; text。

此外，在HTML5中，您根本不需要type属性，因此您可以拥有：

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

Answer 2

您应该使用<link rel="stylesheet" href="hangman.css">。

Answer 3

如果CSS页面链接到html页面，并且您没有看到更新，则可能是这是一个兑现问题。在Google Chrome中，右键点击该页面，然后点击“检查”。然后，在检查员打开的情况下，导航到地址栏附近的页面顶部，然后右键单击刷新图标。然后选择“清空缓存和硬重新载入”。

为什么CSS文件不显示？

3 个答案: