澳门新葡萄京www27111com

如果把所有的css都写在html文件里面,一旦样式比较多的时候,就会显得不易维护

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

然后在html中引用该文件

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

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

示例 1 :

直接在html里面写样式

样式代码写在style标签里
运行效果
<style> .p1{ color:red; } .span1{ color:blue; } </style> <p class="p1">红色</p> <span class="span1">蓝色</span>
 澳门新葡萄京www27111com www.prowz.com <style>
.p1{
  color:red;
}

.span1{
  color:blue;
}
</style>

<p class="p1">红色</p>

<span class="span1">蓝色</span>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

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

创建一个文件叫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="http://www.prowz.com/study/style.css" /> <p class="p1">红色</p> <span class="span1">蓝色</span>
<link rel="stylesheet" type="text/css" href="http://www.prowz.com/study/style.css" />

<p class="p1">红色</p>

<span class="span1">蓝色</span>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

css是本地文件 如何包含

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


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


问答区域    
2018-02-17 解释一下这行代码的属性可以嘛?
记得看笔记
<link rel="stylesheet" type="text/css" href="http://www.prowz.com/study/style.css" /> 我把type删除了 居然对运行结果没有影响 后面那个参数懂了




1 个答案

mawen 答案时间:2018-03-13
link:连接,表示引入外部文件。 rel=“stylesheet”:relationship的缩写,含义为关系; 而stylesheet由style(样式)和sheet(表格),合起来就是样式表,描述了当前页面与href所指定文档的关系。 type="text/css":表示了外联文档的类型为css。 href="http://www.prowz.com/study/style.css":表示指定关联文档的路径。




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-07-20 为什么我的本地超链接不能打开?
LABABAY



<a href="file://C:/Users/Administrator/Desktop/testCss.css"><p class="p1">红色</p></a> 本来是测试本地的css文件,无法打开,然后写了个href测试链接对不对, 不知道为什么打不开,把“file://C:/Users/Administrator/Desktop/testCss.css”直接复制到浏览器地址栏里面却可以显示css文件

							

							


4 个答案

LABABAY 答案时间:2017-07-21
似乎找到原因了,谷歌浏览器调试时显示Not allowed to load local resource: file:///C:/Users/Administrator/Desktop/testCss.css
“如果你的页面html文件是放在本地的,比如用浏览器打开桌面上的html文件,是可以访问本地图片文件的。
如果你的html是在web服务器上的,即浏览器的地址是http://xxx.xxx/xx.html而不是file:///C:/xxx.html,那么是不允许打开file://开头的本地图片的,这是出于安全考虑的。这种情况下你可以按F12看看浏览器的错误信息是不是“not allowed to load local resource”。”

LABABAY 答案时间:2017-07-21
最后,我用了相对路径,不用绝对路径,测试通过

LABABAY 答案时间:2017-07-21
还是不行

how2j 答案时间:2017-07-21
多个斜杠,写成file:///试试




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-05-31 为什么html引用css,网页没有效果呢
2017-05-31 示例2,注:是html文件不要用style标签吧?




提问之前请登陆
关于 前端基础-CSS-css文件 的提问

尽量提供截图、代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图