时间戳

首页 > 解决方案 > HTML文件不想与css链接不是因为文件位置错误

html - HTML文件不想与css链接不是因为文件位置错误

问题描述

我最近创建了一个小项目来创建一个简单的计算器。但是，我无法将我的 HTML 连接到 CSS 文件中。我检查了文件的位置和 css 的名称，一切都是正确的。有谁知道为什么连接不上？

我将我的 html 文件命名为 index.html，并将我的 css 文件命名为 stylsheet.css

这是我的文件位置：

[我的文件位置的屏幕截图][1]

这是我在这个项目中使用的代码

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kalkulator</title>
    <link rel="stylesheet" type="css" href="stylesheet.css">
</head>
<body>
<div class="calculator">
    <input type="text" name="calculator-screen" value="0" disabled>
    <div class="calculator-keys">
        <div class="row">
            <button class="all-clear">AC</button>
            <button class="precentage">%</button>
            <button class="operator" value="/">&divide;</button>
        </div>  
        <div class="row">
            <button class="number" value="7">7</button>
            <button class="number" value="8">8</button>
            <button class="number" value="9">9</button>
            <button class="operator" value="*">&time;</button>
        </div>
        <div class="row">
            <button class="number" value="4">4</button>
            <button class="number" value="5">5</button>
            <button class="number" value="6">6</button>
            <button class="operator" value="-">-</button>
        </div>
        <div class="row">
            <button class="number" value="1">1</button>
            <button class="number" value="2">2</button>
            <button class="number" value="3">3</button>
            <button class="operator" value="+">+</button>
        </div>
        <div class="row">
            <button class="number zero-btn" value="0">0</button>
            <button class="decimal" value="0">.</button>
            <button class="equal-sign">=</button>
        </div>
    </div>
</div>
<script type="javascript" src="script.js"></script>
</body>
</html>

CSS 代码：

.calculator {
    text-align: center;
    margin: 0 auto;
    padding-top: 200px;
    width: 400px;
}

.calculator-screen {
    width: 100%;
    height: 100px;
    background-color: #252525;
    color: #fff;
    text-align: right; 
    font-size: 36px;
    border: none;
    padding: 0 20px;
    box-sizing: border-box;
}

.calculator-keys {
    width: 100%;
}

.row {
    display: flex;
}

button{
    height: 80px;
    background-color: gray;
    border: 1px solid black;
    font-size: 32px;
    color: #fff;
    width: 25%;
    outline: none;
}

all-clear, .zero-btn {
    width: 50%
}

.operator, .equalsign {
    background-color: orange;
}

button:hover {
    background-color: darkgrey;
}

.operator:hover, .equalsign:hover {
    background-color: darkorange;
}

欢迎任何帮助，谢谢~

标签： htmlcssfile

解决方案

解决了！看起来我使用了不正确的代码

不正确的代码：

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

它应该是：

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

仍然不知道为什么，但这可能是由于我使用的不同类型的 html 版本引起的（假设）

编辑：对于你们中的一些人来说，这没什么不同。

如果我使用所谓的“错误”的 html 行，这就是 web 视图： <link rel="stylesheet" type="css" href="stylesheet.css">

如果我使用正确的 html 行，这是 Web 视图： <link href="stylesheet.css" rel="stylesheet">

正如我所说，我不知道为什么，但如果我使用基于图片 2 的代码行，它会显示一个纯 html。但如果我使用基于图片 3 的代码行，它会显示 css 文件。

推荐阅读