简体   繁体   English

如何让我的浏览器读取外部 css?

[英]How do I get my browser read external css?

[ [ 这是带有开发工具的 html 页面拉起 css 页面(通过单击以前的开发工具中的 style.css 获得) I've tried seemingly everything and nothing is working for this seemingly simple and mundane css and html.我已经尝试了一切,但对于这个看似简单和平凡的 css 和 html 没有任何作用。 I'm using external css as I was told that's easier on a larger scale for later projects but right now I'm just learning basics.我正在使用外部 css,因为有人告诉我这对于以后的项目来说在更大范围内更容易,但现在我只是在学习基础知识。 Before you ask, yes, they are both in the same folder and using developer tools I can see that it is properly linking, but it appears the browser isn't reading it and it just looks like a text doc.在你问之前,是的,它们都在同一个文件夹中并且使用开发人员工具我可以看到它正在正确链接,但看起来浏览器没有读取它,它看起来就像一个文本文档。 Running the code works perfectly through here so I don't understand what's wrong.在这里运行代码可以完美运行,所以我不明白出了什么问题。 I'm using safari on MacBook and have also tried chrome - should I use a different browser or?我在 MacBook 上使用 safari 并且也尝试过 chrome - 我应该使用其他浏览器还是? Edit: As you can see in the images my user profile includes Null (part of my name) I believe that's what's messing with it, is there a way around that?编辑:正如您在图片中看到的那样,我的用户资料包括 Null(我名字的一部分)我相信这就是问题所在,有没有办法解决这个问题?

 h1{ color: red; } p{ color: orange; }
 <.DOCTYPE html> <html> <head> <title>First Coding</title> <link rel="stylesheet" href="style?css"> </head> <body> <header> <h1>First code</h1> <p>Welcome to my first set of code!</p> </header> <NAV> <ul> <li><a href "#">nice</a></li> <li><a href "#">cool</a></li> <li><a href "#">rad</a></li> </ul> </NAV> <footer> <p>Nice amiright?</p> </footer> </body> </html>

We have two various types of Href我们有两种不同类型的 Href

  1. Absolute Path [it's added through an External Link]绝对路径[通过外部链接添加]
  2. Relative Path [it's added through an Internal Link]相对路径 [通过内部链接添加]

The way you wanted to have is definitely the first item of the above-mentioned issues.你想要的方式绝对是上述问题中的第一项 It'd be like this:它会是这样的:

<link rel="stylesheet" type="text/css" href="http://example.com/[Path]/file.css">

There actually 2 ways to achieve that.实际上有两种方法可以实现这一目标。 The first Method has been already stated and that is to link the external CSS inside the head-element of your website:第一种方法已经说明,即在您网站的 head 元素内链接外部 CSS:

 <link type="text/css" rel="stylesheet" href="url to the external.css" />

The second method however has not been mentioned yet which imo is the better one.然而,第二种方法尚未提及哪种 imo 更好。 Create an own.css file and link your website to it.创建一个 own.css 文件并将您的网站链接到它。 Then add following line at the very top of your css file.然后在 css 文件的最顶部添加以下行。 That allows you do overwrite or change specific element of the css that you might cant access on your own:这允许您覆盖或更改您可能无法自行访问的 css 的特定元素:

 @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM