鱼C论坛

 找回密码
 立即注册
查看: 8659|回复: 23

[学习笔记] 031 - 男人的加油站女人的美容院

[复制链接]
发表于 2019-8-25 08:05:21 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

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

x
本帖最后由 不二如是 于 2019-9-5 07:57 编辑







                               
登录/注册后可看大图


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


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

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

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

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



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





在线视频:传送门





课程思维导图

Snip20190825_356.png

猛戳

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





1、基础的 CSS 语法

在之前的课程中,我们已经使用过很多次 CSS 了,来复习一下。

一段正确的 CSS 代码:

  1. p{color:red;font-size:14px}
复制代码

关键点说明:
Snip20190825_357.png

在后续的课程中我们会详细介绍选择器和各种属性的用法。

如果遇到疑问,鱼油可以查看速查宝典:传送门


2、插入 CSS 样式表

分为 3 种引入 CSS 的方式:
Snip20190825_354.png


一段基础的代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>031讲</title>
  5.     <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <p>I Love CSS.</p>
  9. <p>I Love FishC.</p>
  10. </body>
  11. </html>
复制代码

先通过最直接的内联样式为第一个 p 元素增加样式:

  1. <p style="color: #2ebb96">I Love CSS.</p>
复制代码

直接目标元素中的 style 属性中增加 CSS 样式,多个属性依旧用 ; 分割:
Snip20190825_358.png


如果页面中所有属性都通过这种方式写,将会是极大的浪费。

例如有 100 个 p 元素,难道每个都要手写嘛?!

那就可以用内部样式表了,代码不变,在 head 元素中增加 style 元素:

  1. <head>
  2.     <title>031讲</title>
  3.     <meta charset="utf-8">
  4.     <style>
  5.         p{
  6.             color: red;
  7.             font-size: 22px;
  8.         }
  9.     </style>
  10. </head>
复制代码

刷新页面,全部字体变大,第一个 p 元素颜色没变,第二个 p 元素变为红色:
Snip20190825_359.png


这个就是优先级问题,在内部样式表为所有 p 元素指定颜色和字体大小属性。

但是由于内联样式级别于内部样式表,所以当有冲突后,以优先级高的样式设置为准。

当想为页面内多个元素添加样式时可以采用内部样式表。

当想为多个页面增加统一的样式可以采用外部样式表。

一个好玩的例子:
游客,如果您要查看本帖隐藏内容请回复


我们在页面中添加一个新的 p 元素:

  1. <p class="myFishc">I Love Python.</p>
复制代码

接下来创建一个后缀必须是 .css 的文件,演示中叫做 style.css ,鱼油可以自行命名,放在和上面html文件同级的位置。

如果位置不一样,鱼油务必将引入路径指定正确。

代码:

  1. p{
  2.     color: black;
  3.     font-size: 22px;
  4. }

  5. .myFishc{
  6.     color: yellow;
  7.     font-size: 33px;
  8. }
复制代码

然后在 head 元素中创建 link 元素:
  1. <link rel="stylesheet" href="style.css">
  2.     <style>
  3.         p{
  4.             color: red;
  5.             font-size: 22px;
  6.         }
  7.     </style>
复制代码

此时页面效果变为:
Snip20190825_360.png


虽然在外部样式表中,修改了 p 元素的样式,但只有新增的类为 myFishc 的 p 元素样式改变了。

这依旧是优先级问题:内联>内部>外部


3、注意事项

虽然 CSS 中没有限制空格的使用,意味着如下写法没问题:

  1. p{
  2.             color :  red;
  3.             
  4.             
  5.             font-size: 22px;
  6.         }
复制代码

但千万不要在中增加空格,例如 22px 写为 22 px 。

对大小写不敏感,但建议都用小写。

看懂上面的案例,应该就理解 CSS 样式存在优先级的问题了。




课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


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



                               
登录/注册后可看大图

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
风吹来了 + 5 + 5 + 3 爱了

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-8-27 16:51:30 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-8-30 12:32:03 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-9-2 16:37:42 | 显示全部楼层
777777777777777777
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-2-8 16:29:54 | 显示全部楼层
谢谢大佬
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-11 11:30:27 | 显示全部楼层
加油小姐姐
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-21 09:52:04 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-8-27 09:56:39 | 显示全部楼层
0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-9-27 14:52:46 | 显示全部楼层
来了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-9-29 07:38:26 | 显示全部楼层
wwwwwwwwwwwwwwwwwwww
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-11-9 13:35:17 | 显示全部楼层
123
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-12-16 11:12:58 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-1-11 13:16:11 | 显示全部楼层
回复看看看~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-20 00:56:31 | 显示全部楼层

嘿,亲爱的鱼油,每天都要过得开心哦^_^
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-1 16:41:05 | 显示全部楼层
11
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-3-3 17:16:39 | 显示全部楼层
want
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-3-9 01:10:55 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-3-21 15:34:40 | 显示全部楼层
I love CSS
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-17 14:49:23 | 显示全部楼层
感谢总结
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-19 10:13:55 | 显示全部楼层
hao
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 07:14

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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