前两篇我们简单说了下html基本知识，从这篇开始我们谈一下css内容，这篇主要还是从最基本的内容说起，让大家对css有个初步认识，掌握了css，在后续理解bootstrap的样式就比较容易了，对于了解css的小伙伴来说可能知道怎么用，但为什么要有css？它的出现解决了什么问题？这个我想可能大多数人没有思考过，接下来我们就谈一下这个问题， 因为在最早期的网站中，网页的样式都写在Html页面里，这样的问题就是会让html页面特别复杂，在越来越堆积后，如果再改某个地方会非常困难，说白了就是自己写的代码都没法维护了，那这时候呢为解决这个问题，w3c就发明了css，让html只负责页面结构内容，所有的表现分离出来单独写到一个文件里，这个文件就是样式文件css，css全称是层叠样式表 （Cascading Style Sheets），它定义了如何显示html中的元素，比如居中、字体、背景颜色等，有了它我们就实现了内容和表现的分离，使我们的代码就简单清晰了。
以上就是css的来历，下面我们实际以代码为例看如何使用，首先我们需要让我们的html文件关联一个css文件，怎么实现呢，其实很简单，我们只需要在<head>元素中加入以下代码即可：
|
1 |
<link rel="stylesheet" href="mycss.css"> |
其中href就是你关联的css文件，这里只需要注意如果你的css文件跟html文件不在一个目录，就需要写你的引用路径即可。
添加了这行，我们就可以安心的在mycss.css文件中编写我们的样式了，首先我先来一个基本的Html代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title>注册</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <h1>欢迎来到我的站点!</h1> <p><h1>Django 介绍</h1></p> <p><strong>无序列表</strong></p> <ul> <li>自助管理后台</li> <li>虽然 Django自带ORM</li> <li>URL design</li> <li>Django 的 App 理念很好。</li> <li>Django 的错误提示做详细了。</li> </ul> <p>我是完美的分割线，哒哒哒！！！</p> <hr> <div> <p>我是div内部第一个句子</p> <p>我是div内部第二个句子</p> <p>我是div内部第三个句子</p> <p><span>我在div里的span内部,我骄傲！</span></p> </div> </body> </html> |
这是一个基本的没有样式的html代码， 前面我们说过div和span的用途，在今天这个例子里我们就会看到这两个标签的用途，它们是为样式而生，这个用chome打开的后是这样的：
接下来，我们开始编写css样式文件，开始前我先说一下css样式文件的基本编写语法，css语法规则是选择器选tag，然后一个大括号，里面是一个属性：值，格式如下：
|
1 2 3 |
h1{ color: red; } |
以上就是表示html中h1元素的内容颜色是红色，那接下来我们来完成几个设置：
1、h1标题字体改变为红色
2、无序列表中<li>的内容变成绿色
3、<div>标签添加一个橙色背景色，加上边框，宽度是4px，边框是双线显示。
4、<span>文字背景色绿色
5、整个文件背景编程黑色
现在我们打开一个文件，命名问mycss.css，写入如下内容：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*设置H1元素是红色*/ h1{ color: red; } /*设置li元素是绿色*/ li{ color: green } /*设置背景色是黑色*/ body{ background-color: black; } /*设置div背景颜色边框*/ div{ background-color: orange; border-color: blue; border-width: 4px; border-style: double; } /*设置span内背景颜色绿色*/ span{ background-color: green; } |
设置完成后，保存刷新刚才打开的页面，显示如下：
可以看到我们的样式已经生效了，这样就完成了最基本的css样式的设置，因为背景调整成了黑色，所以黑色字体的显示不出来了，大家实际练习的时候可以给它一个样式把它显示出来，当然这个只是最基本的调整，后面我们会以实际的一个个比较完整的例子给大家深入介绍，喜欢的小伙伴别忘转发哟~