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

标签 html css

我刚开始使用 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


已解决

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

最佳答案

确保您的 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/

关于html - 我的 CSS 不适用于我的 HTML 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29431278/

相关文章:

javascript - jQuery 和 HTML : Script works from console yet does not run from file or &lt;script&gt;&lt;/script&gt;

html - Bootstrap 3 网格行跨度

html - 显示变化破坏不透明度过渡

html - 将 div 对齐到页面中心,而它的位置是绝对的?

javascript - 在鼠标悬停时显示不同的、更大的照片

css - 网站发布时提供的 MVC 应用程序模板圆 Angular 消失

悬停时的Html选择框选项?

css - 如何创建纯 CSS 3 维球体?

html - 如何在 Flexbox 容器中移动右侧的 div 而不移动左侧的 div?

javascript - html 5 验证不适用于 google invisible recaptcha