Question

我正在为学校做一个项目（我们必须为计算器编写代码），我们第一次使用外部CSS。我已经尝试了一个小时，但我想我的外部CSS没有正确连接？计算器只显示没有任何样式。

<!DOCTYPE html>
<html>
<head>
    <title>My Crazy Calc</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>

<h1>My Crazy Calculator<h1>
<form name="calc">
<table>
<tr>
    <td colspan="4"><input class="textfield" type="text" name="input" ></td>
</tr>
<tr>
    <td><input type="reset" value="clear" onclick="calc.input.value+='reset'"></td>
    <td><input type="button" value="M" onclick="calc.store.value=calc.input.value;calc.input.value=''"></td>
    <td><input type="button" value="MR" onclick="calc.input.value+=calc.store.value"></td>
    <td><input type="button" value="/" onclick="calc.input.value+='/'"></td>
</tr>
<tr>
    <td>
    <input type="button" value="7" onclick="calc.input.value+='7'">
    </td>
    <td>
    <input type="button" value="8" onclick="calc.input.value+='8'">
    </td> 
    <td>
    <input type="button" value="9" onclick="calc.input.value+='9'">
    </td>
    <td>
    <input type="button" value="*" onclick="calc.input.value+='*'">
    </td>
</tr>
<tr>
    <td>
    <input type="button" value="4" onclick="calc.input.value+='4'">
    </td>
    <td>
    <input type="button" value="5" onclick="calc.input.value+='5'">
    </td>
    <td>
    <input type="button" value="6" onclick="calc.input.value+='6'">
    </td>
    <td>
    <input type="button" value="-" onclick="calc.input.value+='-'">
    </td>
</tr>
<tr>
    <td><input type="button" value="1" onclick="calc.input.value+='1'"></td>
    <td><input type="button" value="2" onclick="calc.input.value+='2'"></td>
    <td><input type="button" value="3" onclick="calc.input.value+='3'"></td>
    <td><input type="button" value="+" onclick="calc.input.value+='+'"></td>
</tr>
<tr>
    <td colspan="2"><input  type="button" value="0" onclick="calc.input.value+='0'"></td>
    <td colspan="2"><input type="button" value="=" onclick="calc.input.value=eval(calc.input.value)"></td>
</tr>
<tr>
    <td><input type="button" value="." onclick="calc.input.value+='.'"></td>
    <td><input type="button" value="sin" onclick="calc.input.value=Math.sin(calc.input.value*Math.PI/180)"></td>
    <td><input type="button" value="cos" onclick="calc.input.value=Math.cos(calc.input.value*Math.PI/180)"></td>
    <td><input type="button" value="tan" onclick="calc.input.value=Math.tan(calc.input.value*Math.PI/180)"></td>
</tr>
<tr>
    <td><input type="button" value="|x|" onclick="calc.input.value=Math.abs(calc.input.value)"></td>
    <td><input type="button" value="log(x)" onclick="calc.input.value=Math.log(calc.input.value)"></td>
    <td><input type="button" value="sqrt(x)" onclick="calc.input.value=Math.sqrt(calc.input.value)"></td>
    <td><input type="button" value="e^x" onclick="calc.input.value=Math.exp(calc.input.value)"></td>
    <td><input type="hidden" name="store"></td>
</tr>
</form>

</body>
</html>

样式表：

  body {
       background-color: black; 
        }

    h1 {
       color:white;
       text-align:center;
       font-family:calibri;
     }

   table{
       margin-left:auto;
       margin-right:auto;
       border:3px solid blue;
       border-radius:25px;
     }

Answer 1

如果样式表文件位于同一文件夹中，请添加正斜杠： <link rel="stylesheet" type="text/css" href="/calcstyle.css">
文件名通常区分大小写，因此请确保使用完全相同的名称。还要检查代码或文件名中的空格。

Answer 2

我认为这与您使用的平台类型有关。

当我使用“ wampserver”和PHP时，我按您的方式做了，当然可以。

但是现在我正在使用Visual Studio Code。我尝试了相同的方法，但是根本没有用。以下是我的链接：

payee

在这里，我的shop.css文件位于“ css”文件夹中，而该文件夹又位于“ public”文件夹中。不管我做什么，都没用。

然后，我了解到必须通过以下方式在app.js文件中设置路径：

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

我不确定您使用的是哪种平台，但恐怕您的问题与我的类似。

这只是一个提醒。

希望对您有帮助。

Answer 3

我错误地指出未关闭的链接元素可能是问题。

<!DOCTYPE html>
    <html>
    <head>
        <title>My Crazy Calc</title>
        <link rel="stylesheet" type="text/css" href="calcstyle.css"/>
    </head>

外部样式表不起作用

3 个答案: