前两篇我们简单说了下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样式的设置,因为背景调整成了黑色,所以黑色字体的显示不出来了,大家实际练习的时候可以给它一个样式把它显示出来,当然这个只是最基本的调整,后面我们会以实际的一个个比较完整的例子给大家深入介绍,喜欢的小伙伴别忘转发哟~