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