如何使用<link>在 HTML 中引用另一个 .css 文件
[英]How to use a <link> referring back to another .css file in HTML
问题描述
So I am trying to link my HTML file to a CSS file in order to use the spans I created on the CSS file.
所以我试图将我的 HTML 文件链接到一个 CSS 文件，以便使用我在 CSS 文件上创建的跨度。
I am coding this with the Komodo application.我正在使用 Komodo 应用程序对此进行编码。 So every time I run the HTML file in a browser it is all black text with no background.所以每次我在浏览器中运行 HTML 文件时，它都是没有背景的黑色文本。 Please tell me what I'm doing wrong.请告诉我我做错了什么。
Here is the content of my files.这是我的文件的内容。
Logan_Tucker_Style_Sheet.css and Logan_Tucker_Page_With_Link.html Logan_Tucker_Style_Sheet.css和Logan_Tucker_Page_With_Link.html
span.firstlinewordone { background: lime; color: red } span.firstlinewordtwo { background: #00FF00; color: #FF0000 } span.firstlinewordthree { background: rgb(00, 255, 00); color: rgb(255, 00, 00) } span.secondlinewordone { background: lime; color: blue } span.secondlinewordtwo { background: #00FF00; color: #0000FF } span.secondlinewordthree { background: rgb(00, 255, 00); color: rgb(00, 00, 255) } span.thirdlinewordone { background: lime; color: aqua } span.thirdlinewordtwo { background: #00FF00; color: #00FFFF } span.thirdlinewordthree { background: rgb(00, 255, 00); color: rgb(00, 255, 255) }
<!DOCTYPE HTML> <html> <head> <title> Using Custom Colors </title> <link rel="stylesheet" type="text/css" href="Logan_Tucker_Style_Sheet.css"> </head> <body> <span class="firstlinewordone"> One </span> <span class="firstlinewordtwo"> Two </span> <span class="firstlinewordthree"> Three </span> <br> <span class="secondlinewordone"> One </span> <span class="secondlinewordtwo"> Two </span> <span class="secondlinewordthree"> Three </span> <br> <span class="thirdlinewordone"> One </span> <span class="thirdlinewordtwo"> Two </span> <span class="thirdlinewordthree"> Three </span> <br> </body> </html>
2 个解决方案
解决方案1
1 2018-10-25 06:18:46
Looks like your HTML file does not see CSS file.看起来您的 HTML 文件没有看到 CSS 文件。 Please try following steps:请尝试以下步骤：
- Right click on element and choose Inspect Element option.右键单击元素并选择“检查元素”选项。 Developer panel should appear, allowing you to see which style applied to selected element应出现开发人员面板，让您查看应用于所选元素的样式
- Check browser console for any errors.检查浏览器控制台是否有任何错误。 Especially for Not Found errors.特别是对于 Not Found 错误。 Those will show where your browser search for linked file.这些将显示您的浏览器搜索链接文件的位置。
- Open HTML code in browser's Inspector, locate link tag and try to open file in new page.在浏览器的检查器中打开 HTML 代码，找到链接标签并尝试在新页面中打开文件。 If everything is fine, CSS file's content should appear.如果一切正常，CSS 文件的内容应该会出现。
- Clear browser's cache on page refresh.在页面刷新时清除浏览器的缓存。 In Windows you can do so by pressing
Ctrl + F5在 Windows 中，您可以通过按Ctrl + F5来执行此操作 - If nothing helps, something outside is wrong.如果没有任何帮助，那么外面的东西是错误的。 As you can see, there is nothing wrong in provided code itself, because it renders correctly on this page.如您所见，提供的代码本身没有任何问题，因为它在此页面上正确呈现。
解决方案2
0 2018-10-25 03:54:17
Html and css files are in the same folder? Html 和 css 文件在同一个文件夹中？ If css is placed somewhere else you should direct link to it eg.如果 css 放在其他地方，你应该直接链接到它，例如。 Css/example.css . CSS/example.css 。
Also you don't need to use span.classname in css, try to use without span, just .classname.另外你不需要在css中使用span.classname，尝试不使用span，只使用.classname。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.