前端基础-CSS-2

上篇我们介绍了css的的由来和编写语法，并展示了一个基本的例子，这篇继续向大家展示一些例子来说明如何使用css来美化我们的页面展示，css包含非常多的样式设置，在这里我会把最基础和常用的样式设置展示给大家，上篇我们了解了div这个块元素的使用，因为div内部可以写其它标签，但如果我们像上篇一样设置，整个块里的元素都会生效，那如果我只想设置div中某个标签呢，或者我们想通过div的id或class来设置样式，另外我们常见的就是表单，那如何给表单设置样式，以及如何给一个超链接设置样式，这就是今天我们要讲的内容， 首先还是跟之前一样，我们先给出我们基本的html代码和截图：

css例子1

这是一个特别的网站

首先感谢您的访问

来这做总得做点什么吧？

能干的事太多，我只说三件，但每件都不同

往下面的框写你的故事

登陆到后台系统

带你到python世界

请输入您账户密码

姓名：

密码：

离开的时候点个赞或者留个言吧

以上就是基本的Html代码，大家看到我注释掉了这行 内容，这个文件就是我们一会要写的样式文件，为了展示不带样式的页面，我先把这行注释掉了，那这段代码用chrome打开截图如下：

那接下来我们完成样式文件的编写，首先我们完成的任务如下：

1、设置背景颜色浅蓝色

2、给h1字体加一个边框，设置h2字体颜色

3、设置div中p段落背景颜色

4、设置表单边框，指定宽度和长度

5、设置超链接颜色和一些文字装饰

基本就这些吧，我们直接上代码：

/*背景色*/

body{

background-color: #a8e6ff;

}

/*h1的边框*/

h1{

border: 1px solid black;

}

/*h2颜色*/

h2{

color: purple;

}

/*段落背景色,注意是div下的p标签*/

div p{

background: #fffca5;

}

/*表单边框*/

#textblock{

border: 5px solid gray;

width: 400px;

height: 200px;

}

/*超链接红色*/

a{

color: red;

}

/*表单边框*/

input{

border: 2px solid rgb(144,0,0)

}

/*文字装饰*/

#itemone{

text-decoration: overline;

color: purple;

}

/*表单底部颜色*/

.exit{

background-color: gray;

border: 4px dashed yellow;

}

以上就是整个样式表文件内容，我们看到如果要设置div中p标签的样式，格式可以是 div p（中间一个空格） 的方式来选择设置，另外所有的div都可以设置class或id， 这样我们就可以通过id或class设置样式了，它们的选择方式id以#id名词，例如例子中的#itemone， 如果是classs，就以.开头，例如例子中的.exit， 有了这种方式，我们在设置我们页面样式时会非常的灵活，基本的就讲到这了，保存退出，并取消掉样式文件注释， 刷新浏览器会看到生效后的样式，截图如下：

那么通过这个小例子，我相信大家对css的一些基本使用已经解了，那下篇我们要说css中的盒子模型，这是css学习的一个重点，我们下篇见。