005 - 相濡以沫不如相见于江湖

不二如是

上一集：004 - 一只特立独行的猪

---

在线视频：

---

课程思维导图

猛戳

                               
登录/注册后可看大图

超清

---

1、<link>

1.1、调用外部样式

style元素玩法在上一讲已经介绍过了，稍微补充一个style属性的玩法。

style元素，即是style标签:

1. <style>
   
2. /*
   
3. 内嵌样式
   
4. */
   
5. </style>

复制代码

style属性，即是标签中的一个属性：

1. <p style="color:#faa"></p>

复制代码

初学者很容易搞不清上面两个概念，建议好好体会，复习图一张：

                               
登录/注册后可看大图

本节课，我们学习第三种调用css的方法:

从鱼C-HTML5-速查宝典中，得知可以用来指定外部资源。

那么问题来了，什么是外部资源？

很简单，放在.html文档外的文件（图片、.css、.js、...）都算是外部资源。

现在我们通过把上一节小猪猪中的style：

1. <style>
   
2.         body {
   
3.             background-image: url("../img/bc.png")
   
4.         }
   
5.         h1 {
   
6.             text-align: center;
   
7.             color: white;
   
8.         }
   
9.         h2 {
   
10.             margin-left: 60%;
    
11.             color: white;
    
12.         }
    
13.         p {
    
14.             text-indent: 32px;
    
15.             font-size: 16px;
    
16.             line-height: 32px;
    
17.             color: white;
    
18.         }
    
19.         img {
    
20.             position: absolute;
    
21.             left: 50%;
    
22.             margin-left: -181px;
    
23.         }
    
24.     </style>

复制代码

剥离出来独立放在和.index同级的样式文件（后缀为.css）中：

style.css：

1. body {
   
2.             background-image: url("../img/bc.png")
   
3.         }
   
4.         h1 {
   
5.             text-align: center;
   
6.             color: white;
   
7.         }
   
8.         h2 {
   
9.             margin-left: 60%;
   
10.             color: white;
    
11.         }
    
12.         p {
    
13.             text-indent: 32px;
    
14.             font-size: 16px;
    
15.             line-height: 32px;
    
16.             color: white;
    
17.         }
    
18.         img {
    
19.             position: absolute;
    
20.             left: 50%;
    
21.             margin-left: -181px;
    
22.         }

复制代码

注意：

原本放在style元素中的样式，若放在外部，“.css”文件中，则不需要写style元素。因为这种后缀文件本身可以理解为style，写两层是反而会出错～

现在通过link元素，调用：

1. <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，打印样式：

1. <style media="print">
   
2.         h1 {
   
3.             color: black;
   
4.         }
   
5.         h2 {
   
6.             color: black;
   
7.         }
   
8.         p {
   
9.             color: black;
   
10.         }
    
11.     </style>

复制代码

兼容性样式：

1. <style media="screen and (min-width:512px) and (max-width:1024px)">
   
2.         body {
   
3.             background-image: url("../img/bc2.png");
   
4.         }
   
5.     </style>

复制代码

对于打印样式，link元素，也有media：

所以创建外部文件：

print.css:

1.     h1 {
   
2.             color: black;
   
3.         }
   
4.         h2 {
   
5.             color: black;
   
6.         }
   
7.         p {
   
8.             color: black;
   
9.         }
   

复制代码

link调用：

1. <link rel="stylesheet" type="text/css" media="print" href="print.css">

复制代码

顺利添加样式～

现在看兼容性的样式，仍旧创建外部文件：

screen512to1024.css：

1. body {
   
2.             background-image: url("../img/bc2.png");
   
3.         }

复制代码

link调用：

1. <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的高端大气款 ：

（广告，故意绿色，有兴趣看：这是一则毫无良心的广告）

图片素材： favicon.zip (744 Bytes, 下载次数: 92)

2018-4-16 11:40 上传

点击文件名下载附件

将图片放在index.html上一级的img文件中：

图标的link属性值，肯定跟上面的样式玩法不一样啦：

type要指定为image/x-icon。

link:

1. <link rel="icon" type="image/x-icon" href="../img/favicon.ico">

复制代码

在传统写法中由于各家浏览器兼容性（主要是经常吐槽的ie，梗：只有“前端工程师”才会懂得#恶趣味）不同，还会这么写：

1. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

复制代码

shortcut icon是传统兼容性所有浏览器的写法，现在这么写同样可以。

但是既然看完了本节课，为啥不用简单快捷的“icon”呢～

通过上面利用link进行外链，最终index.html结果会变得很清晰：

1. <!DOCTYPE html>
   
2. <html>
   
3. <head>
   
4.     <title>一只特立独行的猪</title>
   
5.     <meta charset="utf-8">
   
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
   
8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
   
9.     <meta name="author" content="小甲鱼">
   
10.     <link rel="stylesheet" type="text/css" href="style.css">
    
11.     <link rel="stylesheet" type="text/css" media="print" href="print.css">
    
12.     <link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen512to1024.css">
    
13.     <link rel="icon" type="image/x-icon" href="../img/favicon.ico">
    
14. </head>
    
15. <body>
    
16. <h1>一只特立独行的猪</h1>
    
17. <h2>王小波</h2>
    
18. <p>插队的时候，我喂过猪、也放过牛。...</p>
    
19. <img src="../img/pig.png">
    
20. </body>
    
21. </html>

复制代码

---

2、<base>

当鱼油充分了解什么是相对路径后，当同一级目录下的多个文件，就可以剥离出共有的相对路径，然后每个文件只需写文件名即可。

先来看下base元素的定义：

一定要记得：

游客，如果您要查看本帖隐藏内容请回复

例如课程的FC-DEMO案例库中第四讲：

从上图可知，第四讲有三个案例文件，没错，它们放在相同的文件目录下：

1. http://demo.fishc.com/html5/lesson4/test1/
   
2. http://demo.fishc.com/html5/lesson4/test2/
   
3. http://demo.fishc.com/html5/lesson4/test3/
   

复制代码

共有的相对路径：

1. http://demo.fishc.com/html5/lesson4

复制代码

用base元素引入：

1. <base href="http://demo.fishc.com/html5/lesson4/" target="_blank">

复制代码

target属性是上节课讲过的，在新标签中打开链接。

在body中添加，三个a元素：

1. <a href="test1">第一个例子</a>
   
2. <a href="test2">第二个例子</a>
   
3. <a href="test3">第三个例子</a>

复制代码

均可正常跳转，是不是偷懒偷出新高度呢？！

最终代码：

游客，如果您要查看本帖隐藏内容请回复

---

课后作业，完成了吗？

传送门

---

                               
登录/注册后可看大图

下一集：006 - 为网页注入灵魂

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

chmmoon

抢个沙发哦，追番中。。。

隨鈊乄鎍慾

005就要来了吗？我004的课后作业都还没做？我好怕怕！！！

me_morecool

终于要来了么。

742277203

gg

那微笑阳光

我的网页图标一直显示不出来呀？图标大小有要求吗？

那微笑阳光

那微笑阳光 发表于 2018-4-20 21:13
我的网页图标一直显示不出来呀？图标大小有要求吗？

貌似是浏览器的问题，谷歌浏览器下可见图标，搜狗和IE不可以

那微笑阳光

请问课后作业呢？

yzy1217492030

<a href="test3">第三个例子</a>

不多太少

复习一下吧

NinHeaven

cjj735243954

233

floride

syf040916

思维导图中的<link ..></link>  最后那个</link>  感觉有和没有都一样吧

syf040916

我要接着看下去~~~

念澪

1

AVAN

回复？

鲫鱼1

鱼油

和vvv

无敌太刀

顶顶顶······