时间戳

首页 > 解决方案 > 将 CSS 文件链接到 HTML 是否有问题？

html - 将 CSS 文件链接到 HTML 是否有问题？

问题描述

关于我想做的事情的一点背景——最近我开始阅读 Jon Ducketts “HTML&CSS” 这本书，我非常喜欢。我完成了 HTML，现在开始本书的 CSS 部分。

我想要完成的是制作一个网站，展示本书所涵盖的所有内容，并且基本上有一个导航栏，让用户更容易访问我的网站，以了解他们（我自己）尚不清楚的主题。
问题是，当我尝试设置文本颜色的样式时，它并没有改变颜色，而且对于我的生活，我无法弄清楚为什么。
我的链接中的问题是我在头部指定的错误文件路径还是我如何在 HTML 和 CSS 中设置类的问题？

我的 CSS 代码位于我尝试创建类的页面底部。由于您需要“10 信誉”来发布照片，我将在这里写下我的 HTML/CSS 文件名和文件夹路径。

名称 - newWebsiteFinalCSS.css 文件夹路径 - C:\Users\MyName\Desktop\Website

名称 - newWebsiteFinal.html 文件夹路径 - C:\Users\MyName\Desktop\Website

.headingcolors {
  color: red;
}

.p {
  color: red;
}
<!doctype>

<html>

<head>

  <title>Final HTML CSS Website</title>



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

</head>



<!-- This section i want to create a link to different topics within my own website so it is easier to go throughout the site and 
    only look at things you want to be reasearching about if you come across a problem with a topic about HTML or CSS. -->


<header class="topnav">
  <a href="#home">Home</a>
  <a href="#text">Text</a>
  <a href="#lists">Lists</a>
  <a href="#links">Links</a>
  <a href="#images">Images</a>
  <a href="#tables">Tables</a>
  <a href="#forms">Forms</a>
  <a href="#extramarkup">Extra Markup</a>
</header>

<!-- insert navigation bar here -->


<body>


  <h1 id="top" class="headingcolors"> Welcome to my first Web Page created with HTML & CSS </h1>

  <p>//// During the process of making this website, I will be showing you how I learned to do simple webpage making with very easy to understand the code. This code includes languages called HyperText Markup Language (otherwise known as HTML), and a styling
    language called Cascading Style Sheets (otherwise known as CSS). This website was made possible by reading a book called <i>HTML&CSS; design 
and build websites</i> by Jon Duckett. I am a fan of Jon Duckett's book and it made me feel excited to read something that was so interesting and brought color to such a fundamental topic of learning a computer language. This website will be a work in
    progress with perfecting every single topic covered in HTML as well as styling my webpage and making it a professional looking website that any CEO or businessman would be interested in reading. I hope you enjoy browsing casually throughout my website and enjoying some of the topics as much as I did learning about them! ////</p>

  <h2 id="text" class="p">Texts</h2>
  <p>This is some text, hopefully i can figure out how to add color.</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h3 id="lists" class="p">Lists</h3>
  <p>This is some text, hopefully i can figure out how to add color.</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h4 id="links" class="p">Links</h4>
  <p>This is some text, hopefully i can figure out how to add color.</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h5 id="images" class="p">Images</h5>
  <p>This is some text, hopefully i can figure out how to add color.</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h6 id="tables" class="p">Tables</h6>
  <p>This is some text, hopefully i can figure out how to add color.</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h7 id="forms" class="p">Forms</h7>
  <p>This is some text, hopefully i can figure out how to add color.</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h8 id="extramarkup" class="p">Extra Markup</h8>
  <p>This is some text, hopefully i can figure out how to add color.</p>



  <a href="#top">Top of Webpage</a>

</body>

</html>

标签： htmlcssclass

解决方案

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

是相对于 html 文件的。

如果 html 文件位于 C:\Users\MyName\Desktop\Website 中。

然后链接指向 C:\users\MyName\Desktop\website\Website\newWebsiteFinalCSS.css

它应该是

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

推荐阅读