外部CSS未应用,但相同的代码在粘贴为内部

时间:2015-05-14 20:27:33

标签: html css external

我是一个通过在线教程学习html / css方式的新手。只是现在我遇到了一个我无法解决的小问题,而且我已经尝试过对这个网站上的类似问题的建议等等。

正如标题所说,我的外部css文件似乎根本不起作用,但如果我在内部应用它,所述代码工作正常。我一直在重读试图发现错误的代码,但即使是css lint和codepen似乎也说我的资格过高,而不是其他。我尝试过使用类名,例如。攻击而不是td.Attack,但那没有用。

html基本上是一个包含一些图像的表,我只是尝试应用单个样式表。这是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>

我觉得我错过了一些完全明显的东西,我真的很感激你的帮助!

3 个答案:

答案 0 :(得分:1)

在你的链接元素更改中     REF =&#34;样式表&#34; to rel =&#34; stylesheet&#34;

注意&#39; f&#39;应该是&#39; l&#39;

答案 1 :(得分:0)

检查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"

答案 2 :(得分:0)

请遵循以下语法:

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

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