前两篇我们简单说了下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-1_java

接下来,我们开始编写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-1_java_02

可以看到我们的样式已经生效了,这样就完成了最基本的css样式的设置,因为背景调整成了黑色,所以黑色字体的显示不出来了,大家实际练习的时候可以给它一个样式把它显示出来,当然这个只是最基本的调整,后面我们会以实际的一个个比较完整的例子给大家深入介绍,这篇就到这里,喜欢的小伙伴别忘转发哟~