前两篇我们简单说了下html基本知识,从这篇开始我们谈一下css内容,这篇主要还是从最基本的内容说起,让大家对css有个初步认识,掌握了css,在后续理解bootstrap的样式就比较容易了,对于了解css的小伙伴来说可能知道怎么用,但为什么要有css?它的出现解决了什么问题?这个我想可能大多数人没有思考过,接下来我们就来谈一下这个问题, 因为在最早期的网站中,网页的样式都写在Html页面里,这样的问题就是会让html页面特别复杂,在越来越堆积后,如果再改某个地方会非常困难,说白了就是自己写的代码都没法维护了,那这时候呢为解决这个问题,w3c就发明了css,让html只负责页面结构内容,所有的表现分离出来单独写到一个文件里,这个文件就是样式文件css,css全称是层叠样式表 (Cascading Style Sheets),它定义了如何显示html中的元素,比如居中、字体、背景颜色等,有了它我们就实现了内容和表现的分离,使我们的代码就简单清晰了。
以上就是css的来历,下面我们实际以代码为例看如何使用,首先我们需要让我们的html文件关联一个css文件,怎么实现呢,其实很简单,我们只需要在<head>元素中加入以下代码即可:
<link rel="stylesheet" href="mycss.css">
其中href就是你关联的css文件,这里只需要注意如果你的css文件跟html文件不在一个目录,就需要写你的引用路径即可。
添加了这行,我们就可以安心的在mycss.css文件中编写我们的样式了,首先我先来一个基本的Html代码:
<!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,然后一个大括号,里面是一个属性:值,格式如下:
h1{
color: red;
}
以上就是表示html中h1元素的内容颜色是红色,那接下来我们来完成几个设置:
1、h1标题字体改变为红色
2、无序列表中<li>的内容变成绿色
3、<div>标签添加一个橙色背景色,加上边框,宽度是4px,边框是双线显示。
4、<span>文字背景色绿色
5、整个文件背景编程黑色
现在我们打开一个文件,命名问mycss.css,写入如下内容:
/*设置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样式的设置,因为背景调整成了黑色,所以黑色字体的显示不出来了,大家实际练习的时候可以给它一个样式把它显示出来,当然这个只是最基本的调整,后面我们会以实际的一个个比较完整的例子给大家深入介绍,这篇就到这里,喜欢的小伙伴别忘转发哟~