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>
<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中包含它

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>
<link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" />

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

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


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

css是本地文件 如何包含

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


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


问答区域    
2019-01-24 引用CSS文件后 背景图片加载不出来。
青空




引用用不了
加载中
背景图片写在css文件里

为什么啊

网页打开就一直转圈 看不到背景图片

							


1 个答案

Wang20180504
答案时间:2019-03-05
首先观察要引入的图片(文件)在项目什么位置存放。例如当前我们要引入 项目下 WebRoot/css/image/icon.png这张图片; 其次要看清我们需要将图片引到哪个页面上。此处我们将 icon.png这个图片引入到 WebRoot/manage/common.html z这个页面; 有两种方式: 1、一种是绝对路径   此处的绝对路径应该是: http://localhost:8080/ProjectName/css/image/icon.png   即可在common.html页面引入icon.png这个图片。 2、第二种是相对路径  此处的路径应该是: ../css/image/icon.png  既可在common.html页面引入icon.png这个图片。  相对路径../的用法很简单。比如common.html页面在manage文件夹下,../表示返回上级目录。../css/image/icon.png就表示common.html先返回上一级目录 ,在进入css目录下的image目录下的icon.png。 ../../就表示当前文件所在目录返回两级菜单的目录下。



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-02-17 解释一下这行代码的属性可以嘛?
记得看笔记

<link rel="stylesheet" type="text/css" href="http://how2j.cn/study/style.css" /> 我把type删除了 居然对运行结果没有影响 后面那个参数懂了




2 个答案

佛说
答案时间:2019-09-09
解释的真好,感谢@mawen

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



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-07-20 为什么我的本地超链接不能打开?
2017-05-31 为什么html引用css,网页没有效果呢
2017-05-31 示例2,注:是html文件不要用style标签吧?




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-css文件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 982790551
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图