温馨提示：千峰网络安全视频到HTML学习的这一块的顺序有点乱，我给大家整理了一下：
注：点击链接可直接跳转观看视频欧！
引言：我的系列博客[网络安全学习篇]上线了，小编也是初次创作博客，经验不足；对千峰网络信息安全开源的视频公开课程的学习整理的笔记整理的也比较粗糙，其实看到目录有300多集的时候，讲道理，有点怂了，所以我就想到了通过写博客（课程笔记）的形式去学习它，虽然写博客会让我多花几倍的时间去学习它，但是当我完成一篇博客所获得的成就感和你们对于我的认同感，让我很满足，能够鼓励我一天天的坚持下去，也希望和我一起学习本期视频的"同道"们也能给一直坚持下去。我们大家一起加油。由于作者本身也是网络信息安全小白，大部分知识点都是初次接触，出现对其理解不深入，不完整，甚至也会出现错误有问题的地方，希望大家谅解、留言提出指正，同时也欢迎大家来找我一起交流学习！！！
对于网络安全学习者来说，本身CSS，HTML不需要详细了解学习，本篇对于CSS的学习，我这里只介绍后期学习需要用到的方面，不对其进行全面深究，只要达到见到它能认识并能够使用css进行简单的修饰html页面的水平即可。
往期博客：
第一阶段：
[网络安全学习篇1]：windowsxp、windows2003、windows7、windows2008系统部署（千峰网络安全视频笔记）
[网络安全学习篇24]：漏洞与木马（千峰网络安全视频笔记 p117-p118）
第二阶段：
第三阶段：
[网络安全学习篇34]：python文件对象对文件内容进行读取和写入
[网络安全学习篇36]：python 面向对象编程思想（本篇）
[网络安全学习篇37]：基于面向对象思想的Python爬虫实例
[网络安全学习篇41]：HTMLCSS （本篇）
下期博客：
[网络安全学习篇42]：靶场环境搭建（ubuntu系统安装优化及vulhub安装）
目录
[CSS]
层叠样式脚本
HTML CSS 都是前端的内容
HTML 四凉八柱
CSS 装修公司
提倡HTML与CSS分离
CSS 样式
元素内容的颜色 color
元素内容的背景色 backgrount-color
字体大小 font-size
RGB颜色
[0-255][0-255][0-255]
白色 255 255 255 ffffff
黑色 0 0 0 000000
CSS与HTML 进行组合的时候有三种
1、内联样式
把样式表写在标签内部作为标签中的style属性值出现
<span style="color:#ffffff;background-color:#000000;font-size:30px;">
事实胜于雄辩，疗效胜于一切</span>
2、内部样式
<head>
<title>CSS</title>
<meta charset="utf-8">
<style type="text/css">
span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}
</style>
3、外部样式
css 单独存放时，后缀名.css
css.css
span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}
testCss3.htm;
<head>
<link rel="stylesheet" type="text/css" href="./style/css.css">
</head>
选择器
CSS 给指定标签相应的样式
标签选择器
span {
background-color:pink;
}<span>没有对就，没有</span>
类选择器
.blood {
color:black;
background-color:red;
font-size:40px;
}<span class="blood">伤害</span>
id 选择器
#xb {
color:black;
background-color:green;
font-size:40px;
}<span>事实胜于<span id="xb">
下面给出所有的测试源码
testCss1.html（内联样式）
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
</head>
<body>
<span style="color:#ffffff;background-color:#000000;font-size:30px;">
事实胜于雄辩，疗效胜于一切</span>
</body>
</html>testCss2.html（内部样式）
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<style type="text/css">
span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}
</style>
</head>
<body>
<span>事实胜于<span id="xb">雄辩</span>，疗效<span class="blood">胜于</span>一切。</span>
<span>没有对就，没有<span class="blood">伤害</span>！</span>
</body>
</html>testCss3.html（外部样式）
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style/css.css">
</head>
<body>
<span>事实胜于<span id="xb">雄辩</span>，疗效<span class="blood">胜于</span>一切。</span>
<span>没有对就，没有<span class="blood">伤害</span>！</span>
</body>
</html>css.css
span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}参考文献：
