外部样式表不起作用

Question

I'm working on a project for school (we have to code for a calculator), and we're using external CSS for the first time.我正在为学校做一个项目（我们必须为计算器编写代码），我们第一次使用外部 CSS。 I've been trying for an hour, but I guess my external CSS isn't linking properly?我已经尝试了一个小时，但我猜我的外部 CSS 没有正确链接？ The calculator just shows up without any styling at all.计算器只是显示，没有任何样式。

<!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>

The style sheet:样式表：

  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

if the style sheet file is in same folder, add a forward slash: <link rel="stylesheet" type="text/css" href="/calcstyle.css">如果样式表文件在同一文件夹中，请添加正斜杠： <link rel="stylesheet" type="text/css" href="/calcstyle.css">
the file name is usually case sensitive, so ensure you are using the exact same name.文件名通常区分大小写，因此请确保使用完全相同的名称。 Also check for spaces in your code or file name.还要检查代码或文件名中的空格。

Answer 2

I think it has something to do with what kind of platform you're using.我认为这与您使用的平台类型有关。

When I was using "wampserver" and PHP, I did it your way and of course it worked.当我使用“wampserver”和 PHP 时，我按照您的方式进行操作，当然它奏效了。

But now I'm using Visual Studio Code.但现在我正在使用 Visual Studio Code。 I tried the same way, but it didn't work at all.我尝试了同样的方法，但它根本不起作用。 The following is my link within the :以下是我的链接：

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

Here my shop.css file is in the "css" folder, which in turn is in the "public" folder.这里我的 shop.css 文件位于“css”文件夹中，而该文件夹又位于“public”文件夹中。 No matter what I did, it just didn't work.无论我做什么，它都不起作用。

Then I learned that I had to set the path in my app.js file in the following way:然后我了解到我必须通过以下方式在我的 app.js 文件中设置路径：

       app.use(express.static(path.join(__dirname, 'public')));

I'm not sure what kind of platform you're using, but I'm afraid that your problem is similar to mine.我不确定您使用的是哪种平台，但恐怕您的问题与我的相似。

This is just a reminder.这只是一个提醒。

Hope it can be of any help.希望它可以有任何帮助。

Answer 3

I incorrectly pointed out that the unclosed link element might be the issue.我错误地指出未关闭的链接元素可能是问题所在。

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

外部样式表不起作用

问题描述

3 个解决方案

解决方案1
0 2016-02-27 20:40:30

解决方案2
0 2019-12-19 19:19:05

解决方案3
-1 2016-02-27 20:36:37

外部样式表不起作用

问题描述

3 个解决方案

解决方案1 0 2016-02-27 20:40:30

解决方案2 0 2019-12-19 19:19:05

解决方案3 -1 2016-02-27 20:36:37

解决方案1
0 2016-02-27 20:40:30

解决方案2
0 2019-12-19 19:19:05

解决方案3
-1 2016-02-27 20:36:37