马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2021-6-4 16:52 编辑
在线视频：
课程思维导图
1、<link>
1.1、调用外部样式
style元素玩法在上一讲已经介绍过了，稍微补充一个style属性的玩法。
style元素，即是style标签:<style>
/*
内嵌样式
*/
</style>
style属性，即是标签中的一个属性：<p style="color:#faa"></p>
初学者很容易搞不清上面两个概念，建议好好体会，复习图一张：
本节课，我们学习第三种调用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样式文件换一个维度玩耍下～
稍微说一下：
驰骋江湖多年，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的高端大气款
：
图片素材：
favicon.zip
(744 Bytes, 下载次数: 92)
将图片放在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元素的定义：
一定要记得：
例如课程的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>
均可正常跳转，是不是偷懒偷出新高度呢？！
最终代码：
课后作业，完成了吗？
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-4-16 14:24:04
置顶卡
千斤顶
显身卡
发表于 2018-4-16 21:20:27
发表于 2018-4-19 13:43:36
