未应用外部 CSS，但粘贴为内部时相同的代码有效

Question

我是新手，正在通过在线教程学习 html/css 的方法。直到现在，我运行遇到了一个我不太清楚的小问题，并且我已经尝试从这个网站和更多网站上对类似问题提出建议。

正如标题所说，我的外部 css 文件似乎根本不起作用，尽管如果我在内部应用该代码，它就可以正常工作。我一直在重新阅读代码，试图找出错误，但即使是 css lint 和 codepen 似乎也只是说我有过多的元素，除此之外没有太多。我试过只使用 class 名称，例如.Attack 而不是 td.Attack，但这没有帮助。

html 基本上是带有一些图像的 table，我只是想应用一个样式表。这里是tcgdatabase.css

body {
    background-color:transparent;
    }

p {
    color:#2E2435;
    text-align:justify;
    }

td {
    text-align:left;
    }
td.Name {
    text-align:left;
    width:250px;
    font-size:30px;
    font-weight:bold;
    }
td.Type {
    width:50px;
    }
td.Stage {
    text-align:left;
    width:120px;
    font-size:15px;
    font-weight:bold;
    }
td.HP,td.AP {
    width:50px;
    font-style:italic;
    font-size:30px;
    }
span.Points {
    font-size:15px;
    }
td.Attack,td.BaseDamage {
    height:30px;
    font-weight:bold;
    font-size:20px;
    }
td.Effect,td.Flavour {
    text-align:justify;
    }
td.WRR,td.WRRType {
    height:20px;
    font-weight:bold;
    }
th {
    text-align:center;
    }

这里是 html 页面，我什至在其中留下了 css 以显示我是如何在内部添加它的：

<!DOCTYPE html>
    <html lang="en-GB">
        <head>
            <title>oddities</title>
            <meta charset="UTF-8">
            <link ref="stylesheet" type="text/css" href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css">
            <!--<style>
body {
    background-color:transparent;
    }

p {
    color:#2E2435;
    text-align:justify;
    }

td {
    text-align:left;
    }
td.Name {
    text-align:left;
    width:250px;
    font-size:30px;
    font-weight:bold;
    }
td.Type {
    width:50px;
    }
td.Stage {
    text-align:left;
    width:120px;
    font-size:15px;
    font-weight:bold;
    }
td.HP,td.AP {
    width:50px;
    font-style:italic;
    font-size:30px;
    }
span.Points {
    font-size:15px;
    }
td.Attack,td.Base Damage {
    height:30px;
    font-weight:bold;
    font-size:20px;
    }
td.Effect,td.Flavour {
    text-align:justify;
    }
td.WRR,td.WRRType {
    height:20px;
    font-weight:bold;
    }
th {
    text-align:center;
    }
            </style>-->
        </head>
        <body>
            <table style="width:100%">
                <tr>
                    <td rowspan="9" style="width:420px"><img src="CacturneR.png" style="width:350px"></td>
                    <td class="Type"><img src="Energy Types/Dark.png" style="width:40px"></td>
                    <td class="Stage">Legendary</td>
                    <td class="Name">Yveltal</td>
                    <td class="HP">110<span class="Points">HP</span></td>
                    <td class="AP">0<span class="Points">AP</span></td>
                </tr>
                <tr>
                    <td class"AttackCost" colspan="2">
                        <img src="Energy Types/Dark.png" style="width:30px">
                        <img src="Energy Types/Colourless.png" style="width:30px">
                    </td>
                    <td class="Attack" colspan="2">Take In</td>
                    <td class="BaseDamage"><td>
                </tr>
                <tr>
                    <td class="Effect" colspan="5">
                        Attach up to 3 Pokémon from your hand to this Pokémon and heal 10 damage from this 
                        Pokémon times the number of Pokémon cards just attached in this way. Each Pokémon attached 
                        in this way provides 1 Energy of their type at a time (If they have more than 1 type, 
                        they provide Energy of each of their types, but only 1 at a time).
                    </td>
                </tr>
                <tr>
                    <td class"AttackCost" colspan="2">
                        <img src="Energy Types/Dark.png" style="width:30px">
                        <img src="Energy Types/Dark.png" style="width:30px">
                        <img src="Energy Types/Colourless.png" style="width:30px">
                        <img src="Energy Types/Colourless.png" style="width:30px">
                    </td>
                    <td class="Attack" colspan="2">Riot Ballista</td>
                    <td class="BaseDamage"><td>
                </tr>
                <tr>
                    <td class="Effect" colspan="5">
                        Discard 1 card attached to this Pokémon. If that card is a Pokémon, this 
                        attack does damage equal to the discarded Pokémon's HP. If it is not a 
                        Pokémon, this attack does 50 damage and this Pokémon does 50 damage to 
                        itself.
                    </td>
                </tr>
                <tr>

                    <td class="WRRType"><img src="Energy Types/Fairy.png" style="width:25px"></td>
                    <td class="WRR">weakness: x2</td>   
                    <td class="Flavour" colspan="3" rowspan="3">
                        "This terrible beast has long since turned a blind eye to the havoc it 
                        wreaks in its wake" - Anon.
                    </td>
                <tr>
                    <td class="WRRType"><img src="Energy Types/Fighting.png" style="width:25px"></td>                   
                    <td class="WRR">resistance: -20</td>
                </tr>
                <tr>                    
                    <td class="WRRType"><img src="Energy Types/colourless.png" style="width:25px"></td>                 
                    <td class="WRR">retreat cost: x2</td>   
                </tr>
                <tr>
                    <td class="Illus" colspan="3">Illus. NavaskaIII</td>
                    <td class="SetNumber">??/??</td>
                    <td class="Rarity">UR</td>
                </tr>
            </table>
        </body>
    </html>

我觉得我遗漏了一些非常明显的东西，非常感谢您的帮助！

Answer 1

检查 CSS 文件的路径。我建议使用文件的相对路径。

将 href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css" 更改为 href="/path/to/JBSet1/tcgdatabase.css"。

如果 CSS 文件与 HTML 文件在同一个文件夹中，您可以只使用 href="tcgdatabase.css".

编辑：

如上所述，也将 ref="stylesheet" 更改为 rel="stylesheet"。

Answer 2

在您的 link 元素中更改 ref="stylesheet" 到 rel="stylesheet"

注意 'f' 应该是 'l'

Answer 3

遵循以下语法：

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

css 文件的路径必须是相对路径或绝对路径..

未应用外部 CSS，但粘贴为内部时相同的代码有效

External CSS not being applied, but same code works when pasted as Internal

html

css

external