031 - 男人的加油站女人的美容院
本帖最后由 不二如是 于 2019-9-5 07:57 编辑上一集： 030 - 鸟枪换大炮 |【CSS3 开箱】
http://xxx.fishc.com/forum/201803/20/094616suu10rovsa60kazi.jpg
万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！{:10_298:}
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
1、基础的 CSS 语法
在之前的课程中，我们已经使用过很多次 CSS 了，来复习一下。
一段正确的 CSS 代码：
p{color:red;font-size:14px}
关键点说明：
在后续的课程中我们会详细介绍选择器和各种属性的用法。
如果遇到疑问，鱼油可以查看速查宝典：传送门
2、插入 CSS 样式表
分为 3 种引入 CSS 的方式：
一段基础的代码：
<!DOCTYPE html>
<html>
<head>
<title>031讲</title>
<meta charset="utf-8">
</head>
<body>
<p>I Love CSS.</p>
<p>I Love FishC.</p>
</body>
</html>
先通过最直接的内联样式为第一个 p 元素增加样式：
<p style="color: #2ebb96">I Love CSS.</p>
直接目标元素中的 style 属性中增加 CSS 样式，多个属性依旧用 ; 分割：
如果页面中所有属性都通过这种方式写，将会是极大的浪费。
例如有 100 个 p 元素，难道每个都要手写嘛？！
那就可以用内部样式表了，代码不变，在 head 元素中增加 style 元素：
<head>
<title>031讲</title>
<meta charset="utf-8">
<style>
p{
color: red;
font-size: 22px;
}
</style>
</head>
刷新页面，全部字体变大，第一个 p 元素颜色没变，第二个 p 元素变为红色：
这个就是优先级问题，在内部样式表为所有 p 元素指定颜色和字体大小属性。
但是由于内联样式级别高于内部样式表，所以当有冲突后，以优先级高的样式设置为准。
当想为页面内多个元素添加样式时可以采用内部样式表。
当想为多个页面增加统一的样式可以采用外部样式表。
一个好玩的例子：**** Hidden Message *****
我们在页面中添加一个新的 p 元素：
<p class="myFishc">I Love Python.</p>
接下来创建一个后缀必须是 .css 的文件，演示中叫做 style.css ，鱼油可以自行命名，放在和上面html文件同级的位置。
如果位置不一样，鱼油务必将引入路径指定正确。
代码：
p{
color: black;
font-size: 22px;
}
.myFishc{
color: yellow;
font-size: 33px;
}
然后在 head 元素中创建 link 元素：
<link rel="stylesheet" href="style.css">
<style>
p{
color: red;
font-size: 22px;
}
</style>
此时页面效果变为：
虽然在外部样式表中，修改了 p 元素的样式，但只有新增的类为 myFishc 的 p 元素样式改变了。
这依旧是优先级问题：内联>内部>外部
3、注意事项
虽然 CSS 中没有限制空格的使用，意味着如下写法没问题：
p{
color :red;
font-size: 22px;
}
但千万不要在值中增加空格，例如 22px 写为 22 px 。
对大小写不敏感，但建议都用小写。
看懂上面的案例，应该就理解 CSS 样式存在优先级的问题了。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：032 - 朋友，你会Ollie吗？
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif {:10_257:} {:5_109:} 777777777777777777 谢谢大佬 加油小姐姐 1 0 来了
wwwwwwwwwwwwwwwwwwww 123 1 回复看看看~
嘿，亲爱的鱼油，每天都要过得开心哦^_^ 11 want
{:9_231:} I love CSS 感谢总结 hao
页:
[1]
2