005 - 相濡以沫不如相见于江湖
本帖最后由 不二如是 于 2021-6-4 16:52 编辑上一集：004 - 一只特立独行的猪
在线视频：
https://www.bilibili.com/video/BV1QW411N762?p=6
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
1、<link>
1.1、调用外部样式
style元素玩法在上一讲已经介绍过了，稍微补充一个style属性的玩法。
style元素，即是style标签:
<style>
/*
内嵌样式
*/
</style>
style属性，即是标签中的一个属性：
<p style="color:#faa"></p>
初学者很容易搞不清上面两个概念，建议好好体会，复习图一张：
http://xxx.fishc.com/forum/201803/20/155728ggk16mkj3s89gj0v.png
本节课，我们学习第三种调用css的方法:
从鱼C-HTML5-速查宝典中，得知可以用来指定外部资源。
那么问题来了，什么是外部资源？
很简单，放在.html文档外的文件（图片、.css、.js、...）都算是外部资源。
现在我们通过把上一节小猪猪中的style：
<style>
body {
background-image: url("../img/bc.png")
}
h1 {
text-align: center;
color: white;
}
h2 {
margin-left: 60%;
color: white;
}
p {
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color: white;
}
img {
position: absolute;
left: 50%;
margin-left: -181px;
}
</style>
剥离出来独立放在和.index同级的样式文件（后缀为.css）中：
style.css：
body {
background-image: url("../img/bc.png")
}
h1 {
text-align: center;
color: white;
}
h2 {
margin-left: 60%;
color: white;
}
p {
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color: white;
}
img {
position: absolute;
left: 50%;
margin-left: -181px;
}
注意：
原本放在style元素中的样式，若放在外部，“.css”文件中，则不需要写style元素。因为这种后缀文件本身可以理解为style，写两层是反而会出错～
现在通过link元素，调用：
<link rel="stylesheet" type="text/css" href="style.css">
恭喜，成功get调用外部css样式表方法。
有兴趣的鱼油，可以看0 0 0 8 - CSS样式文件换一个维度玩耍下～
稍微说一下：
link元素中的rel属性，必须要指定。
驰骋江湖多年，rel="stylesheet"，基本会当成固定值，很多高级编译器会自动生成。
第二个属性，type，算是鸡肋属性（MIME类型基本上逐渐被阉割掉了...），不指定也可以。
最重要的就是，href，调用放在同级的style.css。
关于相对路径，不太清楚的鱼油请看：绝对路径和相对路径
上一讲还有两个类型的css，打印样式：
<style media="print">
h1 {
color: black;
}
h2 {
color: black;
}
p {
color: black;
}
</style>
兼容性样式：
<style media="screen and (min-width:512px) and (max-width:1024px)">
body {
background-image: url("../img/bc2.png");
}
</style>
对于打印样式，link元素，也有media：
所以创建外部文件：
print.css:
h1 {
color: black;
}
h2 {
color: black;
}
p {
color: black;
}
link调用：
<link rel="stylesheet" type="text/css" media="print" href="print.css">
顺利添加样式～
现在看兼容性的样式，仍旧创建外部文件：
screen512to1024.css：
body {
background-image: url("../img/bc2.png");
}
link调用：
<link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)"href="screen512to1024.css">
没错，上面就是link调用外部资源的玩法～
1.2、favicon
favicon就是网站的宣传图标，一起来看下咱们鱼C的高端大气款：
（广告，故意绿色，有兴趣看：这是一则毫无良心的广告）
图片素材：
将图片放在index.html上一级的img文件中：
图标的link属性值，肯定跟上面的样式玩法不一样啦：
type要指定为image/x-icon。
link:
<link rel="icon" type="image/x-icon" href="../img/favicon.ico">
在传统写法中由于各家浏览器兼容性（主要是经常吐槽的ie，梗：只有“前端工程师”才会懂得#恶趣味）不同，还会这么写：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
shortcut icon是传统兼容性所有浏览器的写法，现在这么写同样可以。
但是既然看完了本节课，为啥不用简单快捷的“icon”呢～
通过上面利用link进行外链，最终index.html结果会变得很清晰：
<!DOCTYPE html>
<html>
<head>
<title>一只特立独行的猪</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen512to1024.css">
<link rel="icon" type="image/x-icon" href="../img/favicon.ico">
</head>
<body>
<h1>一只特立独行的猪</h1>
<h2>王小波</h2>
<p>插队的时候，我喂过猪、也放过牛。...</p>
<img src="../img/pig.png">
</body>
</html>
2、<base>
当鱼油充分了解什么是相对路径后，当同一级目录下的多个文件，就可以剥离出共有的相对路径，然后每个文件只需写文件名即可。
先来看下base元素的定义：
一定要记得：
**** Hidden Message *****
例如课程的FC-DEMO案例库中第四讲：
从上图可知，第四讲有三个案例文件，没错，它们放在相同的文件目录下：
http://demo.fishc.com/html5/lesson4/test1/
http://demo.fishc.com/html5/lesson4/test2/
http://demo.fishc.com/html5/lesson4/test3/
共有的相对路径：
http://demo.fishc.com/html5/lesson4
用base元素引入：
<base href="http://demo.fishc.com/html5/lesson4/" target="_blank">
target属性是上节课讲过的，在新标签中打开链接。
在body中添加，三个a元素：
<a href="test1">第一个例子</a>
<a href="test2">第二个例子</a>
<a href="test3">第三个例子</a>
均可正常跳转，是不是偷懒偷出新高度呢？！{:10_297:}
最终代码：
**** Hidden Message *****
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：006 - 为网页注入灵魂
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
抢个沙发哦，追番中。。。 005就要来了吗？我004的课后作业都还没做？我好怕怕！！！
终于要来了么。 gg 我的网页图标一直显示不出来呀？图标大小有要求吗？ 那微笑阳光 发表于 2018-4-20 21:13
我的网页图标一直显示不出来呀？图标大小有要求吗？
貌似是浏览器的问题，谷歌浏览器下可见图标，搜狗和IE不可以 请问课后作业呢？
<a href="test3">第三个例子</a> 复习一下吧 {:5_101:} 233 {:7_146:} 思维导图中的<link ..></link>最后那个</link>感觉有和没有都一样吧 我要接着看下去~~~{:9_235:} 1
回复？ 鱼油
顶顶顶······