Question

我刚开始使用html和css，但我已经遇到了问题。我制作了一个html文件和一个小的css文件，但是当我进入浏览器时，我只看到了html的变化。

HTML：

    <!doctype html>

    <html>

        <head>

            <meta charset="utf-8"> 
            <title> INTAKE </title>
            <link rel="stylesheet" href="main.css" type="text/css"/>

        <head>  

        <body>

            <h1>Intake opdracht</h1>

            <p> <strong> <em> 
            Lorem ipsum dolor sit amet, mel te porro eirmod argumentum, has exerci laboramus voluptatibus at. 
            Unum congue legimus sea eu, has no luptatum percipitur. 
            Omnium eleifend voluptatibus has eu. 
            Usu commodo tamquam inermis ei. 
            Elitr aperiri consectetuer at usu, mundi mollis docendi pri et.
            </em> </strong> </p>

                <img src="images/html.png"
 onerror="this.src='http://www.moondoggiegraphics.com/html5.png';" width="300"/> 

            <p> <i> 
            Soleat facete audiam per eu, sed ex labores tractatos euripidis, quo ut delectus aliquando philosophia. 
            Cum aeque putent ad, amet legere quo in. 
            Inciderint theophrastus qui et, petentium eloquentiam qui te. 
            Nec ad brute nusquam accusam. 
            Duo eu vero commodo, noluisse oportere has ea, at solum debet omnes mea. 
            Mea aperiam bonorum efficiantur eu, te qui alii commodo numquam. 
            </em> </p>

                <img src="images/css.png" 
onerror="this.src='http://www.logotypes101.com/logos/194/830812341256B99B32E1A9F242BB9F5F/css3logo.png';"width="200"/>

            <p> <i> 
            At per esse eirmod omittam, odio omnis te sed. 
            Id pri graeci prodesset deseruisse, usu etiam eligendi adolescens ut. 
            Ex iudico quodsi vix, id pro exerci ignota, sententiae accommodare mel te. 
            Eos ad nisl velit vitae, vim sonet facilis conceptam et. 
            Eu has intellegam neglegentur, et nam sumo nusquam. Ut ubique luptatum volutpat vim, labitur sapientem mea ea. 
            </em> </p>

            <p> <em> 
            Autem saperet cum an. 
            In sit amet harum impetus. 
            Sit ornatus expetendis cu. 
            Nam diceret detraxit intellegam no. 
            </em> </p>

                <p> Bron van de <a href= "http://generator.lorem-ipsum.info/"> <b> Lorem ipsum tekst. </b> </a> </p>

        </body> 

    </html>

CSS：

@charset "utf-8";

p{
    text-align:center;
}

h1{
    background-color:yellow;
    text-align:center; 
}

我已添加了我的文件夹的图片。

https://imgur.com/RdTfesl

解决

问题不是我的代码，它是我的电脑上的东西，还不知道它是什么，但我在我的笔记本电脑上尝试了代码并且它有效。

Answer 1

确保您的css文件正确链接如下：

如果css文件与html文件在同一目录中，则：

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

如果css文件位于与html文件位于同一目录的css目录中，则：

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

如果css文件位于html文件上一级目录中，则：

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

../表示上面的一个目录（类似于在Windows中导航时点击BACK键）

另外，请确保正确关闭html上的所有代码：

<html>

    <head>

        <meta charset="utf-8"> 
        <title> INTAKE </title>
        <link rel="stylesheet" href="main.css" type="text/css"/>

    <head>  

    <body>

        <h1>Intake opdracht</h1>

    <p> <strong> <em> 
    Lorem ipsum dolor sit amet, mel te porro eirmod argumentum, has exerci laboramus voluptatibus at. 
    Unum congue legimus sea eu, has no luptatum percipitur. 
    Omnium eleifend voluptatibus has eu. 
    Usu commodo tamquam inermis ei. 
    Elitr aperiri consectetuer at usu, mundi mollis docendi pri et.
    </em> </strong> </p>

        <img src="images/html.png" onerror="this.src='http://www.moondoggiegraphics.com/html5.png';" width="300"/> 

    <p> <i> 
    Soleat facete audiam per eu, sed ex labores tractatos euripidis, quo ut delectus aliquando philosophia. 
    Cum aeque putent ad, amet legere quo in. 
    Inciderint theophrastus qui et, petentium eloquentiam qui te. 
    Nec ad brute nusquam accusam. 
    Duo eu vero commodo, noluisse oportere has ea, at solum debet omnes mea. 
    Mea aperiam bonorum efficiantur eu, te qui alii commodo numquam. 
    </em> </p>

        <img src="images/css.png" onerror="this.src='http://www.logotypes101.com/logos/194/830812341256B99B32E1A9F242BB9F5F/css3logo.png';"width="200"/>

    <p> <i> 
    At per esse eirmod omittam, odio omnis te sed. 
    Id pri graeci prodesset deseruisse, usu etiam eligendi adolescens ut. 
    Ex iudico quodsi vix, id pro exerci ignota, sententiae accommodare mel te. 
    Eos ad nisl velit vitae, vim sonet facilis conceptam et. 
    Eu has intellegam neglegentur, et nam sumo nusquam. Ut ubique luptatum volutpat vim, labitur sapientem mea ea. 
    </em> </p>

    <p> <em> 
    Autem saperet cum an. 
    In sit amet harum impetus. 
    Sit ornatus expetendis cu. 
    Nam diceret detraxit intellegam no. 
    </em> </p>

        <p> Bron van de <a href= "http://generator.lorem-ipsum.info/"> <b> Lorem ipsum tekst. </b> </a> </p>


    </body>
</html>

这是一个包含上述代码的jsfiddle：https://jsfiddle.net/e0d8my79/37/

Answer 2

我认为问题出在错误的HTML方案中。确保<html>和<head>已正确关闭：

<html>
    <head>
    </head>  

    <body>
    </body>
</html>

Answer 3

假设您正确放置了css链接，则可能需要删除浏览器缓存。只需尝试ctrl + f5。

如果是这种情况，你可能在css文件为空时在html文件中定义了css，在浏览器中打开了html文件。浏览器缓存了css文件。然后你开始编写你的CSS，但由于浏览器有旧css文件的缓存版本，你不能看到你的更改。

Answer 4

尝试将href属性更改为href =“。/ main.css”。

Answer 5

请检查您的css文件的扩展名。将更改文件名为main.CSS而不是main.css。您可以在FTP程序中或通过服务器上的命令行进行检查。

Answer 6

我刚刚在桌面上创建了2个文件，其中包含您的确切代码（一个HTML和一个CSS文件），而css正在完美地应用它。你试过多个浏览器吗？它对我来说在Google Chrome上运行良好。

我的CSS不适用于我的HTML文件

解决

6 个答案: