QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 219|回复: 7

[学习笔记] 005 - 相濡以沫不如相见于江湖

[复制链接]
最佳答案
120 
累计签到:632 天
连续签到:160 天
不二如是 发表于 2018-4-16 14:24:04 2197 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2018-4-24 17:42 编辑







                               
登录/注册后可看大图


万众瞩目的零基础入门学习Web开发(H5&C3)开始更新了!!!


Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生,时间总是善待任何想拿它搞事情的存在体

很幸运,一切就这样开始了,开局总会有些不足,但一切在慢慢变好,不是吗?

作为,吹水阁中最爱吹水(爱干无意义事情)的鱼油,整套教程的亮点(槽点)由我来承包~

关注本系列推送(最下方有订阅方式)的鱼油,会享受到一个福利
会比正常推送,早一个时间节点,看到还未出炉的美味课程


哈哈,废话不多说了,#敲黑板时刻!





官方课程下载地址:传送门





课程思维导图

Snip20180416_58.png

猛戳

                               
登录/注册后可看大图
超清





1、<link>

1.1、调用外部样式

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

style元素,即是style标签:
  1. <style>
  2. /*
  3. 内嵌样式
  4. */
  5. </style>
复制代码


style属性,即是标签中的一个属性
  1. <p style="color:#faa"></p>
复制代码


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

                               
登录/注册后可看大图


本节课,我们学习第三种调用css的方法:
Snip20180416_59.png


鱼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)中:
Snip20180416_62.png


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样式文件换一个维度玩耍下~

稍微说一下:
Snip20180416_63.png

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:
Snip20180416_64.png


所以创建外部文件:
Snip20180416_65.png


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">
复制代码


顺利添加样式~

现在看兼容性的样式,仍旧创建外部文件:
Snip20180416_66.png


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
Snip20180416_54.png


favicon就是网站的宣传图标,一起来看下咱们鱼C的高端大气款 Snip20180416_67.png
Snip20180416_53.png

(广告,故意绿色,有兴趣看:这是一则毫无良心的广告


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

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +5 收起 理由
隨鈊乄鎍慾 + 5 + 5 + 2 认真吹水!
xenli + 5 + 5 + 3 热爱鱼C^_^

查看全部评分

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:89 天
连续签到:6 天
chmmoon 发表于 2018-4-16 21:20:27 From FishC Mobile | 显示全部楼层
抢个沙发哦,追番中。。。
最佳答案
3 
累计签到:1555 天
连续签到:71 天
隨鈊乄鎍慾 发表于 2018-4-16 22:19:42 | 显示全部楼层
005就要来了吗?我004的课后作业都还没做?我好怕怕!!!
最佳答案
0 
累计签到:1 天
连续签到:1 天
me_morecool 发表于 2018-4-18 10:50:05 | 显示全部楼层
终于要来了么。
最佳答案
0 
累计签到:24 天
连续签到:1 天
742277203 发表于 2018-4-19 13:43:36 | 显示全部楼层
gg
最佳答案
0 
累计签到:18 天
连续签到:5 天
那微笑阳光 发表于 7 天前 | 显示全部楼层
我的网页图标一直显示不出来呀?图标大小有要求吗?
最佳答案
0 
累计签到:18 天
连续签到:5 天
那微笑阳光 发表于 7 天前 | 显示全部楼层
那微笑阳光 发表于 2018-4-20 21:13
我的网页图标一直显示不出来呀?图标大小有要求吗?

貌似是浏览器的问题,谷歌浏览器下可见图标,搜狗和IE不可以
最佳答案
0 
累计签到:18 天
连续签到:5 天
那微笑阳光 发表于 6 天前 | 显示全部楼层
请问课后作业呢?

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-4-27 16:38

快速回复 返回顶部 返回列表