how2j.cn


工具版本兼容问题
如果把所有的css都写在html文件里面，一旦样式比较多的时候，就会显得不易维护

这个时候就会选择把所有的css内容，放在一个独立文件里

然后在html中引用该文件

通常这个文件会被命名为style.css
纠

示例 1 : 直接在html里面写样式   
示例 2 : 把样式代码写在style.css，并在html中包含它   
示例 3 : css是本地文件 如何包含   

示例 1 :

直接在html里面写样式

edit 顶 折
纠 问
样式代码写在style标签里
运行效果
<style> .p1{ color:red; } .span1{ color:blue; } </style> <p class="p1">红色</p> <span class="span1">蓝色</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.p1{
  color:red;
}
 
.span1{
  color:blue;
}
</style>
 
<p class="p1">红色</p>
 
<span class="span1">蓝色</span>


示例 2 :

把样式代码写在style.css，并在html中包含它

edit 顶 折
纠 问
创建一个文件叫style.css
其内容为
.p1{
color:red;
}
.span1{
color:blue;
}

然后在html中包含该文件
<link rel="stylesheet" type="text/css" href="/study/style.css" />


注：style.css文件里，就不要再使用style标签了
运行效果
<link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" /> <p class="p1">红色</p> <span class="span1">蓝色</span>
1
2
3
4
5
<link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" />
 
<p class="p1">红色</p>
 
<span class="span1">蓝色</span>


示例 3 :

css是本地文件 如何包含

edit 顶 折
纠 问
在测试的时候，大家写的css文件都是放在本地的，比如d:/style.css
这时就应该写成
href="file://d:/style.css"
css是本地文件 如何包含


HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。


问答区域    
2024-07-23 关于渲染无效的解决办法
虚心求学

关于 前端部分-CSS-css文件 的提问



写了css文件但是打开html还是没效果，原因有如下： （1）css 文件 写了“<style>”标签，导致部分样式失效。 （2）css 文件后缀未改为.css，未保存。 （3）路径写错(相对路径，在相同文件夹内直接写文件名和后缀即可)，html 未引用。 解决办法： 如果写了 “<style>” 标签，会忽略第一个样式的语句块{}，但后续的样式仍会渲染。 因此这种写法，仍然可以生效： <style> {} .green{ color : #0f0; } .blue{ color : #00f; } .red{ color : #f00; } </style>


2 个答案

虚心求学
答案时间：2024-07-23
如果用相对路径无效的情况，解决办法如下: (1) 如果 css 文件在上级目录。 css 引用的相对路径可以这么写： <link rel = "stylesheet" type = "text/css" href = "../style.css"> 也就是在前面加上 ../ ，如果在上上个文件夹内，可以用 ../../ 这种写法。 (2)如果 css 文件在下级目录。 css 引用的相对路径可以这么写： <link rel = "stylesheet" type = "text/css" href = "./文件夹/style.css"> 也就是在前面加上 ./ （注意斜杠前面是一个 点），“ ./ ” 表示 html 文件当前的文件夹。

虚心求学
答案时间：2024-07-23
如果用绝对路径，可以用 href="file://d:/style.css" 这种写法，也就是本地绝对路径 前面 加“ file:// ” 可以解决，注意file后面是两个斜杠。 如果引用了绝对路径仍然无效，可能原因是： 路径包含了中文，同时未声明编码方式，导致中文乱码无法识别路径。 解决方法如下： 在 html 开头加上声明： <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head>



回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢


2020-01-24 没有正确加载css的看这里
kira_

关于 前端部分-CSS-css文件 的提问
应该写为href="file://D:/web/style.css">，文件后面不能加"/"，或者直接写成"style.css"





回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2019-01-24 引用CSS文件后 背景图片加载不出来。
2018-02-17 解释一下这行代码的属性可以嘛?
2017-07-20 为什么我的本地超链接不能打开？


提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 2 条以前的提问，请 点击查看

提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢